WHAT - NextJS 系列之 Rendering - Server Components

一、Server Components

Next.js 结合了React的两种组件模型：Server Components 和 Client Components。

了解它们的区别以及如何使用是构建高效和用户友好的应用程序的关键。以下是它们的详细解释和使用指南。

1.1 Server Components

Server Components 是在服务器上渲染的React组件，它们可以直接从服务器返回HTML。使用Server Components有助于减少客户端的JavaScript负载，提高页面的初始加载速度。

特点

• 服务器端渲染：组件在服务器上渲染为HTML，然后发送到客户端。
• 零JavaScript开销：客户端没有额外的JavaScript加载，只接收渲染后的HTML。
• 数据获取：可以在服务器上直接获取数据，减少客户端的API调用。

使用

在Next.js中，默认情况下，所有的页面和组件都是Server Components。你可以通过以下方式定义一个Server Component：

// pages/index.js
export default function Home() {return (<div><h1>Server Component</h1><p>This component is rendered on the server.</p ></div>);
}

1.2 Client Components

Client Components 是在客户端渲染的React组件，适用于需要在浏览器中处理交互逻辑和状态管理的场景。

特点

• 客户端渲染：组件在浏览器中渲染，并且可以处理用户交互。
• JavaScript开销：需要下载和执行额外的JavaScript。
• 动态交互：适用于需要用户交互和动态更新的部分。

使用

在Next.js中，你可以通过 use client 指令显式声明一个组件为Client Component：

// components/ClientComponent.js
'use client';import { useState } from 'react';export default function ClientComponent() {const [count, setCount] = useState(0);return (<div><h1>Client Component</h1><p>Count: {count}</p ><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}

1.3 综合使用示例

下面是一个Next.js应用，包含Server Components和Client Components：

// pages/index.js
import ClientComponent from '../components/ClientComponent';export default function Home() {return (<div><h1>Next.js Server and Client Components Example</h1><p>This part is rendered on the server.</p ><ClientComponent /></div>);
}

在这个示例中，Home 组件是一个Server Component，而 ClientComponent 是一个Client Component。在浏览器中加载时，Home 组件将由服务器渲染并返回HTML，而 ClientComponent 将在客户端渲染和处理用户交互。

1.4 小结

• Server Components 适用于静态内容和数据获取，可以减少客户端JavaScript负载。
• Client Components 适用于需要动态交互的部分。

通过合理地组合使用这两种组件，可以构建高性能且用户体验良好的应用程序。

二、Server Components 优势

https://nextjs.org/docs/app/building-your-application/rendering/server-components#benefits-of-server-rendering

根据文档：

There are a couple of benefits to doing the rendering work on the server, including:

• Data Fetching: Server Components allow you to move data fetching to the server, closer to your data source. This can improve performance by reducing time it takes to fetch data needed for rendering, and the number of requests the client needs to make.
• Security: Server Components allow you to keep sensitive data and logic on the server, such as tokens and API keys, without the risk of exposing them to the client.
• Caching: By rendering on the server, the result can be cached and reused on subsequent requests and across users. This can improve performance and reduce cost by reducing the amount of rendering and data fetching done on each request.
• Performance: Server Components give you additional tools to optimize performance from the baseline. For example, if you start with an app composed of entirely Client Components, moving non-interactive pieces of your UI to Server Components can reduce the amount of client-side JavaScript needed. This is beneficial for users with slower internet or less powerful devices, as the browser has less client-side JavaScript to download, parse, and execute.
• Initial Page Load and First Contentful Paint (FCP): On the server, we can generate HTML to allow users to view the page immediately, without waiting for the client to download, parse and execute the JavaScript needed to render the page.
• Search Engine Optimization and Social Network Shareability: The rendered HTML can be used by search engine bots to index your pages and social network bots to generate social card previews for your pages.
• Streaming: Server Components allow you to split the rendering work into chunks and stream them to the client as they become ready. This allows the user to see parts of the page earlier without having to wait for the entire page to be rendered on the server.

三、Streaming 特性

关于 Streaming 我们可能不太了解。

在Next.js中，Streaming 是一个强大的特性，它允许将Server Components的渲染工作分割成多个块，并在这些块准备好后将它们流式传输到客户端。这样用户可以更早地看到页面的部分内容，而无需等待整个页面在服务器上完全渲染完成。这种机制提升了页面的加载性能和用户体验。

3.1 基本介绍和使用

Streaming的理解

Streaming 实际上是将服务器端渲染（SSR）的结果分段发送到客户端。

这样做的好处包括：

• 更快的首次内容渲染（First Contentful Paint, FCP）：部分内容可以更早地呈现给用户，提升感知性能。
• 更好的用户体验：用户不需要等待整个页面加载完毕就可以开始浏览内容。

工作原理

1. 分段渲染：服务器会将页面的渲染过程分割成多个部分（chunks），每个部分在准备好后立即发送到客户端。
2. 流式传输：客户端逐步接收这些渲染的部分，并即时更新页面展示。
3. 渐进增强：随着更多的内容被流式传输到客户端，页面逐步变得完整。

使用示例

Next.js 通过 React.lazy 和 Suspense 组件可以实现流式传输。以下是一个简单的示例，展示如何在Next.js中使用Streaming。

服务器端组件

创建一个服务器端组件 ServerComponent：

// 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>);
}

