跳到主要内容

服务端渲染概述

什么是服务端渲染？​

服务端渲染（Server-Side Rendering，简称 SSR）是一种将网页内容在服务器端生成并发送到客户端的技术。与传统的客户端渲染（CSR）不同，SSR 在服务器端完成 HTML 的生成，客户端接收到的是可以直接渲染的完整 HTML 页面。

备注

客户端渲染（CSR）：在客户端（浏览器）中通过 JavaScript 动态生成 HTML 内容。 服务端渲染（SSR）：在服务器端生成 HTML 内容，然后将其发送到客户端。

为什么需要服务端渲染？​

  1. SEO 优化：搜索引擎爬虫更容易解析服务端渲染的 HTML 内容，从而提高网站的搜索引擎排名。
  2. 首屏加载速度：SSR 可以减少客户端的 JavaScript 加载和执行时间，提升首屏加载速度。
  3. 更好的用户体验：用户无需等待 JavaScript 加载完成即可看到页面内容。

服务端渲染的工作原理​

在传统的客户端渲染中，浏览器会下载一个空的 HTML 文件，然后通过 JavaScript 动态生成内容。而在服务端渲染中，服务器会预先生成完整的 HTML 文件，并将其发送到客户端。

服务端渲染的基本流程​

  1. 客户端发起请求：用户访问一个 URL，浏览器向服务器发送请求。
  2. 服务器生成 HTML：服务器根据请求的 URL，使用 React 组件生成完整的 HTML。
  3. 发送 HTML 到客户端：服务器将生成的 HTML 发送到客户端。
  4. 客户端渲染：浏览器接收到 HTML 后，直接渲染页面内容。

React 中的服务端渲染​

在 React 中，服务端渲染通常通过 ReactDOMServer 来实现。ReactDOMServer 提供了两个主要方法：renderToString 和 renderToStaticMarkup。

renderToString 方法​

renderToString 方法将 React 组件渲染为 HTML 字符串。这个字符串可以直接发送到客户端进行渲染。

import React from 'react';
import ReactDOMServer from 'react-dom/server';

const App = () => <div>Hello, SSR!</div>;

const html = ReactDOMServer.renderToString(<App />);
console.log(html);

输出：

<div data-reactroot="">Hello, SSR!</div>

renderToStaticMarkup 方法​

renderToStaticMarkup 方法与 renderToString 类似，但它生成的 HTML 不包含 React 内部使用的额外属性（如 data-reactroot），适合生成静态页面。

import React from 'react';
import ReactDOMServer from 'react-dom/server';

const App = () => <div>Hello, SSR!</div>;

const html = ReactDOMServer.renderToStaticMarkup(<App />);
console.log(html);

输出：

<div>Hello, SSR!</div>

实际应用场景​

1. 电子商务网站​

在电子商务网站中，商品列表页和详情页通常需要快速加载并具有良好的 SEO 表现。通过服务端渲染，可以在服务器端生成商品列表和详情页的 HTML，从而提升首屏加载速度和搜索引擎排名。

2. 新闻网站​

新闻网站的内容通常需要频繁更新，并且对 SEO 要求较高。使用服务端渲染可以确保新闻文章在发布后立即被搜索引擎索引，同时提供快速的页面加载体验。

总结​

服务端渲染（SSR）是一种强大的技术，特别适用于需要快速首屏加载和良好 SEO 表现的场景。通过 React 的 ReactDOMServer，我们可以轻松实现服务端渲染，从而提升用户体验和网站性能。

提示

练习：尝试使用 ReactDOMServer.renderToString 和 ReactDOMServer.renderToStaticMarkup 方法，分别生成一个简单的 React 组件的 HTML 字符串，并观察它们的区别。

附加资源​