也许你不需要用 SSR

date

Aug 9, 2021

slug

jamstack

status

Published

分享主题和目标

有前台类业务（SSR）需求

了解 Jamstack 以及解决什么问题

实践 Jamstack

背景

前端应用主要分为：SPA（单页应用）、MPA（多页应用），主要区别在于页面渲染方式：

SSR 优缺点

优点

由图可以看出，SSR 相当于服务端（Node.js）模拟渲染流程，用户访问请求时就返回了完整的 HTML 内容，所以经常用在两个场景：

有 SEO 诉求，用在搜索引擎检索以及社交分享，用在前台类应用。

首屏渲染时长有要求，常用在移动端、弱网情况下。

缺点

SSR 依赖服务端 Node.js 运行时，同时渲染本身是耗资源操作，所以缺点也很明显：

一定的运维、服务器成本

更长的 TTFB （首字节到达时长）

针对第一个缺点，工程上可以使用 FaaS 函数降低服务器、运维成本，但是第二个缺点，除了加缓存，很难从根本上解决。

假设

针对前台类 SSR 站点，用户一次访问，只使用 CDN，不需要服务器、数据库不需要提供实时的服务

如果真可以，核心问题就是 怎样将最新的数据，放到 CDN 上展示 呢？

什么是 Jamstack？

Jamstack 是一套技术架构，在现有的技术和平台下，为前台类应用降本增收（即 For fast and secure sites）；

核心是三点：

JavaScript：一般是各类 BaaS 服务，如调用评论 SDK、Auth0、Firebase 等

APIs：Headless CMS 系统/平台，可提供 HTTP 接口（RESTful）、基于 Git 的 API

Markup：站点生成器，关键是页面预渲染（Pre-rendering），在 build 构建时生成完整 HTML，像 Next.js、Gatsby、VuePress、Hugo 等都支持，更多

Headless CMS

我们不妨先想 Headless Chrome：无头浏览器，不用打开浏览器，通过 API 操作就可能实现点击、跳转、表单填写等

Headless CMS 就是不提供前台页面展示的内容中台，只负责内容的增删改，不涉及内容展示。（广义来讲：提供增删改，并提供 OpenAPI 的查询，都可以算成 Headless CMS）

（图来源于 Contentful）

页面预渲染（Pre-rendering）

服务端渲染（SSR）是在运行时执行，那么预渲染本质上还是 SSR 技术，只不过执行时机在 构建时，将用户请求与渲染分开。

这样就实现了：用户看到的内容是最新的，站长的服务器/运维成本是最小的（几乎为 0）

怎么使用 Jamstack？

使用的关键是找齐三件套，召唤 Jamstack，这里以 issues 实时列表做 Jamstack 实践

J：utterances 评论 SDK（如果需要登录功能 Auth0，需要借助 FaaS）

A：Github issues：所有 issues 都可以通过 Open API 获取

M：Next.js：社区非常优秀的 React SSR 框架

在线 demo

和一般站点相比，主要区别在于：

不同于静态站点，demo 可以对用户/爬虫展示 分钟级最新数据

不同于 SSR 站点，demo 全站托管在 CDN 上（即 Github Pages），No Servers

Demo 中用到的核心有两个：构建时渲染、内容更新触发

构建时渲染

顾名思义，在构建时，调用 API 执行渲染，生成最新的页面 HTML，这里使用 Next.js 的 getStaticProps 做数据预获取（Data Fetching）处理：


// pages/index.tsx

// 只在服务端执行
export const getStaticProps = async () => {
  const res = await fetch(
    'https://api.github.com/repos/reactNoder/jamstack/issues?state=open',
  );
  const data = await res.json();

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      data, // will be passed to the page component as props}
    },
    revalidate: 1,
  };
};

当然，也是支持动态路由（如 /:id）生成的，借助 getStaticPaths，从 API 接口中返回所有的详情页 id


export async function getStaticPaths() {
  const fromServer = await fetch('https://api.foo/list');
  return {
    paths: [
        { params: { id: '1' } },
        { params: { id: '2' } },
        ...fromServer
    ],
  };
}

内容更新触发

简单来讲，就是内容更新后，触发站点执行构建并发布到 CDN 上，这里借助 Github Action 的 issue trigger，一旦 issue 变更，则执行对应操作，代码如下：


# .github/workflows/deploy.yml
name: Deploy

on:
  # 监听主干代码变更（样式/逻辑修改）
  push:
    branches: [ master, main ]
  # issue 创建/修改/删除 变更
  issues:
    types: [opened, edited, deleted]

jobs:
  autoDeploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: '1'
      - uses: actions/cache@v2
        id: cache
        with:
          path: |
            node_modules
            */*/node_modules
          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
      - name: install
        if: steps.cache.outputs.cache-hit != 'true'
        run: yarn install --ignore-engines
      # 执行构建
      - name: build
        run: |
          yarn build
          yarn export
      # 产物上传到 Github Pages
      - name: deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out

站点的更新流程如动图所示