客户端组件

创建一个客户端组件 ClientComponent，其中包含 React.lazy 和 Suspense：

// 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>);
}

页面

在页面中使用这些组件：

// pages/index.js
import ClientComponent from '../components/ClientComponent';export default function Home() {return (<div><h1>Next.js Streaming Example</h1><ClientComponent /></div>);
}

通过这个示例，我们实现了以下功能：

1. Server Component 模拟服务器端的数据获取。
2. Client Component 使用 React.lazy 和 Suspense 来实现异步加载和流式传输。React.lazy，使用动态 import 的方式来异步加载 ServerComponent，这样做可以让 ServerComponent 在客户端首次需要时才被加载，而不是在页面初始加载时就加载所有内容。Suspense 这个组件用来在 ServerComponent 加载完成之前显示一个加载指示器（fallback）。当 ServerComponent 加载完成后，Suspense 将会显示 ServerComponent 的内容。
3. 当页面加载时，客户端组件首先渲染，然后当服务器端组件的数据准备好时，逐步将其渲染并显示出来。

流程解释

1. 服务器端渲染：

   • 当用户访问根路由时，服务器将首先渲染 Home 组件。
   • Home 组件中的 ClientComponent 将被渲染。
   • 由于 ClientComponent 中使用了 React.lazy，服务器端会生成一个加载指示器作为 Suspense 的 fallback。

2. 客户端加载：

   • 当浏览器接收到从服务器返回的 HTML 和 JavaScript 后，首先显示的是服务器端渲染的内容，包括加载指示器。
   • 然后浏览器开始下载 ClientComponent 相关的 JavaScript 代码（由于使用了 React.lazy，此时才会开始加载 ServerComponent 的代码）。

3. 客户端 hydration：

   • 一旦 ServerComponent 的代码加载完成，React 将在客户端进行 hydration 过程。
   • Hydration 过程会保留和复用服务器端已经渲染好的 HTML 结构，并将其转化为可交互的 React 组件。
   • 用户将看到 Loading... 替换为实际从服务器获取的数据，即 Server-side Data。

这种结合使用 Server Components、Client Components 和 React.lazy 的方式，使得应用能够在首次加载时快速显示内容，并在需要时才加载额外的组件和数据，从而提升了页面加载速度和用户体验。

这种流式传输机制显著提升了用户体验，使得用户可以更早地看到页面的部分内容，而无需等待整个页面完全加载。这样可以优化首屏加载时间，提高用户的满意度。

3.2 HTTP/1.1和HTTP/2中的响应流式传输机制

这部分主要是解释为什么服务器可以在Server Components渲染完成后主动将新的HTML块发送到客户端，涉及响应流式传输。

