第五章：Next.js 渲染和部署

客户端渲染 (CSR) vs. 服务器端渲染 (SSR)

1. 基本概念

客户端渲染 (CSR)

  • 定义：页面内容由浏览器通过 JavaScript 动态生成，初始 HTML 仅包含空容器。
  • 特点：
    • 首次加载后，页面交互由客户端 JavaScript 处理。
    • 适合高度动态的应用（如仪表盘、SPA）。
    • SEO 不友好（初始 HTML 内容为空）。

服务器端渲染 (SSR)

  • 定义：页面内容由服务器生成完整的 HTML 后返回给浏览器。
  • 特点：
    • 首屏加载快，直接呈现完整内容。
    • 对 SEO 友好（内容直接嵌入 HTML）。
    • 服务器压力较大（每次请求需重新生成页面）。

2. 核心差异对比

特性CSRSSR
渲染位置浏览器服务器
首屏加载速度较慢（需等待 JS 执行）较快（直接返回 HTML）
SEO 支持需额外优化（如预渲染）原生支持
服务器负载低（静态资源托管）高（动态生成页面）
适用场景交互复杂的应用内容优先的页面（博客、电商）

3. Next.js 中的实现

CSR 实现方式

// 使用 React 的 useEffect 和 useState 动态加载数据
import { useState, useEffect } from 'react';

function CSRPage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData);
  }, []);

  return <div>{data ? data.content : 'Loading...'}</div>;
}

SSR 实现方式

// 使用 getServerSideProps
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

function SSRPage({ data }) {
  return <div>{data.content}</div>;
}

4. 如何选择？

  • 选择 CSR 的场景：
    • 用户交互频繁（如后台管理系统）。
    • 不依赖 SEO 的私有应用。
  • 选择 SSR 的场景：
    • 需要快速首屏渲染（如营销页）。
    • 依赖搜索引擎流量的内容型网站。

5. 混合使用策略

Next.js 支持 混合渲染模式：

  • 关键页面（如首页）使用 SSR。
  • 动态功能（如用户面板）使用 CSR。
  • 通过 next/dynamic 实现按需加载组件：
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(
  () => import('../components/CSRComponent'),
  { ssr: false }
);

最佳实践：结合 SSG（静态生成）和 SSR 以平衡性能与动态性。

Last Updated::