请求时获取数据

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

要使用服务器端渲染，你需要从你的页面中导出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的深入信息。