Next.js App Router：SSR 与 SSG 对比 - 全面指南

Next.js App Router 彻底改变了我们构建 React 应用的方式，提供了更强的性能、灵活性和开发者体验。这个新架构的核心是两种强大的渲染策略：服务端渲染 (Server-Side Rendering, SSR) 和静态站点生成 (Static Site Generation, SSG)。选择正确的方法对于优化应用的性能、SEO 和用户体验至关重要。本全面指南将深入探讨 Next.js App Router 环境下的 SSR 和 SSG 的复杂性，帮助您为项目做出明智的决策。

理解基础：SSR 与 SSG

在深入了解 Next.js App Router 的具体细节之前，让我们先对 SSR 和 SSG 建立清晰的理解。

服务端渲染 (SSR)

SSR 是一种技术，它在服务器上为每个请求将 React 组件渲染成 HTML。服务器将完全渲染好的 HTML 发送到客户端浏览器，然后浏览器对页面进行“激活”(hydrates)，使其具有交互性。

SSR 的主要特点：

动态内容：非常适合内容频繁变化或个性化的应用。例如具有动态定价的电商产品页面、社交媒体信息流或用户仪表盘。
实时数据：适用于需要实时数据更新的应用。例如，实时体育比分、股票市场跟踪器或协作文档编辑器。
改善 SEO：搜索引擎爬虫可以轻松索引完全渲染的 HTML，从而获得更好的 SEO 表现。
初始加载时间较慢：由于服务器需要为每个请求渲染页面，初始加载时间可能比 SSG 慢。
服务器要求：SSR 需要服务器基础设施来处理渲染过程。

静态站点生成 (SSG)

另一方面，SSG 是在构建时将 React 组件预渲染成 HTML。然后，生成的 HTML 文件直接从 CDN 或 Web 服务器提供服务。

SSG 的主要特点：

静态内容：最适合内容不经常变化的网站。例如博客、文档网站、作品集和营销网站。
初始加载时间快：由于页面是预渲染的，它们可以非常快速地提供服务，从而实现卓越的性能。
改善 SEO：与 SSR 类似，搜索引擎爬虫可以轻松索引预渲染的 HTML。
可扩展性：SSG 网站具有高度可扩展性，因为它们可以轻松地从 CDN 提供服务。
构建时间：对于拥有大量静态内容的大型网站，构建过程可能会更长。

Next.js App Router 中的 SSR 与 SSG：主要区别

Next.js App Router 为定义路由和处理数据获取引入了一种新的范式。让我们来探讨 SSR 和 SSG 在这个新环境中的实现方式以及它们之间的主要区别。

App Router 中的数据获取

App Router 使用服务器组件内的 `async/await` 语法提供了一种统一的数据获取方法。这简化了无论您使用 SSR 还是 SSG 时获取数据的过程。

服务器组件 (Server Components)：服务器组件是一种新型的 React 组件，专门在服务器上运行。这使您可以直接在组件内获取数据，而无需创建 API 路由。

示例 (SSR)：

// app/blog/[slug]/page.js
import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

在这个例子中，`getBlogPost` 函数在服务器上为每个请求获取博客文章数据。`export default async function BlogPost` 表明它是一个服务器组件。

示例 (SSG)：

// app/blog/[slug]/page.js
import { getBlogPost } from './data';

