Next.js (9) | 青训营笔记

33 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天

8在请求时获取数据

如果需要在请求时而不是在构建获取数据,可以尝试服务器端渲染
image.png
要使用服务器端渲染,您需要从页面导出 getServerSideProps 而不是 getStaticProps

用getServerSideProps

这是getServerSideProps的启动代码。对于我们的博客示例来说,这不是必需的,因此我们不会实现它。

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

由于 getServerSideProps 是在请求时调用的,因此其参数 (context) 包含特定于请求的参数。
仅当需要预呈现必须在请求时获取其数据的页面时,才应使用 getServerSideProps。到第一个字节的时间(TTFB)将比getStaticProps慢,因为服务器必须计算每个请求的结果,并且如果没有额外的配置,CDN无法缓存结果。

客户端呈现

如果不需要预呈现数据,还可以使用以下策略(称为客户端呈现):

  • 静态生成(预呈现)不需要外部数据的页面部分。
  • 当页面加载时,使用 JavaScript 从客户端获取外部数据并填充其余部分。

image.png
例如,此方法适用于用户仪表板页面。由于仪表板是特定于用户的私有页面,因此 SEO 不相关,并且不需要预先呈现该页面。数据经常更新,这需要请求时的数据提取。

SWR

Next.js背后的团队创建了一个名为SWR的React钩子,用于数据获取。如果您在客户端获取数据,我们强烈建议您这样做。它处理缓存、重新验证、焦点跟踪、间隔重新获取等。我们不会在这里介绍详细信息,但这里有一个用法示例:

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 文档以了解更多信息。

就是这样!