理解流式传输中服务器主动发送数据给客户端的工作机制需要深入了解HTTP协议的分块传输（chunked transfer encoding）和服务器端渲染（SSR）的细节。在传统的请求-响应模型中，客户端请求数据，服务器返回完整的响应。然而，流式传输允许在响应未完全完成时分块发送数据。

在 WHAT - HTTP keep-alive 持久性连接和内存泄漏问题 中我们也详细介绍过持久性链接的 无流水的持久性连接 和 流水机制的持久性连接，后者就是上述中的响应流式传输机制。

流式传输的详细解释

HTTP分块传输编码

HTTP/1.1引入了分块传输编码（chunked transfer encoding），允许服务器将响应数据分成多个块，每个块可以在准备好后立即发送给客户端。这种机制使得服务器不必等待整个响应生成完成，而是可以即时发送部分数据，减少客户端的等待时间。

流式传输流程

1. 客户端请求：

   • 浏览器发起请求，例如 http://yourwebsite.com/。

2. 服务器响应启动：

   • 服务器开始处理请求，生成HTML响应的初始部分，并发送到客户端。
   • 在传统模型中，服务器会等待所有数据准备好后再发送完整响应，但在流式传输中，服务器可以发送初始HTML块，并在后台继续处理剩余部分。

3. 分块传输：

   • 服务器逐步渲染页面的不同部分，当某个部分（如组件或数据）准备好时，立即发送对应的HTML块。
   • 每个HTML块都是通过HTTP分块传输编码发送的，客户端会即时接收和渲染这些块。

4. 客户端渲染：

   • 浏览器接收到初始HTML块后开始渲染页面，并显示部分内容。
   • 随着更多HTML块到达，浏览器逐步更新页面内容，无需等待整个页面完成。

为什么服务器可以主动发送数据？

• 分块传输编码：HTTP/1.1和HTTP/2支持分块传输编码，使得服务器可以在响应生成过程中分块发送数据，而无需等待完整的响应生成。
• 持久连接：HTTP/1.1默认使用持久连接（keep-alive），允许在单个TCP连接上发送和接收多个HTTP请求和响应。这使得服务器可以在同一连接中持续发送数据块，客户端接收到每个块后立即处理和渲染。

小结

通过使用HTTP分块传输编码和持久连接，服务器可以在响应过程中主动分块发送数据到客户端。客户端不需要发起额外的请求来获取这些数据块，而是通过保持连接接收并即时渲染内容。这种机制显著提高了页面的加载速度和用户体验。

四、Server Components 渲染过程

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

Each chunk is rendered in two steps:

1. React renders Server Components into a special data format called the React Server Component Payload (RSC Payload).
2. Next.js uses the RSC Payload and Client Component JavaScript instructions to render HTML on the server.

Then, on the client:

1. The HTML is used to immediately show a fast non-interactive preview of the route - this is for the initial page load only.
2. The React Server Components Payload is used to reconcile the Client and Server Component trees, and update the DOM.
3. The JavaScript instructions are used to hydrate Client Components and make the application interactive.

具体来说：

当用户访问根路由（例如 /）时，React应用的流程可以分为以下几个关键步骤，涵盖了从服务器端到客户端的整个过程：

1. 用户访问根路由 /

用户在浏览器中输入网站的根URL，例如 https://www.example.com/，或直接访问 / 路径。

2. 服务器端渲染（Server-Side Rendering）

• 服务器接收请求：

  • 服务器（例如Node.js服务器）接收到用户发出的请求。

• 路由匹配：

  • 服务器根据请求的路径（这里是 /）匹配对应的处理函数或路由。

• React组件渲染：

  • 在服务器端，React开始渲染根组件（例如 Home 组件）及其包含的子组件。

• 生成HTML：

  • React将根组件及其子组件渲染为HTML字符串。

• 数据加载：

  • 如果有需要，在服务器端加载初始数据（例如从数据库或API获取数据）。

• 构建完整的HTML页面：

  • 服务器将生成的HTML字符串、数据和其他必要资源（如样式表、JavaScript文件等）组合成完整的HTML页面。

3. 客户端响应和加载

