JavaScript内核与高级编程之：`Next.js`的`Static Generation`：其在页面生成中的工作原理。

各位前端同仁，大家好！我是你们的老朋友，今天咱们来聊聊 Next.js 的一个核心概念——静态生成 (Static Generation)，简称 SG。这玩意儿听起来高大上，其实说白了，就是把网页提前做好，用户来的时候直接上菜，速度杠杠的！

开胃菜：静态生成的必要性

在咱们深入 SG 的原理之前，先得明白它为什么这么重要。想想传统的前端开发模式，用户请求一个页面，服务器收到请求后，才开始拼凑 HTML，然后返回给浏览器。这中间要消耗不少时间，特别是页面内容复杂的时候，用户体验可想而知。

静态生成就不一样了，它在构建时就把页面内容生成好了，直接以 HTML 文件的形式存储在服务器上。用户请求页面时，服务器直接把这个 HTML 文件发送给浏览器，省去了动态生成页面的时间，速度自然快得多。

正餐：静态生成的三种姿势

Next.js 提供了三种静态生成的方式，每种方式都有自己的适用场景：

1. 无数据依赖的静态生成 (Static Generation without Data)
2. 预渲染时获取数据并静态生成 (Static Generation with Data – getStaticProps)
3. 动态路由的静态生成 (Static Generation with Dynamic Routes – getStaticPaths and getStaticProps)

咱们一个个来分析。

1. 无数据依赖的静态生成 (Static Generation without Data)

这是最简单的一种方式，适用于那些不需要从外部获取数据的页面，比如关于我们、联系我们、条款协议等静态内容。

代码示例：

// pages/about.js
function AboutPage() {
  return (
    <div>
      <h1>关于我们</h1>
      <p>我们是一家致力于提供优质服务的高科技公司。</p>
    </div>
  );
}

export default AboutPage;

在这个例子中，AboutPage 组件没有任何数据依赖，它只是简单地渲染一些静态文本。Next.js 在构建时会自动生成 about.html 文件，用户访问 /about 路由时，服务器直接返回这个文件。

2. 预渲染时获取数据并静态生成 (Static Generation with Data – getStaticProps)

如果你的页面需要从外部获取数据，比如从 API 获取商品列表、博客文章等，那就需要使用 getStaticProps 函数。这个函数会在构建时运行，获取数据并将其作为 props 传递给页面组件。

代码示例：

// pages/products.js
function ProductsPage({ products }) {
  return (
    <div>
      <h1>商品列表</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name} - ${product.price}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  // 模拟从 API 获取数据
  const products = [
    { id: 1, name: "Product A", price: 20 },
    { id: 2, name: "Product B", price: 30 },
    { id: 3, name: "Product C", price: 40 },
  ];

  return {
    props: {
      products,
    },
  };
}

export default ProductsPage;

在这个例子中，getStaticProps 函数在构建时被调用，它模拟从 API 获取商品数据，并将数据作为 products prop 传递给 ProductsPage 组件。Next.js 会根据这些数据生成 products.html 文件。

注意：getStaticProps 只能在 pages 目录下的文件中使用。

getStaticProps 的工作流程：

1. Next.js 在构建时检测到页面组件导出了 getStaticProps 函数。
2. Next.js 运行 getStaticProps 函数，获取数据。
3. Next.js 将获取到的数据作为 props 传递给页面组件。
4. Next.js 使用页面组件和 props 生成 HTML 文件。

getStaticProps 的优点：

• 性能优化： 数据在构建时获取，页面加载速度快。
• SEO 友好： 搜索引擎可以抓取静态 HTML 内容。
• 数据安全： 可以在服务器端获取数据，避免在客户端暴露敏感信息。

3. 动态路由的静态生成 (Static Generation with Dynamic Routes – getStaticPaths and getStaticProps)

如果你的页面路由是动态的，比如博客文章的 URL 包含文章的 ID，那就需要使用 getStaticPaths 和 getStaticProps 配合使用。

getStaticPaths 函数定义了所有可能的路由参数值，Next.js 会根据这些参数值生成对应的 HTML 文件。getStaticProps 函数根据路由参数值获取数据，并将其作为 props 传递给页面组件。

代码示例：

// pages/posts/[id].js
function PostPage({ post }) {
  if (!post) {
    return <div>加载中...</div>; // 或者显示 404 页面
  }

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

export async function getStaticPaths() {
  // 模拟从数据库获取所有文章的 ID
  const postIds = [1, 2, 3];

  const paths = postIds.map((id) => ({
    params: { id: id.toString() },
  }));

  return {
    paths,
    fallback: false, // 如果路径不存在，返回 404 页面
  };
}

export async function getStaticProps({ params }) {
  const { id } = params;

  // 模拟从 API 获取文章数据
  const post = {
    id: parseInt(id),
    title: `文章 ${id}`,
    content: `这是文章 ${id} 的内容。`,
  };

  // 如果文章不存在，返回 null
  if (!post) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      post,
    },
  };
}

