请求时获取数据

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

要使用服务器端渲染，你需要导出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的详细信息。