next.js 在真实的场景中何时使用getStaticProps和getServerSideProps

v9tzhpje  于 2023-04-30  发布在  其他
关注(0)|答案(2)|浏览(242)

你好,我是新的下一个。js,我知道在getStaticProps Next中。js将在构建时和getServerSideProps Next中预渲染此页面。js将在每次请求时使用getServerSideProps返回的数据预呈现此页面
但我想一个例子,当使用getStaticProps和getServerSideProps的网站

wlsrxk51

wlsrxk511#

使用getServerSideProps(SSR),数据在请求时获取,因此您的页面将具有更高的第一个字节的时间(TTFB),但始终使用新数据预渲染页面。(可用于动态内容/它允许您改进您的SEO,因为在这种方法中,数据在到达客户端之前被呈现。)
使用静态生成(SSG)HTML是在构建时生成的,并将在每次请求时重复使用,TTFB速度较慢,页面通常速度较快,但每次更新数据时,您都需要重新构建应用程序(对于博客可以接受,但对于电子商务则不行)。
通过
增量静态再生(ISG)
,静态内容也可以是动态的,页面会在后台通过基于间隔的HTTP请求进行重建。您可以在getStaticProps中使用revalidate键指定页面更新的频率,这对于fallback非常有效:true,允许您(几乎)始终更新内容。
何时用途:
1.**getStaticProps:**任何不经常更改的数据,尤其是CMS中的数据。(如果存在动态路由,则必须与getStaticPaths一起使用)。
1.**revalidate:**如果数据可能会更改,getStaticProps的一个简单插件,我们可以提供缓存版本。
1.**getServerSideProps:**主要用于必须在服务器上获取的数据,这些数据经常更改或取决于用户身份验证。当我们想要获取与用户的cookie/活动相关的数据时,因此无法缓存。

lhcgjxsq

lhcgjxsq2#

SSR不缓存任何数据。它在每次请求时获取新数据,这通常会导致性能下降。SSR应该在不知道用户想要什么的情况下使用,否则在动态内容的情况下使用SSGISG。以下是在每种情况下使用的一些示例:
getServerSideProps(SSR)

  • 成功登录后的JWT
  • 用户的地理位置(页面上的内容可能取决于客户端的地理位置,因此在这种情况下使用SSR非常有用)
    静态生成(SSG)
  • 维基页面
  • 隐私政策页面
  • 一个博客,如果数据不经常更改
  • 网站设置(颜色,主题,...)
    增量静态再生(ISG)
  • 电子商务商店
  • 新闻网站
  • 数据重新验证将在服务器上进行,并将使所有访问者受益。
    客户端渲染(CSR)
  • 只有经过身份验证的用户才能访问的内容( Jmeter 板)
  • 数据重新验证将在客户端上进行,并且只会使该单个用户受益。
    SWR/ReactQuery +增量静态再生(SWR + ISG)
  • 如果您希望为当前用户即时更新数据,并为下一个访问者静态重新生成数据,则这种方法也是非常好的方法。

NextJs v12.2.0推出了“按需重新验证”,功能非常强大,非常实用。假设你有一个新闻网站,使用旧的增量静态再生不是最好的解决方案,想象一下,我们将重新验证设置为1小时,这意味着我们刚刚发布的最新紧急新闻将不会在网站上发布,直到一个小时,太糟糕了:(这里按需重新验证开始发挥作用。当您发布新文章时,您将使用API调用“revalidate()”方法,文章页面将重新生成,而无需等待重新验证时间。

相关问题