使用 Next.js 进行服务端渲染（SSR）

Next.js 是 React 的一个流行框架，专注于提供更好的开发体验和性能优化。它内置了服务端渲染（Server-Side Rendering, SSR）、静态生成（Static Site Generation, SSG）、和客户端渲染（Client-Side Rendering, CSR）等功能。

本章将介绍如何使用 Next.js 实现服务端渲染的基本用法，并了解其工作原理与常见场景。

1. 什么是服务端渲染（SSR）

服务端渲染是指在服务器上生成页面的 HTML 内容，然后将完整的页面发送到客户端浏览器。相比于客户端渲染（CSR），SSR 提供了以下优势：

  • 更快的首屏加载时间：用户可以立即看到完整的 HTML 页面，无需等待 JavaScript 加载完成。
  • SEO 友好：搜索引擎可以直接抓取服务端渲染生成的 HTML 内容。

2. 初始化 Next.js 项目

2.1 安装 Next.js

要开始使用 Next.js，可以通过以下命令创建一个新项目：

npx create-next-app@latest my-next-app
# 或者
yarn create next-app my-next-app

2.2 启动开发服务器

进入项目目录并启动开发服务器：

cd my-next-app
npm run dev
# 或者
yarn dev

访问 http://localhost:3000，即可查看项目运行。

3. 使用 SSR 实现动态渲染

在 Next.js 中，服务端渲染通过 getServerSideProps 函数实现。它允许你在每次请求时获取服务器端数据，并将数据传递给页面组件。

3.1 基本用法

创建一个动态渲染的页面，例如 pages/ssr-example.js：

export async function getServerSideProps(context) {
  // 模拟从后端获取数据
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data, // 将数据传递给页面组件
    },
  };
}

export default function SSRExample({ data }) {
  return (
    <div>
      <h1>服务端渲染示例</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

访问 /ssr-example，页面会在服务器端生成后再发送到浏览器。

4. 服务端渲染的请求上下文

在 getServerSideProps 中，可以使用上下文参数访问请求的详细信息，例如：

context.params：动态路由参数 context.query：查询字符串 context.req 和 context.res：Node.js 原生请求和响应对象

示例：读取查询字符串

export async function getServerSideProps(context) {
  const { query } = context;

  return {
    props: {
      query, // 将查询参数传递给页面组件
    },
  };
}

export default function QueryExample({ query }) {
  return (
    <div>
      <h1>查询字符串示例</h1>
      <p>查询参数：{JSON.stringify(query)}</p>
    </div>
  );
}

5. 服务端渲染的常见场景

5.1 需要实时数据更新的页面

当页面需要根据用户请求实时获取最新数据（如动态价格或库存）时，SSR 是理想的选择。

5.2 对 SEO 要求较高的页面

SSR 提供完整的 HTML 页面结构，有助于搜索引擎更高效地抓取页面内容。

6. SSR 的优缺点

优点

  • 更快的首屏加载：用户可以更快地看到内容。
  • 更好的 SEO：生成的 HTML 对搜索引擎更加友好。

缺点

  • 服务器压力较大：每次请求都需要服务器生成 HTML 页面。
  • 延迟增加：数据获取和 HTML 渲染会增加页面响应时间。

7. 总结

使用 Next.js 的 getServerSideProps，可以轻松实现服务端渲染，适用于需要实时数据和优化 SEO 的场景。然而，对于静态内容或不常变动的页面，可以选择静态生成（SSG）来减少服务器压力。

Next.js 提供了一种平衡性能与开发体验的方式，可以根据不同的场景选择适合的渲染策略。

Last Updated::