8在请求时获取数据
如果需要在请求时而不是在构建时获取数据,可以尝试服务器端渲染:
要使用服务器端渲染,您需要从页面导出 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背后的团队创建了一个名为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 文档以了解更多信息。