React 服务端渲染 (SSR)

2024/9/21

React 服务端渲染 (SSR)

1. 什么是服务端渲染 (SSR)

React 默认采用的是客户端渲染（CSR, Client-Side Rendering），即浏览器下载完 JavaScript 代码后，在客户端生成页面内容。与此相对的**服务端渲染（SSR, Server-Side Rendering）**是在服务器端将 React 组件预先渲染成 HTML，再将该 HTML 页面发送给客户端。这样，用户在初次访问页面时，会立刻看到完整的页面内容，而不是等待 JavaScript 加载和执行。

SSR 的优势：

提高首屏加载速度：服务端直接生成 HTML 页面，避免了用户看到空白页面或“加载中”状态，首屏渲染速度大大提升。
SEO 优化：爬虫无法很好地处理客户端渲染内容，而 SSR 直接提供 HTML，有助于搜索引擎优化（SEO）。

Next.js 基础知识与使用

Next.js 是一个基于 React 的框架，专为服务端渲染（SSR）和静态网站生成（SSG）而设计。它为 React 提供了许多增强功能，包括 SSR、SSG、增量静态生成（ISR）等。

2. Next.js 核心概念与功能

文件系统路由：

在 Next.js 中，文件夹和文件名直接对应路由。所有放在 pages/ 文件夹中的 .js 文件都会自动变为页面路由。

示例：

bash
1
2
3
4
5
pages/
├── index.js      # 对应 `/` 路由
├── about.js      # 对应 `/about` 路由
└── blog/
    └── [id].js   # 动态路由，对应 `/blog/:id`

预渲染：
- 服务端渲染 (SSR)：在每次请求时，页面在服务器端渲染，然后返回给客户端。
- 静态生成 (SSG)：在构建时生成 HTML 文件，之后直接提供静态文件以供用户访问。
- 增量静态生成 (ISR)：静态生成的页面可以根据指定时间或条件进行增量更新，以保持内容最新。
API 路由：
- Next.js 支持在 pages/api/ 目录中创建 API 路由。你可以使用这些路由来处理 HTTP 请求，构建 API 服务。
示例：
bash
1
2
```
pages/api/
├── hello.js  # 通过 `/api/hello` 访问
```
内置 CSS 和 CSS-in-JS：
- 支持直接在组件中引入 CSS 文件，也可以使用 styled-jsx、CSS Modules 等样式解决方案。

3. SSR 使用示例

在 Next.js 中，可以通过 getServerSideProps 方法来实现服务端渲染：

jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// pages/index.js
import React from 'react';

function Home({ data }) {
  return (
    <div>
      <h1>SSR 页面</h1>
      <p>{data.message}</p>
    </div>
  );
}

// 每次请求都会运行，生成 HTML
export async function getServerSideProps() {
  // 调用外部 API，获取数据
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // 传递给页面的 props
  };
}

export default Home;

getServerSideProps：每次页面请求时，Next.js 都会先在服务器端运行这个函数，获取数据并将其作为 props 传递给页面组件，从而实现服务端渲染。

静态站点生成 (SSG) 和增量静态生成 (ISR)

4. 静态站点生成 (SSG)

静态站点生成是在构建时生成静态 HTML 页面，之后这些页面会直接提供给用户访问。相比于 SSR，SSG 页面在构建时生成，因此没有额外的服务器开销。

在 Next.js 中，使用 getStaticProps 函数来实现 SSG：

jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// pages/index.js
import React from 'react';

function Home({ data }) {
  return (
    <div>
      <h1>SSG 页面</h1>
      <p>{data.message}</p>
    </div>
  );
}

// 只在构建时执行一次，生成静态页面
export async function getStaticProps() {
  // 调用外部 API，获取数据
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // 传递给页面的 props
  };
}

export default Home;

特点：页面内容在构建时生成，适用于内容较为静态的网站，如博客、文档等。

5. 增量静态生成 (ISR)

增量静态生成 (ISR, Incremental Static Regeneration) 是 Next.js 结合了 SSG 和 SSR 的一种渲染方式。它允许在构建后生成的静态页面根据需求进行更新，而不需要重新构建整个网站。

通过 getStaticProps 中的 revalidate 属性，可以实现页面的定期更新。

jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// pages/index.js
import React from 'react';

function Home({ data }) {
  return (
    <div>
      <h1>ISR 页面</h1>
      <p>{data.message}</p>
    </div>
  );
}

// 静态生成，且每 10 秒更新一次
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
    revalidate: 10, // 每 10 秒重新生成页面
  };
}

export default Home;

revalidate 属性：指定页面每隔多少秒重新生成一次，这样可以保持页面内容的更新，而不需要在每次请求时都重新渲染页面。
适用场景：ISR 适用于需要频繁更新的内容，如新闻、博客列表，但不需要实时性极高的页面。

SEO 优化

6. 服务端渲染与 SEO

SSR 是优化搜索引擎排名（SEO）的有效方式。因为搜索引擎爬虫在抓取页面时无法很好地解析 JavaScript，所以 SSR 可以直接将完整的 HTML 提供给爬虫，提高页面的可见性和排名。

7. Next.js 内置的 SEO 支持

Next.js 提供了强大的 SEO 工具，可以方便地为每个页面设置元数据：

Next.js 的 Head 组件：允许你在页面中自定义 <head> 标签，添加元标签（meta tags）、标题、描述等。

jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Head from 'next/head';

function HomePage() {
  return (
    <>
      <Head>
        <title>我的博客</title>
        <meta name="description" content="这是我的博客，欢迎阅读。" />
        <meta name="keywords" content="博客,Next.js,React" />
      </Head>
      <h1>欢迎来到我的博客</h1>
    </>
  );
}

export default HomePage;

动态生成的 SEO 元数据：你可以根据页面内容动态生成元数据，确保每个页面都有唯一的标题和描述，提升 SEO 效果。

Next.js 其他高级功能

8. 图像优化

Next.js 提供了内置的图像优化功能，通过 next/image 组件，自动实现图像的延迟加载、自动格式选择（如 WebP）和优化等。

jsx
1
2
3
4
5
6
7
8
9
10
11
import Image from 'next/image';

function MyPage() {
  return (
    <div>
      <Image src="/path/to/image.jpg" alt="图片描述" width={500} height={300} />
    </div>
  );
}

export default MyPage;

9. API 路由

除了页面路由，Next.js 还支持 API 路由，你可以轻松创建后端 API，和前端 React 组件一起工作。API 路由可以处理如表单提交、数据库交互等。

js
1
2
3
4
// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from API' });
}

总结

SSR (服务端渲染)：在服务器端生成 HTML，有助于 SEO 并提高页面首屏加载速度。
SSG (静态站点生成)：在构建时生成静态 HTML，适用于内容变化不频繁的网站，性能更好。
ISR (增量静态生成)：结合 SSR 和 SSG，允许静态页面根据需要进行更新，适用于需要频繁更新的内容。
Next.js 提供了文件系统路由、API 路由、图像

优化等许多实用功能，并且通过 Head 组件和内置的 SSR/SSG 支持，极大地简化了 SEO 优化和页面性能优化的过程。

通过学习 Next.js，开发者可以轻松实现高效的 React 服务端渲染和静态站点生成，提升应用的用户体验与搜索引擎优化能力。