Frontend Academy · 课时

SSG、SSR 与 ISR

Q: 「SSG、SSR 与 ISR」这节课中我会学到什么？

在构建时静态生成页面，按请求在服务器端渲染页面，或按计划重新验证缓存页面，实现增量静态再生成。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在构建时静态生成页面，按请求在服务器端渲染页面，或按计划重新验证缓存页面，实现增量静态再生成。

SSG、SSR 与 ISR 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

三种渲染策略

Next.js 支持三种页面渲染方式：SSG（静态网站生成）、SSR（服务器端渲染）和 ISR（增量静态再生成）。每种方式都有不同的权衡。

SSG——构建时生成

页面会在构建时生成为静态 HTML，并通过 CDN 提供服务。这是可能达到的最快交付速度。适用于：营销页面、博客和文档。

页面路由器中的 SSG

从页面中导出 getStaticProps。该函数在构建时运行，并向组件提供属性。

// pages/blog/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post } };
}

应用路由器中的 SSG

默认情况下，异步服务器组件会在构建时获取数据。对于动态路由，请使用 generateStaticParams。

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map(p => ({ slug: p.slug }));
}

export default async function Post({ params }) {
  const post = await fetchPost(params.slug);
  return <article>{post.body}</article>;
}

SSR——按请求生成

页面会在每次请求时渲染。当内容因用户而异，或变化过于频繁而不适合缓存时，请使用此方式。

页面路由器中的 SSR

导出 getServerSideProps。

// pages/dashboard.tsx
export async function getServerSideProps({ req }) {
  const userId = req.cookies.userId;
  const data = await fetchUserDashboard(userId);
  return { props: { data } };
}

应用路由器中的 SSR

使用 dynamic = 'force-dynamic'，或读取 Cookie/请求头来强制按请求渲染（这会自动退出静态渲染）。

// app/dashboard/page.tsx
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const userId = cookies().get('userId')?.value;
  const data = await fetchUserDashboard(userId);
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

// Or explicit:
export const dynamic = 'force-dynamic';

ISR——兼得两者优势

ISR：提供静态页面，但每隔 N 秒在后台重新生成。它结合了 SSG 的速度和相对新鲜的数据。

页面路由器中的 ISR

向 getStaticProps 添加 revalidate。

export async function getStaticProps() {
  const posts = await fetchPosts();
  return {
    props: { posts },
    revalidate: 60  // regenerate at most every 60 seconds
  };
}

应用路由器中的 ISR

在 fetch 选项中使用 next: { revalidate: N }，或在页面中设置 export const revalidate = N。

// Option A: per fetch
const posts = await fetch('https://api/posts', { next: { revalidate: 60 } })
  .then(r => r.json());

// Option B: whole page
export const revalidate = 60;

export default async function Page() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return <Feed posts={posts} />;
}

按需重新验证

手动触发重新生成（例如通过 CMS webhook），无需等待时间间隔结束。

// pages/api/revalidate.ts (Pages) or app/api/revalidate/route.ts (App)
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(req) {
  const { slug } = await req.json();
  revalidatePath(`/blog/${slug}`);
  return Response.json({ revalidated: true });
}

选择合适的策略

当数据很少变化时（营销页面、文档、博客）使用 SSG。当数据偶尔更新时（由 CMS 驱动的网站、电商列表）使用 ISR。对于按用户提供的内容（控制面板、账户页面）使用 SSR。

快速检查

ISR（增量静态再生成）相比纯 SSG 多做了什么？

回顾：SSG、SSR、ISR

SSG：构建时生成，速度最快，内容固定。SSR：按请求生成，内容动态，速度较慢。ISR：SSG 加上按计划进行的后台重新生成——内容相对新鲜且速度快。页面路由器使用 getStaticProps/getServerSideProps。应用路由器使用带有 fetch revalidate 的异步服务器组件，或使用页面级的 revalidate 常量。使用 revalidatePath/Tag 进行按需更新。

常见问题解答

「SSG、SSR 与 ISR」课时是免费的吗？

是的 — 「SSG、SSR 与 ISR」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「SSG、SSR 与 ISR」这节课中我会学到什么？

在构建时静态生成页面，按请求在服务器端渲染页面，或按计划重新验证缓存页面，实现增量静态再生成。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「SSG、SSR 与 ISR」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy