静态站点生成 (SSG)

概述

静态站点生成（Static Site Generation，简称SSG）是Next.js中的一种渲染方式，它允许你在构建时生成静态HTML文件，而不是在每次请求时动态生成。这种方式非常适合内容不经常变化的网站，如博客、文档站点等。SSG不仅提高了页面加载速度，还减少了服务器的负载，因为静态文件可以直接从CDN（内容分发网络）提供。

理论解释

什么是静态站点生成？

静态站点生成是指在构建时（build time）生成静态HTML文件的过程。这些文件可以在用户请求之前预先生成，并在请求时直接提供给用户。这种方式与服务端渲染（SSR）不同，SSR是在每次请求时动态生成HTML。

为什么使用SSG？

1. 性能提升：静态文件可以被缓存，从而加快页面加载速度。
2. 减少服务器负载：静态文件不需要服务器进行复杂的计算，减少了服务器的压力。
3. 更好的SEO：静态HTML文件更容易被搜索引擎抓取和索引。

何时使用SSG？

SSG适用于以下场景：

• 内容不经常变化的页面（如博客文章、产品页面）。
• 需要快速加载的页面。
• 需要SEO优化的页面。

代码示例

使用 getStaticProps 进行静态生成

getStaticProps 是Next.js中用于静态生成页面的一个函数。它允许你在构建时获取数据，并将数据传递给页面组件。

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post({ post }) {
  const router = useRouter();

  // 如果页面在构建时没有生成，显示加载状态
  if (router.isFallback) {
    return <div>Loading...</div>;
  }

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

// 在构建时获取数据
export async function getStaticProps({ params }) {
  // 假设我们有一个API来获取帖子数据
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
    // 如果数据在10秒后过期，重新生成页面
    revalidate: 10,
  };
}

// 定义哪些路径需要在构建时生成
export async function getStaticPaths() {
  // 假设我们有一个API来获取所有帖子的ID
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  // 获取所有帖子的ID
  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return {
    paths,
    fallback: true, // 允许生成未在构建时生成的路径
  };
}

解释

1. getStaticProps: 在构建时获取数据，并将数据作为props传递给页面组件。
2. getStaticPaths: 定义哪些路径需要在构建时生成。fallback: true 允许生成未在构建时生成的路径。
3. revalidate: 设置页面的重新验证时间，如果数据在指定时间内过期，页面将在后台重新生成。

实践练习

练习1：创建一个静态博客页面

1. 创建一个新的Next.js项目。
2. 在 pages/blog/[slug].js 中实现一个博客页面，使用 getStaticProps 和 getStaticPaths 从API获取博客文章数据。
3. 在 pages/index.js 中创建一个博客列表页面，列出所有博客文章的标题和摘要。

练习2：实现增量静态再生

1. 在练习1的基础上，为博客文章页面添加 revalidate 选项，设置重新验证时间为10秒。
2. 修改API，使其在10秒后返回不同的数据，观察页面的变化。

总结

静态站点生成是Next.js中一种强大的渲染方式，适用于内容不经常变化的页面。通过使用 getStaticProps 和 getStaticPaths，你可以在构建时生成静态HTML文件，从而提高页面加载速度和SEO效果。通过实践练习，你可以更好地理解和掌握SSG的使用方法。