什么是 ‘Pre-rendering’ vs ‘Static Generation’？探讨 Next.js 在 React 核心 API 上的二开逻辑 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位开发者，大家好！

今天，我们将深入探讨现代前端开发中至关重要的渲染策略：’Pre-rendering’，并在此基础上，详细剖析其中的两个主要实现方式——’Static Generation’ (SSG) 和 ‘Server-Side Rendering’ (SSR)。更重要的是，我们将以 Next.js 框架为例，揭示它是如何在 React 核心 API 的基础上，进行了一系列开创性的“二开”与封装，从而极大地提升了开发效率、应用性能和用户体验。

React，作为构建用户界面的强大库，其核心职责在于高效地管理组件状态并在浏览器中进行DOM操作。然而，纯粹的客户端渲染（Client-Side Rendering, CSR）模式，在应对搜索引擎优化（SEO）、首次内容绘制（FCP）和核心Web指标（Core Web Vitals）等挑战时，往往显得力不从心。Next.js 正是为解决这些问题而生，它将 React 从一个单纯的UI库，升华为一个功能全面的全栈框架。

第一章：Web 渲染策略的演进与 Pre-rendering 的崛起

在深入 Next.js 之前，我们首先需要理解 Web 渲染策略的演进。

1.1 客户端渲染 (Client-Side Rendering, CSR)

传统的单页应用（SPA）通常采用 CSR 模式。在这种模式下，服务器只发送一个空的 HTML 骨架文件和一个 JavaScript 包到浏览器。浏览器接收到这些文件后，执行 JavaScript 代码，然后根据数据动态地构建 DOM 并渲染页面。

优点：

富交互体验： 页面切换无需重新加载，用户体验流畅。
开发体验： 前后端分离，前端专注于UI和用户逻辑。

缺点：

SEO 挑战： 搜索引擎爬虫在执行 JavaScript 方面能力有限，可能无法抓取到完整的页面内容。
首次加载性能： 用户需要等待 JavaScript 加载、解析、执行，以及数据获取完成后才能看到实际内容，导致白屏时间较长。
核心 Web 指标不佳： LCP (Largest Contentful Paint) 和 FCP (First Contentful Paint) 通常表现不理想。

为了克服 CSR 的这些局限性，"Pre-rendering" 的概念应运而生。

1.2 Pre-rendering (预渲染)

Pre-rendering 的核心思想是在浏览器接收到页面请求之前，提前在服务器端或构建时生成完整的 HTML 内容。当浏览器接收到这些预渲染的 HTML 时，它可以立即显示给用户，而无需等待 JavaScript 的执行。这极大地改善了首次加载性能和 SEO。

Pre-rendering 主要分为两种策略：

Static Generation (SSG)：静态生成，在构建时生成 HTML。
Server-Side Rendering (SSR)：服务器端渲染，在每次请求时生成 HTML。

这两种策略并非互斥，而是可以根据页面内容的动态性、更新频率和对数据新鲜度的要求进行选择或混合使用。Next.js 便是将这两种策略以及 CSR 完美整合的典范。

第二章：Static Generation (SSG) 静态生成

Static Generation 是一种将页面 HTML 在构建时 (build time) 生成的策略。一旦生成，这些静态 HTML 文件就可以部署到任何内容分发网络 (CDN) 上。当用户请求页面时，CDN 直接返回预先生成的 HTML，无需服务器进行任何处理。

2.1 SSG 的工作原理

在项目构建阶段，Next.js 会遍历所有需要静态生成的页面，为每个页面执行数据获取逻辑（如果存在），然后将 React 组件渲染成 HTML 字符串。这些 HTML 文件连同其对应的 JavaScript、CSS 等静态资源一起被打包，等待部署。

优点：

极致的性能： HTML 文件直接从 CDN 提供，响应速度极快，TTFB (Time To First Byte) 几乎为零。
高可靠性： 无需运行后端服务器，降低了服务器故障的风险。
低成本： 静态文件托管成本低廉。
优秀的 SEO： 搜索引擎可以直接抓取到完整的 HTML 内容。
安全性： 由于没有服务器端逻辑运行，攻击面大大减少。

