编辑“︁Next.js混合渲染”︁

{{DISPLAYTITLE:Next.js混合渲染}}  
'''Next.js混合渲染'''（Hybrid Rendering）是Next.js框架的核心特性之一，允许开发者在同一应用中结合多种渲染策略（如[[静态生成（SSG）]]、[[服务器端渲染（SSR）]]和[[客户端渲染（CSR）]]），以实现性能优化与动态功能的平衡。本章节将详细介绍其原理、实现方式及实际应用场景。  

== 概述 ==  
Next.js的混合渲染模式通过灵活组合以下策略，适应不同页面的需求：  
* '''静态生成（SSG）'''：页面在构建时预渲染，适合内容不变的页面（如博客、产品介绍）。  
* '''服务器端渲染（SSR）'''：页面在每次请求时动态渲染，适合个性化或实时数据（如用户仪表盘）。  
* '''客户端渲染（CSR）'''：页面在浏览器中通过JavaScript动态加载，适合交互密集型场景（如单页应用）。  

混合渲染的关键优势在于：  
* '''性能优化'''：静态页面快速加载，动态内容按需渲染。  
* '''SEO友好'''：关键内容通过SSG/SSR预渲染，确保搜索引擎抓取。  
* '''开发灵活性'''：开发者可根据需求选择最佳渲染策略。  

== 实现方式 ==  
=== 页面级配置 ===  
Next.js允许通过导出`getStaticProps`、`getServerSideProps`或直接使用客户端钩子（如`useEffect`）定义渲染策略。  

<syntaxhighlight lang="javascript">  
// 静态生成（SSG）示例  
export async function getStaticProps() {  
  const res = await fetch('https://api.example.com/posts');  
  const posts = await res.json();  
  return { props: { posts } }; // 构建时预渲染  
}  

// 服务器端渲染（SSR）示例  
export async function getServerSideProps() {  
  const user = await getUserSession(req); // 每次请求时渲染  
  return { props: { user } };  
}  

// 客户端渲染（CSR）示例（React组件内）  
function Profile() {  
  const [data, setData] = useState(null);  
  useEffect(() => {  
    fetch('/api/user').then(res => setData(res.json()));  
  }, []);  
  return <div>{data?.name}</div>;  
}  
</syntaxhighlight>  

=== 增量静态再生（ISR） ===  
ISR是混合渲染的高级特性，允许静态页面在运行时按需更新：  
<syntaxhighlight lang="javascript">  
export async function getStaticProps() {  
  return {  
    props: { /* ... */ },  
    revalidate: 60, // 每60秒重新生成页面  
  };  
}  
</syntaxhighlight>  

== 实际案例 ==  
=== 电商网站 ===  
* '''首页'''：使用SSG预渲染产品列表（高性能）。  
* '''产品详情页'''：使用ISR每10分钟更新库存信息。  
* '''购物车'''：使用SSR实时显示用户数据。  

<mermaid>  
graph LR  
  A[首页 - SSG] --> B[产品详情 - ISR]  
  B --> C[购物车 - SSR]  
  C --> D[支付页面 - CSR]  
</mermaid>  

=== 博客平台 ===  
* '''文章列表'''：SSG构建时生成。  
* '''评论区域'''：CSR动态加载以提升交互体验。  

== 性能对比 ==  
以下为不同策略的加载时间对比（假设网络延迟100ms）：  

{| class="wikitable"  
|+ 渲染策略性能对比  
! 策略 !! TTFB（毫秒） !! 交互时间（毫秒）  
|-  
| SSG || 50 || 100  
|-  
| SSR || 200 || 150  
|-  
| CSR || 300 || 50（需等待JS加载）  
|}  

<math>  
\text{总加载时间} = \text{TTFB} + \text{JS执行时间}  
</math>  

== 最佳实践 ==  
1. '''关键路径优先'''：首屏使用SSG/SSR，次要内容使用CSR。  
2. '''动态路由优化'''：结合`getStaticPaths`预生成高频动态路由。  
3. '''按需降级'''：SSG失败时回退到SSR（通过`fallback: true`）。  

== 总结 ==  
Next.js混合渲染通过策略组合，解决了纯静态或纯动态渲染的局限性。开发者需根据内容类型、数据更新频率和用户体验需求选择适当策略，并利用ISR等特性实现最佳平衡。

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