• 服务器响应：

  • 服务器将生成的HTML页面作为响应发送回客户端浏览器。

• 浏览器接收响应：

  • 客户端浏览器收到来自服务器的HTML响应。

• HTML解析和加载：

  • 浏览器开始解析HTML文档，并开始加载其中引用的其他资源（例如CSS、JavaScript）。

• React Hydration：

  • 一旦浏览器加载了HTML并下载了所需的JavaScript文件，React开始hydration过程。
  • Hydration是指React在客户端重新生成由服务器端渲染生成的静态HTML结构，并将其变为可交互的React组件。
  • React会检查服务器端渲染的HTML与客户端现有的DOM结构之间的差异，并仅更新有变化的部分，而不是重新渲染整个页面。

4. 客户端交互和完成加载

• JavaScript加载和执行：

  • 客户端加载的JavaScript文件被执行，其中包括组件的客户端代码和逻辑。

• 事件绑定：

  • React重新建立组件的事件监听器和状态管理，确保页面的交互功能正常。

• 完成加载：

  • 当所有资源（HTML、CSS、JavaScript）加载和解析完成后，用户可以看到完全交互的页面。

总结

以上流程描述了从用户访问根路由到服务器端渲染React组件，再到客户端hydration的全过程。这种混合渲染模式利用了服务器端的快速加载和SEO优势，同时又能保持客户端的交互性和动态性，提供了更好的用户体验和性能优化。

五、RSC Payload

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

What is the React Server Component Payload (RSC)?
The RSC Payload is a compact binary representation of the rendered React Server Components tree. It’s used by React on the client to update the browser’s DOM. The RSC Payload contains:

• The rendered result of Server Components
• Placeholders for where Client Components should be rendered and references to their JavaScript files
• Any props passed from a Server Component to a Client Component

React Server Component Payload (RSC Payload) 是指在使用React Server Components时，服务器端生成并发送给客户端的具体数据。

这些数据包含了服务器端渲染的组件及其状态，使得客户端能够快速恢复和渲染这些组件。

详细解释

React Server Components的基本概念

React Server Components允许将组件的渲染过程部分或全部移到服务器端，从而减轻客户端的渲染负担。服务器生成HTML和必要的数据，并将其发送给客户端。客户端可以直接渲染这些预先生成的HTML，而无需在浏览器中重新执行繁重的计算和数据获取。

RSC Payload的组成

RSC Payload通常包含以下几部分内容：

1. HTML：

   • 服务器端预渲染的HTML片段。这些片段是由React组件在服务器端生成的，直接插入到客户端的DOM中。

2. JSON数据：

   • 组件的状态和数据。这些数据用于初始化和恢复客户端上的组件状态，避免客户端需要再次获取数据或执行昂贵的计算。

3. 元数据：

   • 关于组件结构和依赖关系的信息。这些信息可以帮助客户端正确地恢复和挂载组件树。

工作流程

1. 服务器端渲染：

   • 服务器接收客户端请求，渲染React组件树，生成HTML和相关的JSON数据。

2. 生成RSC Payload：

   • 服务器将生成的HTML片段和JSON数据打包成RSC Payload。

3. 发送RSC Payload：

   • 服务器通过HTTP响应将RSC Payload发送给客户端。

4. 客户端渲染：

   • 客户端接收到RSC Payload，解析并插入预渲染的HTML片段。
   • 使用JSON数据初始化和恢复组件状态。
   • 挂载和激活组件，使其变为可交互的。

示例

以下是一个简单的示例，展示RSC Payload在服务器端生成并发送给客户端的过程。

服务器端代码

// components/ServerComponent.js
import React from 'react';export default function ServerComponent() {const data = 'Server-side Data';return (<div><h1>Server Component</h1><p>{data}</p></div>);
}

服务器处理请求和生成RSC Payload

// server.js
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import ServerComponent from './components/ServerComponent';const app = express();app.get('/', (req, res) => {const componentHTML = ReactDOMServer.renderToString(<ServerComponent />);const rscPayload = {html: componentHTML,data: {message: 'Server-side Data'}};res.send(rscPayload);
});app.listen(3000, () => {console.log('Server is running on port 3000');
});

