编辑“︁Next.js渲染概述”︁（章节）

= Next.js渲染概述 =

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

== 基本概念 ==

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

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

=== 核心差异可视化 ===
<mermaid>
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调用]
</mermaid>

== 静态生成（SSG） ==

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

<math>
T_{render} = T_{build} + \frac{T_{fetch}}{n}
</math>

其中<math>T_{build}</math>是构建时间，<math>n</math>是访问次数。

=== 基础示例 ===
<syntaxhighlight lang="javascript">
// pages/about.js
export default function About({ data }) {
  return <div>{data.title}</div>;
}

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

'''输出结果：'''
* 构建时生成HTML文件包含"关于我们"
* 无需服务器运行时处理

== 服务器端渲染（SSR） ==

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

<syntaxhighlight lang="javascript">
// 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() // 每次请求获取新数据
    }
  };
}
</syntaxhighlight>

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

== 客户端渲染（CSR） ==

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

<syntaxhighlight lang="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>;
}
</syntaxhighlight>

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

== 混合渲染策略 ==

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

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

=== 增量静态再生（ISR） ===
Next.js特有功能，允许静态页面'''定期更新'''：

<syntaxhighlight lang="javascript">
export async function getStaticProps() {
  return {
    props: { /*...*/ },
    revalidate: 60 // 60秒后重新生成
  };
}
</syntaxhighlight>

== 实际应用场景 ==

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

== 性能考量 ==

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

{| class="wikitable"
|-
! 策略 !! TTFB范围 !! 适用网络条件
|-
| SSG | 1-100ms | 所有网络
|-
| SSR | 200-1000ms | 稳定服务器连接
|-
| CSR | 50-200ms（空HTML） | 需良好JavaScript性能
|}

== 总结 ==

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

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

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js渲染策略]]