请求时获取数据

如果你需要在 请求时 而非构建时获取数据，可以尝试使用 服务端渲染 (Server-side Rendering)：

要使用 服务端渲染 (Server-side Rendering)，你需要从页面中导出 getServerSideProps 而非 getStaticProps。

使用 getServerSideProps

以下是 getServerSideProps 的初始代码。由于我们的博客示例不需要此功能，因此不会实现它。

export async function getServerSideProps(context) {
  return {
    props: {
      // 组件的 props
    },
  };
}

由于 getServerSideProps 在请求时被调用，其参数 (context) 包含与请求相关的特定参数。

仅当你需要预渲染一个必须在请求时获取数据的页面时，才应使用 getServerSideProps。首字节时间 (TTFB) 会比 getStaticProps 慢，因为服务器必须在每次请求时计算结果，并且结果无法通过 CDN 缓存（除非进行额外配置）。

客户端渲染 (Client-side Rendering)

如果 不需要 预渲染数据，你也可以使用以下策略（称为 客户端渲染 (Client-side Rendering)）：

• 静态生成（预渲染）不需要外部数据的页面部分
• 当页面加载时，通过客户端 JavaScript 获取外部数据并填充剩余部分

这种方案非常适合用户仪表盘等页面。由于仪表盘是私有的用户专属页面，SEO 无关紧要，且页面不需要 预渲染 (pre-rendering)。数据会频繁更新，因此需要请求时获取数据。

SWR

Next.js 团队创建了一个名为 SWR 的 React 数据获取钩子。如果你需要在客户端获取数据，我们强烈推荐使用它。它处理了缓存、重新验证、焦点追踪、间隔重试等功能。此处不展开细节，以下是使用示例：

import useSWR from 'swr';
 
function Profile() {
  const { data, error } = useSWR('/api/user', fetch);
 
  if (error) return <div>加载失败</div>;
  if (!data) return <div>加载中...</div>;
  return <div>你好 {data.name}!</div>;
}

查看 SWR 文档 了解更多信息。

总结

下一课我们将使用 动态路由 (dynamic routes) 为每篇博客文章创建独立页面。

你可以通过 数据获取文档 深入了解 getStaticProps 和 getServerSideProps。