缺点：

数据新鲜度： 如果数据频繁更新，页面内容会变得陈旧，除非重新部署。
构建时间： 对于包含大量页面的大型网站，构建时间可能会很长。

2.2 Next.js 中的 SSG 实现：`getStaticProps` 和 `getStaticPaths`

Next.js 在 React 组件的基础上，通过引入特殊的异步函数，实现了 SSG 功能。这些函数在构建时执行，负责为页面组件提供数据。

2.2.1 `getStaticProps`：为静态页面获取数据

getStaticProps 是一个异步函数，它在构建时运行在服务器端（或构建环境），用于获取页面所需的数据，并将其作为 props 传递给 React 组件。

文件约定： 必须在页面组件文件 (例如 pages/posts/index.js 或 pages/about.js) 中导出。

基本结构：

// pages/posts/[id].js 或 pages/blog.js

import React from 'react';

function Blog({ posts, title }) {
  return (
    <div>
      <h1>{title}</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

// 这个函数在构建时运行，而不是在客户端或每次请求时运行。
export async function getStaticProps(context) {
  // 模拟数据获取
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  // 返回的 props 将在构建时传递给 Blog 组件
  return {
    props: {
      posts,
      title: "My Blog Posts",
    },
    // revalidate 属性是 ISR（Incremental Static Regeneration）的关键
    // 稍后会详细介绍
    // revalidate: 60, // 每 60 秒尝试重新生成一次页面
  };
}

export default Blog;

getStaticProps 的关键点：

只在服务器端运行： 永远不会在浏览器端运行。这意味着你可以在其中安全地编写服务器端代码，例如直接访问数据库、读取文件系统等，而无需担心敏感信息泄露。
构建时执行： 在 next build 命令运行时执行，为每个页面生成静态 HTML。
返回 props： 必须返回一个对象，其中包含一个 props 键，其值是一个对象，该对象将被传递给页面组件。
返回 notFound： 可以返回 { notFound: true } 来生成 404 页面。
返回 redirect： 可以返回 { redirect: { destination: '/new-path', permanent: false } } 进行重定向。
不能用于客户端数据获取： 如果页面需要客户端动态数据，可以在组件内部使用 useEffect 或 SWR 等库进行客户端数据获取。

2.2.2 `getStaticPaths`：为动态路由生成静态页面

对于动态路由（例如 pages/posts/[id].js），Next.js 需要知道在构建时应该生成哪些 id 对应的页面。getStaticPaths 函数就是用来解决这个问题的。它会返回一个 paths 数组，其中包含所有需要预渲染的动态路由参数。

文件约定： 必须在动态路由页面文件 (例如 pages/posts/[id].js) 中导出，并且通常与 getStaticProps 一起使用。

基本结构：

// pages/posts/[id].js

import React from 'react';

function Post({ post }) {
  if (!post) return <div>Loading...</div>; // 应对 fallback 状态
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

// 这个函数在构建时运行，用于确定哪些动态路由路径应该被预渲染。
export async function getStaticPaths() {
  // 模拟获取所有文章 ID
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  // 映射成 { params: { id: '...' } } 格式的路径数组
  const paths = posts.map((post) => ({
    params: { id: post.id.toString() }, // 确保 id 是字符串
  }));

  return {
    paths,
    // fallback 选项控制当请求的路径不在 paths 数组中时的行为
    // 'blocking', true, false
    fallback: 'blocking', // 稍后详细解释
  };
}

// 结合 getStaticProps 为每个 path 获取数据
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

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

  return {
    props: {
      post,
    },
    revalidate: 60, // 同样可以用于 ISR
  };
}

export default Post;

getStaticPaths 的关键点：

只在服务器端运行： 同样只在构建时运行。
返回 paths： 必须返回一个对象，其中包含一个 paths 键，其值是一个数组，数组中的每个元素都是一个对象 { params: { [paramName]: string } }，用于指定动态路由的参数值。
fallback 选项：
- fallback: false (默认): 如果请求的路径不在 paths 中，则返回 404 页面。适用于所有路径都已知且数量有限的情况。
- fallback: true: 如果请求的路径不在 paths 中，Next.js 会立即返回一个“加载中”的页面（带 props.fallback 或 router.isFallback 标志），同时在后台生成该页面的 HTML。一旦生成完成，浏览器会接收到完整的页面数据并进行渲染。这对于有大量动态页面，且不希望在构建时全部生成的情况非常有用。
- fallback: 'blocking': 类似于 fallback: true，但 Next.js 会阻塞请求，直到页面在服务器上生成完成。用户不会看到“加载中”状态，而是直接看到完整的页面。这在 SEO 方面更有利。

2.3 增量静态再生 (Incremental Static Regeneration, ISR)

ISR 是 Next.js 引入的一项创新功能，它弥补了 SSG 在数据新鲜度方面的不足，同时又保留了 SSG 的性能优势。通过在 getStaticProps 中添加 revalidate 属性，你可以告诉 Next.js 在部署之后，以设定的时间间隔（例如 60 秒）重新生成页面。

工作原理：

用户首次访问页面时，Next.js 返回构建时生成的旧版静态页面。
在后台，Next.js 会检查距离上次页面生成的时间是否超过 revalidate 指定的秒数。
如果超过，Next.js 会在下一次请求时（或在后台异步地）重新执行 getStaticProps，生成新的页面 HTML。
新的页面生成后，会替换旧的静态文件。后续请求将直接返回新的页面。
在页面重新生成期间，用户仍然会看到旧版本的页面，直到新页面生成并替换。

示例：

// pages/products/[slug].js

import React from 'react';

function Product({ product }) {
  if (!product) return <div>Loading product...</div>;
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
      <p>Last updated: {new Date(product.lastUpdated).toLocaleString()}</p>
    </div>
  );
}

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();
  const paths = products.map((p) => ({ params: { slug: p.slug } }));
  return { paths, fallback: 'blocking' };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/products/${params.slug}`);
  const product = await res.json();

  if (!product) {
    return { notFound: true };
  }

  return {
    props: { product },
    // 每 10 秒重新验证一次页面
    revalidate: 10, // 单位是秒
  };
}

export default Product;

在这个例子中，产品页面在构建时生成。之后，每当用户请求该页面时，Next.js 会检查距离上次生成是否已超过 10 秒。如果超过，它会在后台触发一次重新生成，同时仍向用户提供旧页面。一旦新页面生成完成，后续请求将获得更新后的页面。这为动态内容提供了近乎实时的更新，同时保留了静态页面的性能优势。

第三章：Server-Side Rendering (SSR) 服务器端渲染

Server-Side Rendering 是一种在每次请求时在服务器端生成 HTML 的策略。当用户请求一个页面时，服务器会动态地获取数据，将 React 组件渲染成 HTML 字符串，然后将完整的 HTML 响应发送给浏览器。

3.1 SSR 的工作原理

当用户访问一个 SSR 页面时，浏览器向服务器发送请求。服务器接收到请求后，会执行该页面的数据获取逻辑，然后将 React 组件渲染成 HTML。这个 HTML 包含了所有的数据和页面结构。服务器将这个完整的 HTML 响应发送给浏览器。浏览器接收到 HTML 后，可以立即显示页面内容。随后，客户端的 JavaScript 代码会被加载并“激活”页面，使其具备交互能力，这个过程称为“hydration”（水合）。

优点：

数据新鲜度： 每次请求都会获取最新数据，保证页面内容的实时性。
优秀的 SEO： 搜索引擎爬虫可以获取到完整的页面内容。
更好的首次加载性能： 用户无需等待 JavaScript 执行即可看到内容。
个性化内容： 适合显示用户专属数据或实时变化的数据。

缺点：

服务器负载： 每次请求都需要服务器处理，服务器资源消耗较高，尤其是在高并发场景下。
TTFB 较高： 相比 SSG，服务器需要时间来获取数据和渲染 HTML，导致首次字节时间更长。
需要运行服务器： 部署和维护成本高于纯静态网站。

3.2 Next.js 中的 SSR 实现：`getServerSideProps`

getServerSideProps 是一个异步函数，它在每次请求时运行在服务器端，用于获取页面所需的数据，并将其作为 props 传递给 React 组件。

文件约定： 必须在页面组件文件 (例如 pages/dashboard.js 或 pages/search.js) 中导出。

基本结构：

// pages/dashboard.js

import React from 'react';

function Dashboard({ userData, latestNews }) {
  return (
    <div>
      <h1>Welcome, {userData.name}!</h1>
      <p>Your email: {userData.email}</p>
      <h2>Latest News</h2>
      <ul>
        {latestNews.map((news) => (
          <li key={news.id}>{news.title}</li>
        ))}
      </ul>
    </div>
  );
}

// 这个函数在每次请求时运行在服务器端。
export async function getServerSideProps(context) {
  // context 参数包含 request, response, params, query 等信息

  // 模拟用户数据获取 (可能需要从 cookie 或 session 中获取认证信息)
  const userRes = await fetch('https://api.example.com/me', {
    headers: {
      Authorization: `Bearer ${context.req.cookies.token}`, // 示例：从请求头获取 token
    },
  });
  const userData = await userRes.json();

  // 模拟实时新闻数据获取
  const newsRes = await fetch('https://api.example.com/latest-news');
  const latestNews = await newsRes.json();

  if (!userData || userRes.status === 401) {
    // 如果用户未认证，重定向到登录页
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  return {
    props: {
      userData,
      latestNews,
    },
  };
}

export default Dashboard;

getServerSideProps 的关键点：

只在服务器端运行： 永远不会在浏览器端运行。
每次请求时执行： 每次用户请求该页面时都会运行。
返回 props： 必须返回一个对象，其中包含一个 props 键，其值是一个对象，该对象将被传递给页面组件。
context 参数： 包含 req (Node.js request object)、res (Node.js response object)、query (URL 查询参数)、params (动态路由参数) 等。这使得你可以在服务器端访问请求相关的信息，例如 HTTP 头、Cookie、URL 参数等。
返回 notFound 或 redirect： 与 getStaticProps 类似，可以用于生成 404 页面或进行重定向。

第四章：Next.js 在 React 核心 API 上的“二开”逻辑

现在，我们来到了本次讲座的核心部分：Next.js 是如何超越 React 核心 API 的范畴，通过一系列巧妙的“二开”和封装，构建出一个强大的全栈框架的。

React 核心 API 的本质：
React 本身是一个用于构建用户界面的 JavaScript 库。它的核心职责包括：

组件化： 通过函数组件或类组件封装 UI 逻辑。
JSX： 一种语法糖，用于描述 UI 结构。
虚拟 DOM： 高效地更新实际 DOM。
Hooks： useState, useEffect, useContext 等，用于在函数组件中添加状态和生命周期功能。
ReactDOM： 负责将 React 组件渲染到 DOM (浏览器环境) 或字符串 (服务器环境，ReactDOMServer.renderToString)。
调度器： 协调更新优先级。

请注意，React 核心 API 本身不包含以下功能：

数据获取策略： 如何在组件渲染前获取数据？React 自身没有规定。
路由系统： 如何根据 URL 切换页面？React 自身没有内置。
构建系统： 如何将 JSX 编译成浏览器可执行的 JavaScript？React 自身没有内置。
服务器端执行环境： 如何在 Node.js 环境中运行 React 组件并生成 HTML？ReactDOMServer 提供了这个能力，但如何与 Web 服务器集成，如何处理请求和响应，则不在其职责范围内。
文件系统约定： 如何组织文件来映射到 URL 路径？React 自身没有。
性能优化组件： 图片优化、脚本加载策略等。

Next.js 正是在这些方面进行了深入的“二开”和扩展。

4.1 构建系统与环境抽象

Next.js 在底层集成了 Webpack 和 Babel，提供了一套开箱即用的构建配置。它不仅编译客户端 JavaScript，还编译服务器端 JavaScript（用于 getStaticProps, getServerSideProps 和 API Routes）。

React 核心： 只是一个库，需要开发者自行配置 Webpack/Babel。
Next.js 的“二开”：
- 统一构建流程： 开发者无需关心客户端和服务器端代码的打包差异。
- 代码拆分 (Code Splitting)： 自动按页面进行代码拆分，只加载当前页面所需的 JavaScript，优化首次加载。
- Fast Refresh： 实时刷新功能，极大地提升开发体验。
- TypeScript 支持： 内置对 TypeScript 的支持。

4.2 路由系统：文件系统即路由

这是 Next.js 最直观的“二开”之一。

React 核心： 没有任何内置路由系统，需要 react-router-dom 等第三方库。
Next.js 的“二开”：
- 文件系统路由： 约定优于配置。pages 目录下的每个 .js, .jsx, .ts, .tsx 文件都会自动成为一个路由。
  - pages/index.js -> /
  - pages/about.js -> /about
  - pages/posts/[id].js -> /posts/:id (动态路由)
  - pages/api/hello.js -> /api/hello (API 路由)
- next/link 组件： 优化了客户端路由导航。
  - 预加载 (Prefetching)： 当用户视口中的 <Link> 组件可见时，Next.js 会在后台自动预加载目标页面的 JavaScript，从而实现即时页面切换。这是对 React <a> 标签的重大增强。
```
// 使用 next/link
import Link from 'next/link';

function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/posts/1">First Post</Link>
    </nav>
  );
}
```
- next/router 钩子： 提供了 useRouter 钩子来访问路由状态和进行编程式导航，类似于 React Router 的 useNavigate 或 useLocation，但与 Next.js 的文件系统路由深度集成。

4.3 数据获取层：超越 React 组件生命周期

这是 Next.js 对 React 核心功能进行的最关键、最有影响力的“二开”。React 组件在其生命周期内（或通过 Hooks），可以在客户端获取数据。但 Next.js 将数据获取提升到了组件渲染之前，甚至构建时。

React 核心： 组件内部通过 useEffect (或类组件的 componentDidMount) 发送 API 请求获取数据。数据获取发生在客户端，页面初始渲染是空的或加载状态。

// 纯 React 组件的客户端数据获取
import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  return <div>{data.message}</div>;
}

Next.js 的“二开”：getStaticProps 和 getServerSideProps
- 这些特殊的异步函数在服务器端运行，并且在 React 组件渲染之前执行。它们的结果（props）被序列化并传递给 React 组件。
- 这种设计使得页面在首次加载时就能拥有完整的数据，从而实现预渲染。
- getStaticProps 和 getServerSideProps 提供了声明式的数据获取方式，将数据获取逻辑与 UI 渲染逻辑分离，但又紧密耦合在同一文件内，提高了可维护性。
- 它们利用了 Node.js 环境的优势，可以直接访问文件系统、数据库等，而这些是浏览器环境中的 React 组件无法直接做到的。
- Hydration（水合）： Next.js 发送预渲染的 HTML 到客户端。当客户端的 JavaScript 加载完成并执行时，React 会“接管”这些 HTML，将其与组件的虚拟 DOM 进行比对，然后将事件监听器和组件状态附加到预渲染的 DOM 上。这个过程是无缝的，用户不会察觉到页面从静态 HTML 变为交互式应用的转换。这是 Next.js 将服务器端渲染的 HTML 转化为可交互的 React 应用的关键机制。

4.4 性能优化组件与 API

Next.js 提供了一系列内置的组件和 API，进一步优化了应用程序的性能和开发体验，这些都不是 React 核心 API 的一部分。

next/image： 这是一个高度优化的 <img /> 标签替代品。
- 自动图片优化： 根据设备视口大小，自动调整图片尺寸。
- 格式优化： 自动转换为 WebP 等更高效的图片格式。
- 懒加载： 视口外的图片不会加载，直到它们进入视口。
- 布局移位预防 (CLS)： 避免图片加载导致的页面布局跳动。
- 优先级： 可以标记关键图片为 priority，优先加载。
```
import Image from 'next/image';
import profilePic from '../public/profile.jpg'; // 本地图片导入

