WHAT - NextJS 系列之 Rendering - Server Rendering Strategies

相关官方文档：https://nextjs.org/docs/app/building-your-application/rendering/server-components#server-rendering-strategies

There are three subsets of server rendering: Static, Dynamic, and Streaming.

在 React 和 Next.js 中，服务器端渲染（SSR）有三种主要的实现方式：Static Rendering、Dynamic Rendering 和 Streaming Rendering。这些方式在处理数据获取、页面渲染和响应客户端请求的方式上有所不同。

1. Static Rendering（静态渲染）

静态渲染是在构建时（Build Time）生成 HTML 文件的过程。这种方式适用于内容较少变化的页面，如博客文章、产品展示等。

特点：

• 预渲染：在构建应用时，所有需要的页面都已经生成好静态 HTML 文件。
• 高性能：因为生成的页面在构建时就已经完成，不需要在每次请求时重新生成。
• CDN 友好：静态页面可以轻松部署到 CDN 上，实现快速分发和加载。

实现方式：

在 Next.js 中，使用 getStaticProps 和 getStaticPaths 可以实现静态渲染。

// pages/post/[id].js
import { useRouter } from 'next/router';

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

// 在构建时调用
export async function getStaticPaths() {
  const paths = [ /* 预生成的路径数组 */ ];
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPostData(params.id);
  return { props: { post } };
}

2. Dynamic Rendering（动态渲染）

动态渲染是在每次请求时生成 HTML 的过程。这种方式适用于内容频繁变化或依赖用户输入的页面，如用户仪表盘、搜索结果等。

特点：

• 实时数据：每次请求都会触发服务器端渲染，确保用户获取最新数据。
• 灵活性高：适合需要频繁更新内容或个性化内容的场景。
• 性能开销：每次请求都会占用服务器资源，因此需要考虑服务器性能和响应时间。

实现方式：

在 Next.js 中，使用 getServerSideProps 可以实现动态渲染。

// pages/dashboard.js

export default function Dashboard({ data }) {
  return (
    <div>
      <h1>Dashboard</h1>
      <p>{data}</p>
    </div>
  );
}

// 每次请求都会调用
export async function getServerSideProps(context) {
  const data = await fetchDataForDashboard();
  return { props: { data } };
}

3. Streaming Rendering（流式渲染）

流式渲染是一种逐步发送 HTML 到客户端的渲染方式，这样客户端可以尽早看到部分内容，而无需等待整个页面渲染完成。适用于大型页面或复杂应用的优化。

特点：

• 快速响应：客户端可以更早地开始解析和渲染部分内容，提高感知性能。
• 渐进增强：逐步发送内容，使用户感觉页面加载速度更快。
• 适合大页面：对于需要渲染大量内容的页面非常有效。

实现方式：

在 Next.js 中，使用 React 18 引入的 React.lazy 和 Suspense 组件，结合新的流式渲染支持，可以实现流式渲染。

// pages/index.js
import ClientComponent from '../components/ClientComponent';

export default function Home() {
  return (
    <div>
      <h1>Next.js Streaming Example</h1>
      <ClientComponent />
    </div>
  );
}

// components/ClientComponent.js
'use client';

import React, { Suspense } from 'react';
const ServerComponent = React.lazy(() => import('./ServerComponent'));

export default function ClientComponent() {
  return (
    <div>
      <h1>Client Component</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <ServerComponent />
      </Suspense>
    </div>
  );
}

// components/ServerComponent.js
import React from 'react';

export default function ServerComponent() {
  // 模拟服务器端数据获取
  const data = new Promise((resolve) => {
    setTimeout(() => resolve('Server-side Data'), 3000);
  });

  return (
    <div>
      <h1>Server Component</h1>
      <p>{data}</p>
    </div>
  );
}

在这个示例中，通过 Suspense 和 React.lazy 实现流式渲染。当用户访问页面时，服务器会立即发送初始的 HTML，客户端在接收并解析后，可以逐步加载 ClientComponent 和 ServerComponent，使用户能够尽早看到部分内容。

总结

• 静态渲染（Static Rendering）：在构建时生成静态 HTML，适用于内容较少变化的页面。
• 动态渲染（Dynamic Rendering）：在请求时生成 HTML，适用于内容频繁变化的页面。
• 流式渲染（Streaming Rendering）：逐步发送 HTML，提高感知性能，适用于大型页面或复杂应用。