export default PostPage;

在这个例子中，getStaticPaths 函数定义了所有可能的文章 ID，getStaticProps 函数根据文章 ID 获取文章数据，并将数据作为 post prop 传递给 PostPage 组件。Next.js 会根据这些数据生成 posts/1.html、posts/2.html、posts/3.html 文件。

getStaticPaths 的工作流程：

1. Next.js 在构建时检测到页面组件导出了 getStaticPaths 函数。
2. Next.js 运行 getStaticPaths 函数，获取所有可能的路由参数值。
3. Next.js 针对每个路由参数值，运行 getStaticProps 函数，获取数据。
4. Next.js 将获取到的数据作为 props 传递给页面组件。
5. Next.js 使用页面组件和 props 生成对应的 HTML 文件。

getStaticPaths 的 fallback 属性：

fallback 属性决定了当用户访问一个没有预先生成的路由时，Next.js 的行为。它可以有三个值：

• false：如果路径不存在，返回 404 页面。
• true：如果路径不存在，Next.js 会在后台生成页面，并返回一个 loading 状态的页面。用户稍后再次访问该页面时，会看到完整的内容。
• 'blocking'：如果路径不存在，Next.js 会在服务器端生成页面，并直接返回给用户。用户会看到一个完整的页面，但首次访问可能会比较慢。

表格总结：三种静态生成方式的对比

特性	无数据依赖的静态生成	预渲染时获取数据并静态生成 (getStaticProps)	动态路由的静态生成 (getStaticPaths and getStaticProps)
数据依赖性	无	有	有
适用场景	静态内容页面	需要从外部获取数据的页面	动态路由的页面，例如博客文章、商品详情等
函数	无	getStaticProps	getStaticPaths 和 getStaticProps
构建时机	构建时	构建时	构建时
性能	最佳	良好	良好（取决于数据获取速度和 fallback 设置）

甜点：静态生成的注意事项

• 数据更新： 静态生成的内容在构建时生成，如果数据发生变化，需要重新构建才能更新页面。可以使用 Incremental Static Regeneration (ISR) 来解决这个问题，它允许你在不重新构建整个应用的情况下，定期更新静态页面。
• API 调用： 在 getStaticProps 和 getStaticPaths 中进行的 API 调用应该尽可能快，避免阻塞构建过程。
• 错误处理： 在 getStaticProps 和 getStaticPaths 中进行错误处理，例如当数据不存在时，返回 404 页面。
• 环境变量： 可以在 getStaticProps 和 getStaticPaths 中访问环境变量，但要注意不要在客户端暴露敏感信息。
• getServerSideProps 的区别： 静态生成适合于内容变化不频繁的页面，而 getServerSideProps 适合于需要实时数据的页面。getServerSideProps 在每次请求时都会重新渲染页面，性能不如静态生成。

实战演练：一个简单的博客网站

为了巩固咱们今天所学的知识，咱们来创建一个简单的博客网站，包含文章列表页面和文章详情页面。

1. 创建项目：

npx create-next-app my-blog
cd my-blog

2. 定义文章数据：

为了简单起见，咱们把文章数据存储在一个 JSON 文件中。

// data/posts.json
[
  { "id": 1, "title": "Next.js 入门教程", "content": "这是一篇关于 Next.js 入门的教程。" },
  { "id": 2, "title": "React Hooks 详解", "content": "这是一篇关于 React Hooks 的详细讲解。" },
  { "id": 3, "title": "JavaScript 异步编程", "content": "这是一篇关于 JavaScript 异步编程的文章。" }
]

3. 创建文章列表页面：

// pages/index.js
import posts from '../data/posts.json';
import Link from 'next/link';

function HomePage({ posts }) {
  return (
    <div>
      <h1>文章列表</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/posts/${post.id}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  return {
    props: {
      posts,
    },
  };
}

export default HomePage;

4. 创建文章详情页面：

// pages/posts/[id].js
import posts from '../../data/posts.json';

function PostPage({ post }) {
  if (!post) {
    return <div>文章不存在</div>;
  }

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

export async function getStaticPaths() {
  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const { id } = params;
  const post = posts.find((post) => post.id === parseInt(id));

  return {
    props: {
      post,
    },
  };
}

export default PostPage;

5. 运行项目：

npm run dev

打开浏览器，访问 http://localhost:3000，你就可以看到文章列表页面。点击文章标题，就可以进入文章详情页面。

这个例子演示了如何使用 getStaticProps 和 getStaticPaths 来创建一个简单的博客网站。你可以根据自己的需求，扩展这个例子，例如从数据库获取文章数据，添加评论功能等。

总结：

静态生成是 Next.js 中一个非常重要的概念，它可以显著提高页面加载速度，提升用户体验。掌握静态生成的原理和使用方法，对于开发高性能的 Next.js 应用至关重要。

希望今天的讲座对大家有所帮助！下次有机会再和大家分享其他前端技术。再见！