Next.js渲染概述

Next.js渲染概述

Next.js渲染概述是理解现代Web应用开发中页面生成方式的核心概念。Next.js作为React框架，提供了多种渲染策略以适应不同场景的性能、SEO和用户体验需求。本章将系统讲解静态生成（Static Generation）、服务器端渲染（Server-Side Rendering）和客户端渲染（Client-Side Rendering）的原理、区别及实际应用。

基本概念

Next.js的渲染策略决定了页面内容在何时何地被生成，主要分为三类：

渲染策略对比

策略类型	生成时机	适用场景	特点
构建时（build time） | 内容不变的页面（如博客、文档） | 最高性能，CDN友好
每次请求时（request time） | 动态内容（如用户仪表盘） | 更好的SEO，实时数据
浏览器运行时（runtime） | 高度交互的应用（如仪表盘） | 减少服务器负载，需JavaScript

核心差异可视化

graph TD A[用户请求] --> B{渲染策略} B -->|SSG| C[预生成HTML+JSON] B -->|SSR| D[实时生成HTML] B -->|CSR| E[空HTML+客户端JS渲染] C --> F[CDN缓存] D --> G[服务器处理] E --> H[API调用]

静态生成（SSG）

静态生成是Next.js的默认策略，页面在构建时生成HTML文件，可被CDN缓存。数学上，其效率可表示为：

$T_{render}=T_{build}+\frac{T_{fetch}}{n}$

其中$T_{build}$是构建时间，$n$是访问次数。

基础示例

// pages/about.js
export default function About({ data }) {
  return <div>{data.title}</div>;
}

export async function getStaticProps() {
  return {
    props: {
      data: { title: "关于我们" } // 构建时获取数据
    }
  };
}

输出结果：

• 构建时生成HTML文件包含"关于我们"
• 无需服务器运行时处理

服务器端渲染（SSR）

服务器端渲染在每次请求时生成HTML，适合动态内容：

// pages/profile.js
export default function Profile({ user }) {
  return <div>{user.name}</div>;
}

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/user');
  return {
    props: {
      user: await res.json() // 每次请求获取新数据
    }
  };
}

执行流程： 1. 用户请求/profile 2. 服务器执行`getServerSideProps` 3. 生成包含最新数据的HTML 4. 发送响应到客户端

客户端渲染（CSR）

客户端渲染通过浏览器JavaScript动态更新内容，通常配合静态生成使用：

// pages/dashboard.js
import { useState, useEffect } from 'react';

export default function Dashboard() {
  const [data, setData] = useState(null);

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

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

特点：

• 初始HTML为空或含加载状态
• 数据获取发生在页面加载后
• 适合需要频繁更新的数据

混合渲染策略

Next.js允许混合使用不同策略：

pie title 混合应用中的策略分布 "SSG" : 45 "SSR" : 30 "CSR" : 25

增量静态再生（ISR）

Next.js特有功能，允许静态页面定期更新：

export async function getStaticProps() {
  return {
    props: { /*...*/ },
    revalidate: 60 // 60秒后重新生成
  };
}

实际应用场景

电商网站案例： 1. 产品目录页：SSG + ISR（每天更新） 2. 产品详情页：SSG（预生成热门商品） 3. 购物车：CSR（高交互性） 4. 用户订单：SSR（需要实时数据）

性能考量

不同策略的首字节时间（TTFB）对比：

策略	TTFB范围	适用网络条件
1-100ms | 所有网络
200-1000ms | 稳定服务器连接
50-200ms（空HTML） | 需良好JavaScript性能

总结

理解Next.js渲染策略需要掌握：

• 静态生成（SSG）适合内容稳定的页面
• 服务器端渲染（SSR）需要实时数据的场景
• 客户端渲染（CSR）高交互性应用
• 混合使用可优化复杂应用的性能

选择策略时应考虑：内容更新频率、SEO需求和用户体验的平衡。