请求时获取数据

如果您需要在请求时而不是构建时获取数据，您可以尝试服务器端渲染

要使用服务器端渲染，您需要从页面导出getServerSideProps，而不是getStaticProps。

使用 getServerSideProps

这是getServerSideProps的起始代码。我们的博客示例不需要它，因此我们不会实现它。

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    },
  };
}

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

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

客户端渲染

如果您不需要预渲染数据，您也可以使用以下策略（称为客户端渲染）

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

这种方法非常适合用户仪表板页面等。因为仪表板是私有的、用户特定的页面，所以 SEO 不相关，并且页面不需要预渲染。数据经常更新，这需要请求时数据获取。

SWR

Next.js 团队创建了一个用于数据获取的 React Hook，名为 SWR。如果您在客户端获取数据，我们强烈推荐它。它处理缓存、重新验证、焦点跟踪、按间隔重新获取等等。我们不会在此处介绍细节，但这是一个使用示例

import useSWR from 'swr';
 
function Profile() {
  const { data, error } = useSWR('/api/user', fetch);
 
  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>hello {data.name}!</div>;
}

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

就是这样！

在下一课中，我们将使用动态路由为每篇博客文章创建页面。

同样，您可以在数据获取文档中获取关于 getStaticProps 和 getServerSideProps 的深入信息。