export async function generateStaticParams() {
  const posts = await getAllBlogPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

在这里，`generateStaticParams` 函数用于在构建时为所有可用的 slug 预渲染博客文章。这对于 SSG 至关重要。

缓存策略

Next.js App Router 提供了内置的缓存机制，以优化 SSR 和 SSG 的性能。理解这些机制至关重要。

数据缓存：默认情况下，在服务器组件中使用 `fetch` 获取的数据会自动被缓存。这意味着对相同数据的后续请求将从缓存中提供，从而减少了对数据源的负载。

全路由缓存：可以缓存路由的整个渲染输出，从而进一步提高性能。您可以在 `route.js` 或 `page.js` 文件中使用 `cache` 选项来配置缓存行为。

示例 (禁用缓存)：

// app/blog/[slug]/page.js

export const fetchCache = 'force-no-store';

import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

在这种情况下，`fetchCache = 'force-no-store'` 将禁用此特定路由的缓存，确保数据始终从服务器新鲜获取。

动态函数

您可以通过设置 `dynamic` 路由段配置选项，在运行时将路由声明为动态。这有助于告知 Next.js 某个路由是否使用了动态函数，并应在构建时进行不同的处理。

示例 (动态路由段)：

// app/blog/[slug]/page.js
export const dynamic = 'force-dynamic'; // 默认为静态，除非读取请求

import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

增量静态再生 (ISR)

App Router 提供了增量静态再生 (Incremental Static Regeneration, ISR) 作为一种混合方法，结合了 SSR 和 SSG 的优点。ISR 允许您静态生成页面，同时仍能以指定的时间间隔在后台更新它们。

ISR 的工作原理：

对页面的第一个请求会触发静态生成。
后续请求从静态生成的缓存中提供服务。
在后台，Next.js 在指定的时间间隔（重新验证时间）后重新生成页面。
一旦重新生成完成，缓存将更新为新版本的页面。

实现 ISR：

要启用 ISR，您需要在 `getStaticProps` 函数（在 `pages` 目录中）或 `fetch` 选项（在 `app` 目录中）中配置 `revalidate` 选项。

示例 (在 App Router 中使用 ISR)：

// app/blog/[slug]/page.js
import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export const revalidate = 60; // 每 60 秒重新验证一次

此示例配置 ISR 每 60 秒重新验证一次博客文章。这可以使您的静态内容保持新鲜，而无需重建整个站点。

选择正确的策略：实用指南

在 SSR、SSG 和 ISR 之间进行选择取决于您应用的具体需求。这是一个决策框架：

何时使用 SSR：

动态内容：内容频繁变化或个性化的应用。
实时数据：需要实时数据更新的应用。
用户特定内容：需要显示个性化产品推荐或账户信息的电商网站。
具有动态元素的 SEO 关键页面：确保即使关键页面依赖于个性化数据，也能被正确索引。

示例：一个新闻网站，文章和突发新闻警报不断更新。也适用于实时刷新的社交媒体信息流。

何时使用 SSG：

静态内容：内容不经常变化的网站。
营销网站：公司网站、登录页面和推广网站。
博客和文档网站：包含文章、教程和文档的网站。
性能关键型网站：由于其预渲染的特性，SSG 提供了卓越的性能。

示例：一个展示您的技能和项目的个人作品集网站。一家公司的“关于我们”页面，该页面很少更改。

何时使用 ISR：

内容定期更新：内容需要定期更新但不需要实时更新的网站。
平衡性能与新鲜度：当您需要 SSG 的性能优势，但又希望保持内容相对最新时。
更新频繁的大型网站：ISR 通过增量重新生成页面来避免长时间的构建。

示例：一个电商网站，其产品价格每天更新。一个每周发布几次新文章的博客。

在 Next.js App Router 中实施 SSR 和 SSG 的最佳实践

为了确保最佳性能和可维护性，在 Next.js App Router 中实施 SSR 和 SSG 时，请遵循以下最佳实践：

优化数据获取：尽量减少在服务器上获取的数据量，以减少渲染时间。使用 GraphQL 或其他技术仅获取必要的数据。
利用缓存：利用 App Router 的内置缓存机制，避免不必要的数据获取和渲染。
明智地使用服务器组件：将服务器组件用于数据获取和不需要客户端交互的逻辑。
优化图片：使用 Next.js Image 组件为不同设备和屏幕尺寸优化图片。
监控性能：使用性能监控工具来识别和解决性能瓶颈。
考虑 CDN 缓存：对于 SSG 和 ISR，利用 CDN 在全球分发您的静态资产，进一步提高性能。Cloudflare、Akamai 和 AWS CloudFront 是热门选择。
优先考虑核心 Web 指标 (Core Web Vitals)：为核心 Web 指标（最大内容绘制、首次输入延迟、累积布局偏移）优化您的应用，以改善用户体验和 SEO。

高级注意事项

Edge 函数

Next.js 还支持 Edge 函数，它允许您在边缘网络上运行无服务器函数。这对于 A/B 测试、身份验证和个性化等任务非常有用。

中间件 (Middleware)

中间件允许您在请求完成之前运行代码。您可以使用中间件来处理身份验证、重定向和功能开关等任务。

国际化 (i18n)

在构建全球应用时，国际化至关重要。Next.js 提供了对 i18n 的内置支持，使您可以轻松创建网站的本地化版本。

示例 (i18n 设置)：

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'es', 'de'],
    defaultLocale: 'en',
  },
}

真实世界示例

让我们来看一些真实世界的例子，了解不同公司如何使用 Next.js 的 SSR、SSG 和 ISR：

Netflix：为其登录页面和搜索结果使用 SSR，以确保最佳的 SEO 和快速的初始加载时间。
Vercel：为其文档网站使用 SSG，该网站内容繁重且不经常更改。
HashiCorp：为其博客利用 ISR，使他们能够定期发布新文章而无需重建整个网站。

结论

Next.js App Router 为构建现代 Web 应用提供了一个强大而灵活的平台。理解 SSR 和 SSG 之间的差异，以及 ISR 的好处，对于就您的渲染策略做出明智的决策至关重要。通过仔细考虑您应用的具体需求并遵循最佳实践，您可以优化性能、SEO 和用户体验，最终创建一个服务于全球受众的成功 Web 应用。

请记住，要持续监控应用的性能，并根据需要调整您的渲染策略。Web 开发领域在不断发展，因此紧跟最新趋势和技术对于成功至关重要。