在现实场景中何时使用 getStaticProps 和 getServerSideProps

2024-06-26

您好,我是 Next.js 的新手,我知道在 getStaticProps 中 Next.js 将在构建时预渲染此页面,在 getServerSideProps 中 Next.js 将使用 getServerSideProps 返回的数据在每个请求上预渲染此页面

但我想要一个何时对网站使用 getStaticProps 和 getServerSideProps 的示例


With 获取服务器端属性(SSR)数据是在请求时获取的,因此您的页面将具有更高的首字节时间 (TTFB),但始终会使用新数据预渲染页面。(可用于动态内容/它允许您改进 SEO,如此方法会在数据到达客户端之前呈现数据。)

With 静电产生(SSG)HTML 在构建时生成,并将在每个请求中重用,TTFB 速度较慢,页面通常速度更快,但每次更新数据时都需要重新构建应用程序(对于博客来说可以接受,但对于博客来说则不然)电子商务)。

With 增量静态再生 (ISG)静态内容也可以是动态的,页面将通过基于间隔的 HTTP 请求在后台重建。您可以使用 getStaticProps 中的 revalidate 键指定页面更新的频率,这与 Fallback : true 配合使用非常有效,并允许您(几乎)始终更新内容。

何时使用:

  1. 获取静态属性:任何不经常更改的数据,尤其是来自 CMS 的数据。 (如果存在动态路由,则必须与 getStaticPaths 一起使用)。

  2. 重新验证:如果数据可能发生变化,那么 getStaticProps 的一个简单附加组件,并且我们可以提供缓存版本。

  3. 获取服务器端属性:主要适用于必须在服务器上获取经常更改或取决于用户身份验证的数据。当我们想要获取与用户的 cookie/活动相关且因此无法缓存的数据时。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在现实场景中何时使用 getStaticProps 和 getServerSideProps 的相关文章

随机推荐