[Next.js14] CSR、SSR、SSG、ISR的区别及实现方法

在使用Next.js时，可以从 CSR、SSR、SSG 和 ISR 中选择渲染方法。在本文中，我们将介绍每种方法的特点并介绍如何实现它们。

CSR（客户端渲染）

为了响应来自客户端的请求，服务器返回空的 HTML 和 JavaScript。

该JavaScript在浏览器上执行以呈现实际显示的HTMl。

优点

与服务器的通信仅限于初始转换。
快速页面转换

缺点

由于首次加载时会检索所有数据，因此页面显示需要很长时间（应用程序越大，所需时间越长）。
由于 JavaScript 在浏览器中执行，因此显示页面所需的时间（JavaScript 执行时间）取决于所使用的机器规格，因此不可能为所有用户提供稳定的速度。
由于从服务器返回的HTML本身是空的，网页内容无法被网络爬虫识别，这对于SEO来说是不利的。

条件

“use client”关键字写在文件的开头。

实例

"use client";

import React, { useEffect, useState } from "react";

type Product = {
  id: string;
  title: string;
};

const CsrPage = () => {
  const [products, setProducts] = useState<Product[]>([]);

  const fetchData = async () => {
    const res = await fetch("https://dummyjson.com/products");
    const data = await res.json();

    setProducts(data.products);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <>
      <h3>Built with CSR</h3>
      <br />
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.id}: {product.title}
          </li>
        ))}
      </ul>
    </>
  );
};

export default CsrPage;

SSR（服务器端渲染）

当接收到来自客户端的请求时，服务器在服务器端执行 JavaScript 以生成（呈现）要显示的 HTML。然后生成的 HTML 返回给客户端，客户端在其浏览器中按原样显示该 HTML。

与 CSR 的主要区别在于浏览器端的工作量。在CSR中，客户端的工作是“运行JavaScript并生成要显示的HTML”，但在SSR中，生成HTML的工作在服务器端，因此浏览器只显示返回的HTML。

优点

由于服务器端只生成必要的页面，浏览器只显示它们，因此页面显示的速度很快。
由于不需要在浏览器中运行 JavaScript，因此所使用的机器规格不依赖于所使用的机器规格。这使我们能够为所有用户提供稳定的显示速度。
由于呈现的 HTML 是从服务器传递的，因此与 CSR 相比，它对 SEO 有利。
页面始终可以根据最新数据生成

缺点

每次页面更改时都会与服务器进行通信

条件

将fetch()的第二个参数设置为{ cache: “no-store” }
没有使用useEffect、useState、onClick等依赖于浏览器的功能

实例

import React from "react";

type Product = {
  id: string;
  title: string;
};

const SsrPage = async () => {
  const res = await fetch("https://dummyjson.com/products", {
    cache: "no-store",
  });
  const data = await res.json();

  return (
    <>
      <h3>Built with SSR</h3>
      <br />
      <ul>
        {data.products.map((product: Product) => (
          <li key={product.id}>
            {product.id}: {product.title}
          </li>
        ))}
      </ul>
    </>
  );
};

export default SsrPage;

SSG（静态站点生成）

在应用程序构建时生成页面并作为静态页面储存在服务器中。当有请求时，服务器返回该静态文件。

由于可以省去执行JavaScript并进行渲染的过程，所以服务器端的工作只是返回被请求的页面，而客户端的工作只是显示该页面。

优点

页面加载速度快

缺点

如果有更新，则需要再次手动构建

条件

在fetch()的第二个参数中，我们设置了{ cache: “force-cache” }（因为这是默认选项，所以可以省略）。
未使用useEffect、useState、onClick等依赖于浏览器的功能。

实例

import React from "react";

type Product = {
  id: string;
  title: string;
};

const SsgPage = async () => {
  const res = await fetch("https://dummyjson.com/products");
  const data = await res.json();

  return (
    <>
      <h3>Built with SSG</h3>
      <br />
      <ul>
        {data.products.map((product: Product) => (
          <li key={product.id}>
            {product.id}: {product.title}
          </li>
        ))}
      </ul>
    </>
  );
};

export default SsgPage;

补充

如下所示，即使一开始没有获取数据（fetch没有使用任何函数），也会默认识别为SSG。

import React from "react";

const SsgPage = async () => {
  return (
    <>
      <h3>Built with SSG</h3>
    </>
  );
};

export default SsgPage;

ISR（增量静态再生）

这是一种结合了SSR和SSG的渲染方法。

应用程序构建时会生成页面，作为静态页面存储在服务器上，发出请求时返回静态文件。

到目前为止，行为与 SSG 类似，但 ISR 允许你在一段时间后再次运行构建。

它是为了解决 SSG 的弱点而创建的，SSG 偶尔更新时需要手动重建。

优点

显示速度快
自动重建允许更新反映在屏幕上，即使偶尔有更新也是如此。

缺点

根据构建的时间，可能无法反映屏幕的最新状态。

条件

在fetch()的第二个参数中，设置了{ next: { revalidate: 10 } }
未使用useEffect、useState、onClick等依赖于浏览器的功能。

实例

import React from "react";

type Product = {
  id: string;
  title: string;
};

const IsrPage = async () => {
  const res = await fetch("https://dummyjson.com/products", {
    next: {
      revalidate: 30,
    },
  });
  const data = await res.json();

  return (
    <>
      <h3>Built with ISR</h3>
      <br />
      <ul>
        {data.products.map((product: Product) => (
          <li key={product.id}>
            {product.id}: {product.title}
          </li>
        ))}
      </ul>
    </>
  );
};

export default IsrPage;

构建

我们可以通过构建来检查 SSR、SSG 和 ISR 的行为，使用以下命令执行构建：

npm run build

构建成功完成后，将显示如下消息。

将显示每个页面 URL 以及用于构建该页面的呈现方法。

页面左侧带有“ ”的项目○是使用 CSR、SSG 和 ISR 构建的。

那些带有“ λ”的是用SSR构建的。

Route (app)                              Size     First Load JS
┌ ○ /                                    5.29 kB        89.5 kB
├ ○ /_not-found                          885 B          85.1 kB
├ ○ /csr                                 439 B          84.6 kB
├ ○ /isr                                 144 B          84.3 kB
├ ○ /ssg                                 144 B          84.3 kB
└ λ /ssr                                 144 B          84.3 kB
+ First Load JS shared by all            84.2 kB
  ├ chunks/69-593824af3050bb4a.js        28.9 kB
  ├ chunks/fd9d1056-c50cb70e7323352b.js  53.4 kB
  └ other shared chunks (total)          1.9 kB

○  (Static)   prerendered as static content
λ  (Dynamic)  server-rendered on demand using Node.js

在构建时，Next.js检查每个页面数据的获取位置/获取函数的使用位置。

不使用不执行数据提取的函数的页面fetch会生成作为 SSG 的页面。

执行数据获取（fetch使用函数）的页面fetch检查执行函数时指定的选项，并按如下方式构建每个选项。