function MyProfile() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      width={500} // 原始宽度
      height={500} // 原始高度
      // layout="responsive" // 响应式布局
      // objectFit="cover" // 裁剪方式
      priority // 优先加载
    />
  );
}
```
next/script： 优化了第三方脚本的加载策略。
- strategy="beforeInteractive"： 在页面交互前加载，例如 GTM。
- strategy="afterInteractive" (默认)： 在页面交互后加载，例如分析脚本。
- strategy="lazyOnload"： 在页面空闲时加载，例如聊天插件。
- strategy="worker"： 在 Web Worker 中加载，不阻塞主线程。
```
import Script from 'next/script';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script src="https://third-party-script.com/script.js" strategy="lazyOnload" />
      <Component {...pageProps} />
    </>
  );
}
```
API Routes： Next.js 允许你在 pages/api 目录下创建 Node.js API 端点。
- 这使得在一个 Next.js 项目中，你既可以编写前端代码，又可以编写无服务器（serverless）的后端逻辑，实现真正的全栈开发。
- API Routes 的执行环境就是 Node.js 服务器，与 getStaticProps 和 getServerSideProps 的执行环境相同。
```
// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe', method: req.method });
}
```

4.5 运行时环境与服务器能力

React 核心： 主要是浏览器端运行，或通过 ReactDOMServer 在 Node.js 环境中进行静态字符串输出。
Next.js 的“二开”：
- 内置开发服务器： 提供 HMR (Hot Module Replacement) 和 Fast Refresh。
- 生产环境服务器： 可以作为 Node.js 应用运行，处理 SSR 请求、API Routes，以及静态文件的服务。
- Serverless 部署： Next.js 架构天然支持部署到 Vercel、AWS Lambda 等 Serverless 平台，每个页面或 API Route 都可以作为一个独立的无服务器函数。

4.6 表格总结：Next.js 对 React 核心的扩展

功能点	React 核心 API	Next.js 的“二开”与扩展
渲染方式	客户端渲染 (CSR)	SSG (构建时)、SSR (请求时)、ISR (增量静态再生)、CSR (可选)
数据获取	`useEffect` (客户端)	`getStaticProps` (构建时), `getServerSideProps` (请求时)
路由	无内置，需第三方库 (如 React Router)	文件系统路由 (`pages` 目录), `next/link` 预加载, `next/router` API
构建系统	需手动配置 Webpack/Babel	内置 Webpack/Babel, 自动代码拆分, Fast Refresh, TypeScript 支持
服务器能力	`ReactDOMServer` (仅渲染字符串)	内置开发/生产服务器, 处理请求/响应, API Routes, Serverless 部署
性能组件	仅基础 HTML 元素	`next/image` (图片优化), `next/script` (脚本加载策略)
环境上下文	浏览器 `window`, `document`	服务器 `req`, `res`, 文件系统访问, 数据库访问
部署	静态文件或自行部署 Node.js 服务器	静态文件, Node.js 服务器, Serverless 函数

第五章：选择正确的 Pre-rendering 策略

Next.js 的强大之处在于它允许你为应用程序中的每个页面选择最合适的渲染策略。

策略	优点	缺点	最佳使用场景
SSG	极速性能，高可靠性，低成本，优秀 SEO	数据可能陈旧，构建时间长	博客、营销页、文档、不常更新的电商产品页、登录注册页
ISR	SSG 的性能优势，同时实现数据增量更新	仍有数据延迟，首次访问可能看到旧内容	博客、新闻网站、内容管理系统页面
SSR	数据实时性高，优秀 SEO，适合个性化内容	服务器负载高，TTFB 较长，需运行服务器	仪表盘、电商购物车、用户配置页、实时数据、搜索结果页
CSR	富交互体验，前后端分离，减少服务器压力	SEO 差，首次加载慢，LCP/FCP 不佳	后台管理系统、高度交互的 Web 应用（如富文本编辑器）

混合使用策略：
在 Next.js 中，你完全可以在同一个应用中混合使用这些策略。例如：

博客文章页面使用 getStaticProps (SSG + ISR)
用户仪表盘页面使用 getServerSideProps (SSR)
商品评论模块在 SSG 或 SSR 页面上通过 useEffect 客户端动态加载 (CSR)
登录注册页面使用 SSG，然后在客户端处理表单提交和用户认证

这种灵活性是 Next.js 相较于其他框架的显著优势。

第六章：未来展望：React Server Components 与 Next.js

React 团队正在积极开发 React Server Components (RSC)，旨在进一步优化服务器和客户端渲染的融合，并解决传统 SSR 中 hydration 的一些性能开销问题。RSC 允许开发者将组件标记为“服务器组件”，这些组件只在服务器上渲染，并且不发送到客户端进行 hydration。它们可以访问服务器资源，并且可以流式传输 UI 更新。

Next.js 作为 React 的领先框架，已经积极拥抱 RSC，并在其 app 目录 (Next.js 13 及更高版本) 中实现了对 RSC 的支持。这意味着 Next.js 将继续站在 Web 渲染技术的前沿，为开发者提供更强大、更高效的工具。

React Server Components： 进一步模糊了客户端和服务器的界限，允许在服务器端渲染更多组件，从而减少发送到客户端的 JavaScript 包大小，提高性能。
Next.js 的集成： 通过 app 目录，Next.js 正在将 getStaticProps 和 getServerSideProps 的功能进一步抽象和简化，让开发者能够更自然地定义组件的渲染位置（客户端或服务器），并进行数据获取。

结语

Next.js 并非简单地在 React 核心 API 之上搭建了一个应用骨架，它更像是一次深层次的架构革新。通过对构建流程、路由机制、数据获取策略以及渲染环境的全面“二开”与封装，Next.js 成功地将 React 从一个客户端 UI 库，拓展为一个能够驾驭复杂预渲染策略、提供卓越性能和开发者体验的全栈框架。它不仅解决了纯客户端渲染的诸多痛点，更为现代 Web 应用的开发树立了新的标准，使得开发者能够以更少的精力，构建出更强大、更高效的 Web 体验。

第一章：Web 渲染策略的演进与 Pre-rendering 的崛起

1.1 客户端渲染 (Client-Side Rendering, CSR)

1.2 Pre-rendering (预渲染)

第二章：Static Generation (SSG) 静态生成

2.1 SSG 的工作原理

2.2 Next.js 中的 SSG 实现：getStaticProps 和 getStaticPaths

2.2.1 getStaticProps：为静态页面获取数据

2.2.2 getStaticPaths：为动态路由生成静态页面

2.3 增量静态再生 (Incremental Static Regeneration, ISR)

第三章：Server-Side Rendering (SSR) 服务器端渲染

3.1 SSR 的工作原理

3.2 Next.js 中的 SSR 实现：getServerSideProps

第四章：Next.js 在 React 核心 API 上的“二开”逻辑

4.1 构建系统与环境抽象

4.2 路由系统：文件系统即路由

4.3 数据获取层：超越 React 组件生命周期

4.4 性能优化组件与 API

4.5 运行时环境与服务器能力

4.6 表格总结：Next.js 对 React 核心的扩展

第五章：选择正确的 Pre-rendering 策略

第六章：未来展望：React Server Components 与 Next.js

结语

发表回复 取消回复

2.2 Next.js 中的 SSG 实现：`getStaticProps` 和 `getStaticPaths`

2.2.1 `getStaticProps`：为静态页面获取数据

2.2.2 `getStaticPaths`：为动态路由生成静态页面

3.2 Next.js 中的 SSR 实现：`getServerSideProps`

发表回复取消回复