客户端接收和处理RSC Payload

// client.js
import React from 'react';
import ReactDOM from 'react-dom';
import ServerComponent from './components/ServerComponent';// 假设已经获取到服务器返回的RSC Payload
fetch('/').then(response => response.json()).then(rscPayload => {// 插入预渲染的HTMLdocument.getElementById('root').innerHTML = rscPayload.html;// 恢复和初始化组件状态ReactDOM.hydrate(<ServerComponent initialData={rscPayload.data} />,document.getElementById('root'));
});

优点

• 性能优化：减轻客户端的渲染负担，提高页面加载速度。
• 用户体验：用户可以更快地看到内容，减少感知到的加载时间。
• SEO友好：服务器端渲染的内容更易于搜索引擎索引。

小结

React Server Component Payload（RSC Payload）是服务器端生成的HTML片段和相关数据的集合，用于在客户端快速恢复和渲染组件。通过这种机制，React Server Components能够显著提升应用的性能和用户体验。

六、hydrate

相关官方文档：https://react.dev/reference/react-dom/client/hydrateRoot

React hydration 是指在客户端将服务器端渲染生成的静态 HTML 变为可交互的 React 组件的过程。

这一过程在使用服务器端渲染（SSR）和客户端渲染（CSR）混合的应用中特别重要，能够提高页面加载速度和用户体验。

Hydration 过程详解

1. 服务器端渲染（Server Rendering）：

   • 在服务器端，React 根据请求渲染组件，并生成对应的静态 HTML。这些 HTML 包含了组件的结构和初始数据，通常会与 React 的事件绑定、状态管理等功能无关。

2. 客户端加载 HTML：

   • 当浏览器收到服务器发送的 HTML 时，会立即开始解析和显示页面内容。这使得用户可以更快地看到页面的初始渲染结果，而无需等待所有 JavaScript 脚本加载和执行完成。

3. React Hydration 开始：

   • 一旦浏览器加载了初始 HTML，并且 JavaScript 资源下载完毕，React 将启动 hydration 过程。
   • Hydration 是指 React 在客户端重新生成之前服务器端渲染的 HTML 结构，并且尝试将其与客户端上已经存在的 DOM 进行对比和合并。

4. 对比和合并：

   • React 首先会检查客户端上已有的 DOM 结构，与服务器端渲染生成的虚拟 DOM 进行对比。
   • 对比过程中，React 查找差异并更新仅有的部分，而不是重新渲染整个页面。这包括更新组件的状态、添加事件监听器以及处理用户交互等。

5. 保持状态和事件绑定：

   • Hydration 过程确保了组件在客户端的行为与在服务器端渲染时的一致性。例如，已经存在的表单输入内容、滚动位置和焦点状态等都将得到保留。
   • 事件绑定也会被重建，以确保组件能够响应用户的交互操作。

Hydration 的优势

• 快速加载和可交互性：通过在客户端重新使用已生成的 HTML，用户能够更快地看到页面内容，并且能够立即与页面进行交互。
• SEO 友好：服务器端渲染生成的 HTML 对搜索引擎可见，提升了页面的 SEO 效果。
• 性能优化：减少了客户端渲染的工作量，使得页面在用户端的加载速度更快，并且在初次加载时减少了CPU负载。

实现 Hydration 的方式

在 React 应用中，hydration 是由 ReactDOM 提供的功能来实现的。具体实现可以参考以下示例：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';// 客户端渲染入口点
ReactDOM.hydrate(<App />, document.getElementById('root'));

在这个例子中，ReactDOM.hydrate 将会在 #root 元素中寻找已有的 HTML，并且使用它来优化并重新创建 React 组件。

结论

React hydration 是通过将服务器端渲染的静态 HTML 变为可交互的 React 组件来优化应用性能和用户体验的关键步骤。通过使用 hydration，React 能够结合服务器和客户端的优势，提供快速的加载和良好的用户交互响应。