← 返回渲染测试

静态渲染 (SSG)

📄 什么是静态渲染？

静态渲染（Static Site Generation，SSG）是在构建时预先渲染页面，生成静态 HTML 文件。 所有用户访问时都会获得相同的 HTML，提供最快的加载速度。

核心特性：

  • 在 next build 时渲染
  • 生成静态 HTML，存储在 .next/server/app/
  • 所有用户共享同一份 HTML
  • 可以部署到任何静态托管服务（Vercel、Netlify、GitHub Pages）
  • 性能最优，TTFB 最快

📊 静态数据

标题：

静态渲染页面

描述：

这个页面在构建时生成，内容不会改变

构建时间：

2025-12-17T09:54:12.782Z

访问次数（构建时生成）：

912

🧪 如何验证静态渲染？

  1. 查看构建输出：
    pnpm build

    在构建日志中，这个页面会显示为：
    ○ /rendering-test/static
    ○ 表示静态生成

  2. 多次刷新页面：

    构建时间和访问次数始终保持不变（构建时确定）

  3. 查看页面源代码：

    右键 → 查看页面源代码，可以看到完整的 HTML（包括数据）

  4. 查看终端日志：

    [STATIC RENDERING] 日志只在构建时打印， 访问页面时不会打印新的日志

  5. 检查 .next 目录：
    cat .next/server/app/rendering-test/static/page.js

    可以看到预渲染的内容

💡 适用场景

✅ 适合

  • 营销页面、落地页
  • 博客文章、文档
  • 关于我们、帮助中心
  • 产品展示页面
  • 内容不常变化的页面

❌ 不适合

  • 用户个性化内容
  • 实时数据（股票、新闻）
  • 需要认证的页面
  • 频繁更新的内容
  • 依赖请求数据的页面

💻 代码示例

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

// 默认就是静态渲染（无需额外配置）
export default async function BlogPost({ params }) {
  // 这个数据获取在构建时执行
  const post = await fetchPost(params.slug);
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

// 如果有动态路由，需要提供所有可能的路径
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// 明确指定为静态渲染（可选）
export const dynamic = 'force-static';

⚖️ 优缺点

✅ 优点

  • •性能最优：预渲染的 HTML，TTFB 最快
  • •SEO 友好：完整的 HTML，搜索引擎可直接索引
  • •成本低：可部署到静态托管，无需服务器
  • •可缓存：可以通过 CDN 缓存，全球加速
  • •可靠性高：无服务器依赖，不会宕机

❌ 缺点

  • •内容不变：构建后内容不会自动更新
  • •构建时间长：页面多时，构建可能很慢
  • •无法个性化：所有用户看到相同内容
  • •更新麻烦：需要重新构建和部署
  • •不适合实时：无法展示实时数据