服务端渲染

客户端渲染

在了解服务端渲染之前，我们需要先了解客户端渲染。

什么是客户端渲染（CSR）？

客户端渲染是指在浏览器中使用JavaScript代码生成内容。浏览器首先加载一个包含HTML骨架的页面，并通过JavaScript获取数据（如JSON），然后在用户界面上填充内容。这一过程通常依赖于AJAX请求和框架（如React、Vue等）来实现动态更新。

CSR的工作流程

  1. 用户请求服务器上的页面
  2. 服务器返回一个最基本的HTML文件（通常包含JavaScript文件的引用）
  3. 浏览器解析页面，加载JavaScript代码
  4. JavaScript代码在浏览器上执行，向服务器请求数据并生成动态内容
  5. 用户在页面上与内容交互时，JavaScript可以通过AJAX等方式加载新数据并更新DOM

优势

  • 服务器负担轻：页面渲染和大部分逻辑工作都在客户端完成，减少了服务端压力
  • 高交互性：用户与页面的交互通常会更流畅，因为页面不需要完整刷新
  • 丰富的用户体验：使用JavaScript库和框架（如React、Vue）可以创建高度动态的单页应用（SPA）

劣势

  • 首屏渲染慢：用户在请求页面时可能需要等待JavaScript加载，这可能导致较慢的首屏渲染时间
  • SEO问题：由于页面内容是由JavaScript生成的，搜索引擎可能无法有效抓取页面内容，影响SEO
  • 对旧浏览器支持差：某些旧浏览器可能不支持现代JavaScript功能，从而影响应用的广泛可用性

服务端渲染

服务端渲染其实不是一个新技术，过去前后端未分离的时候，由服务端返回HTML字符串（如最早学习Web时使用PHP输出HTML字符串），这就是早期的服务端渲染。

什么是服务端渲染（SSR）？

服务端渲染是指在服务器端生成完整的HTML页面并发送到客户端（浏览器），浏览器随即渲染这些HTML内容。这意味着所有的动态内容在用户请求页面时就已经在服务器上处理完成，得到完整的HTML返回。

SSR的工作流程

  1. 用户请求一个页面（例如，输入URL或点击链接）
  2. 服务器接收到请求并处理相关数据（如从数据库中提取数据）
  3. 服务器将数据渲染成HTML，并将完整的HTML文档返回给客户端
  4. 客户端接收到完整的HTML后进行渲染，用户可以立刻看到页面内容

优势

  • 首屏渲染快速：用户可以更快地看到页面内容，因为在页面返回之前已经生成了HTML
  • SEO友好：由于页面内容在服务器端生成，搜索引擎可以更容易地抓取和索引页面内容
  • 适合内容丰富的页面：对内容丰富的网页（如博客、新闻网站等）尤为有效，因为大部分内容是在页面加载时就呈现给用户

劣势

  • 服务器负担更重：服务器需要将所有页面的内容动态生成，这对服务器性能要求较高
  • 流量和响应速度：对于用户的每个操作，可能需要更多地与服务器进行交互，增加了延迟
  • 交互性降低：在用户与页面的交互过程中，每次请求可能需要重新加载页面，造成不必要的延迟

在选择使用服务器端渲染或客户端渲染时，要考虑应用的特性和需求。有时可以结合这两种渲染方式，例如使用SSR初始加载后，使用CSR进行后续交互，这种方式被称为“混合渲染”（Hybrid Rendering），能够充分发挥两者的优势。

例子

一个非常简单的页面，只有一个列表：

客户端渲染-1

客户端渲染-2

但是通过打包后的文件：

客户端渲染-3

可以看到，这个列表并没有存在HTML文档中，而是引入了一个JS文件，在页面渲染时执行并更新页面。这就是客户端渲染。

通过查看页面源代码我们也能看到它并不会显示列表内容：

客户端渲染-4

所以一般的爬虫只能抓取这一部分数据，不能获取具体的页面信息，不利于SEO。

相反，如果通过服务端渲染：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 简易服务端，仅作演示
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

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

const server = express();

server.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`<!DOCTYPE html><html><head><title>My React SSR App</title></head><body>${html}</body></html>`);
});

server.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

浏览器能够获取到完整的HTML文档：

服务端渲染-1

既减少了浏览器执行JS的开销，首屏渲染快速，也更利于SEO：

服务端渲染-2

所以简单理解：服务端渲染其实就是把JS的执行加载部分放在服务端上运行，输出完整的HTML文档返回给浏览器。

那么这时候就引申出另一个问题，为什么不能在打包构建阶段（build）就创建出完整的HTML文档？

最主要的原因是动态数据，以博客为例，通过服务端渲染获取最新的博客信息，并携带这些信息返回完整HTML文档，更利于SEO（如果是客户端通过接口请求获取数据并更新页面，这就又回到了客户端渲染）。

实际上，现在很多框架是支持在打包构建阶段（build）生成部分HTML文档的，但仅适用于静态数据。这种模式称之为预渲染。

≡