第四章

渲染模式
Next.js SEO的核心

理解服务器组件与客户端组件的区别，并掌握SSG、SSR、ISR三种渲染策略，是最大化Next.js SEO潜力的关键。

核心概念
预计阅读：50分钟
策略选择

4.1 理解App Router的渲染环境

在App Router中，组件默认是服务器组件，这是SEO的基石，因为它们在服务器上渲染成HTML。需要交互性的组件则通过 `'use client'` 指令标记为客户端组件。

服务器组件 vs 客户端组件

服务器组件 (默认)

  • 在服务器上渲染
  • 代码不发送到客户端
  • 可以直接访问后端资源 (数据库, 文件系统)
  • SEO友好，直接输出HTML
  • 不支持交互 (useState, useEffect等)
// app/page.tsx (Server Component by default)
import { db } from '@/lib/db';

// This function runs ONLY on the server
async function MyServerComponent() {
  const data = await db.items.findMany();

  return (
    <div>
      {data.map(item => <p key={item.id}>{item.name}</p>)}
    </div>
  );
}
// Client does not receive this component's code.
// Client only receives the final rendered HTML.

4.2 Next.js中的渲染策略实践

Next.js提供了多种渲染策略，以适应不同场景的需求。选择正确的策略对性能和SEO至关重要。

渲染策略模拟器

静态站点生成 (SSG)

在构建时生成页面，每次访问都提供相同的文件。速度最快，SEO极佳。

实现方式 (App Router)
// 默认行为，或使用
fetch('...', { cache: 'force-cache' });
优点
  • 加载极快
  • 高可靠性
  • CDN友好
缺点
  • 内容更新需要重新构建
  • 不适合动态数据

页面生成时间

8:00:00 AM
页面在构建时生成，时间固定。

4.3 如何选择渲染策略？

根据页面的数据需求和内容更新频率来选择最合适的渲染策略。

使用 SSG (静态站点生成)

适用场景：博客文章、文档、营销页面、关于我们等内容不经常变化的页面。

判断依据：页面内容可以提前生成，并且对所有用户都一样。

使用 SSR (服务器端渲染)

适用场景：用户仪表盘、购物车、需要根据用户身份展示不同内容的页面。

判断依据：页面内容高度个性化，或依赖于实时数据。

使用 ISR (增量静态再生)

适用场景：热门新闻、商品列表、社交媒体 Feed 等内容会更新但不需要实时反映的页面。

判断依据：页面内容会定期更新，但可以接受一定的延迟。

第四章总结

核心概念

  • 服务器组件是默认，用于性能和SEO。
  • 客户端组件用于交互，需 `'use client'` 声明。
  • SSG提供最佳性能，SSR保证数据最新。
  • ISR是SSG和SSR的完美结合。

下章预告

下一章将学习如何利用Next.js的内置工具进行性能优化，重点关注Core Web Vitals、字体和脚本优化。

进入下一章