從 Next.js 看企業級框架的 SSR 支持詳情 - javascript,ssr,前端框架,服務端渲染前端向後博客

一.Next.js 簡介

The React Framework for Production

面向生產使用的 React 框架（廢話）。提供了好些開箱即用的特性，支持靜態渲染/服務端渲染混用、支持 TypeScript、支持打包優化、支持按路由預加載等等：

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

其中，完善的靜態渲染/服務端渲染支持讓 Next.js 在 React 生態中獨樹一幟

二.核心特性

如果説 Next.js 只做了一件事，那就是預渲染（Pre-rendering）：

By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript.

具體的，預渲染分為兩種方式：

SSG（Static Site Generation）：也叫 Static Generation，在編譯時生成靜態 HTML
SSR（Server-Side Rendering）：也叫 Server Rendering，用户請求到來時動態生成 HTML

與 SSR 相比，Next.js 更推崇的是 SSG，因為其性能優勢更大（靜態內容可託管至 CDN，性能提升立竿見影）。因此建議優先考慮 SSG，只在 SSG 無法滿足的情況下（比如一些無法在編譯時靜態生成的個性化內容）才考慮 SSR、CSR

P.S.CSR、SSR 等更多渲染模式，見前端渲染模式的探索

圍繞核心的預渲染功能，延伸出了一系列相關支持，如：

路由（文件規範、API）：多頁面的基礎
頁面級預渲染、代碼拆分：順理成章
增量靜態生成：針對大量頁面的編譯時預渲染（即靜態生成）策略
按路由預加載：錦上添花
國際化（結合路由）：錦上添花
集成 Serverless 函數：錦上添花
自動 polyfill、自定義head標籤：友情贈送

此外，還提供了一些通用場景支持：

開箱即用（0 配置）
TypeScript
CSS module、Sass
Fast Refresh（可靠的 Hot Reload 支持）
用户真實數據收集分析（頁面加載性能、體驗評分等）
帶默認優化的Image組件

三.路由支持

Next.js 提供了兩種路由支持，靜態路由與動態路由

靜態路由

靜態路由通過文件規範來約定，pages目錄下的js文件都認為是路由（每個靜態路由對應一個頁面文件），例如：

pages/index.js → /
pages/blog/index.js → /blog
pages/blog/first-post.js → /blog/first-post
pages/dashboard/settings/username.js → /dashboard/settings/username

動態路由

類似的，動態路由也要在pages目錄下創建文件，只是文件名有些不同尋常：

pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
pages/[username]/settings.js → /:username/settings (/foo/settings)
pages/post/[...all].js → /post/* (/post/2020/id/title)

路徑中變化的參數通過getStaticPaths來填充：

// pages/posts/[id].js
export async function getStaticPaths() {
  return {
    // 必須叫paths，值必須是數組
    paths: [{
      // 每一項必須是這個形式
      params: {
        // 必須含有id
        id: 'ssg-ssr'
      }
    },{
      params: {
        id: 'pre-rendering'
      }
    }],
    fallback: false
  }
}

進一步傳遞給getStaticProps按參數獲取數據，並渲染頁面：

// pages/posts/[id].js
export async function getStaticProps({ params }) {
  // 根據路由參數獲取相應數據
  const postData = await getPostData(params.id)
  return {
    props: {
      postData
    }
  }
}

// 渲染頁面
export default function Post({ postData }) {
  return (
    <Layout>
      <Head>
        <title>{postData.title}</title>
      </Head>
      <article>
        <h1 className={utilStyles.headingXl}>{postData.title}</h1>
        <div className={utilStyles.lightText}>
          <Date dateString={postData.date} />
        </div>
        <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
      </article>
    </Layout>
  )
}

可以理解為先創建一個工廠 page（例如pages/[路由參數1]/[路由參數2].js），接着getStaticPaths填充路由參數，getStaticProps({ params })根據參數請求不同數據，最後數據進入頁面組件開始預渲染：

四.SSG 支持

最簡單，同時性能也最優的預渲染方式就是靜態生成（SSG），把組件渲染工作完全前移到編譯時：

（編譯時）獲取數據
（編譯時）渲染組件，生成 HTML

將生成的 HTML 靜態資源託管到 Web 服務器或 CDN 即可，兼具 React 工程優勢與 Web 極致性能

那麼首先要解決如何獲取數據的問題，Next.js 的做法是將頁面依賴的數據集中管理起來：

// pages/index.js
export default function Home(props) { ... }

// 獲取靜態數據
export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

其中，getStaticProps只在服務端執行（根本不會進入客户端 bundle），返回的靜態數據會傳遞給頁面組件（上例中的Home）。也就是説，要求通過getStaticProps提前備好頁面所依賴的全部數據，數據 ready 之後組件才開始渲染，並生成 HTML

P.S.注意，只有頁面能通過getStaticProps聲明其數據依賴，普通組件不允許，所以要求將整頁依賴的所有數據都組織到一處

至於渲染生成 HTML 的部分，藉助React 提供的 SSR API即可完成

至此，只要是依賴數據有辦法提前獲取到的頁面，理論上都可以編譯生成靜態 HTML，但 2 個問題也隨之而來：

數據可能會發生變化，已經生成的靜態頁面需要更新
數據量可能會多到“永遠”編譯不完

以電商頁面為例，要把海量商品數據全都編譯成靜態頁面，幾乎是不可能的（或許要編譯一個世紀那麼長），即便都生成了，商品信息也會時不時地更新，靜態頁面需要重新生成：

If your app has a very large number of static pages that depend on data (think: a very large e-commerce site). You want to pre-render all product pages, but then your builds would take forever.

因此，增量靜態再生成（Incremental Static Regeneration）應運而生

ISR 支持

對於編譯時無法窮舉的海量頁面以及需要更新的場景，Next.js 允許運行時再生成（相當於運行時靜態化）：

Incremental Static Regeneration allows you to update existing pages by re-rendering them in the background as traffic comes in.

例如：

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // 設置有效期，開啓ISR
    revalidate: 1, // In seconds
  }
}

revalidate: 1表示運行時（用户請求打過來時）嘗試重新生成靜態 HTML，1秒最多重新生成一次

運行時靜態生成需要一些時間（用户請求等着要 HTML），在此過程中有 3 種選擇：

fallback: false：不降級，命中尚未生成靜態頁面的路由直接 404
fallback: true：降級，命中尚未生成靜態頁面的路由先返回降級頁面（此時props為空，一般顯示個 loading），靜態生成 HTML 的同時會生成一份 JSON 供降級頁面 CSR 使用，完成之後瀏覽器拿到數據（在客户端填上props），渲染出完整頁面
fallback: 'blocking'：不降級，並且要求用户請求一直等到新頁面靜態生成結束（實際上就是 SSR，渲染過程是阻塞的，只是完成之後會保留結果 HTML）

即結合路由（getStaticPaths）對尚未生成的頁面進行降級，例如：

// pages/index.js
import { useRouter } from 'next/router'

function Post({ post }) {
  const router = useRouter()

  // 渲染降級頁面
  if (router.isFallback) {
    return <div>Loading...</div>
  }

  // Render post...
}

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    // （頁面級）降級策略，true表示遇到尚未生成的先給個降級頁，生成完畢後客户端自動更新過來
    fallback: true,
  }
}

P.S.具體見Incremental Static Regeneration、以及The fallback key

然而，並非所有場景都能愉快地在編譯時靜態生成。典型的，如果組件依賴的數據是動態的，顯然無法在編譯時預先取得數據，靜態生成就無從談起了

五.SSR 支持

對於編譯時無法生成靜態頁面的場景，就不得不考慮 SSR 了：

區別於 SSG getStaticProps，Next.js 提供了 SSR 專用的getServerSideProps(context)：

// pages/index.js
export async function getServerSideProps(context) {
  const res = await fetch(`https://...`)
  const data = await res.json()

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

  return {
    props: {}, // will be passed to the page component as props
  }
}

同樣用來獲取數據，與getStaticProps最大的區別在於每個請求過來時都執行，所以能夠拿到請求上下文參數（context）

P.S.更多詳細信息，見getServerSideProps (Server-side Rendering)

六.總結

圍繞預渲染如何獲取數據的問題，Next.js 探索出了別緻的路由支持和精巧的 SSG、SSR 支持。不僅如此，Next.js 還提供了魚和熊掌可以兼得的混用支持，不同渲染模式結合起來到底有多厲害，且看下篇分解

參考資料

Pages
Data Fetching
Create a Next.js App：教程有點意思
vercel/next-learn-starter：示例 Demo

有所得、有所惑，真好

關注「前端向後」微信公眾號，你將收穫一系列「用心原創」的高質量技術文章，主題包括但不限於前端、Node.js以及服務端技術

本文首發於 ayqy.net ，原文鏈接 http://www.ayqy.net/blog/next...

前端向後博客

前端向後博客

博客 / 詳情