在真实场景中何时使用getStaticProps和getServerSide道具

20jt8wwn  于 2022-10-21  发布在  其他
关注(0)|答案(2)|浏览(361)

您好,我是Next.js的新手,我知道在getStaticProps中,Next.js将在构建时预呈现此页面,而在getServerSideProps中,Next.js将使用getServerSideProps返回的数据在每次请求时预呈现此页面
但是我想要一个何时使用网站的getStaticProps和getServerSideProps的例子

ztigrdn8

ztigrdn81#

使用getServerSideProps(SSR)数据是在请求时提取的,因此您的页面到第一个字节(TTFB)的时间会更长,但始终会使用最新的数据预先呈现页面。(可用于动态内容/它允许您提高SEO,因为在此方法中,数据在到达客户端之前呈现。)
使用
静态生成(SSG)在构建时生成的HTML会在每次请求时被重用,TTFB速度较慢,页面速度通常较快,但您需要在每次数据更新时重新构建您的应用(对于博客来说是可以接受的,但对于电子商务来说是不可以接受的)。
有了
增量静态再生(ISG)
,静态内容也可以是动态的,页面将通过基于间隔的HTTP请求在后台重建。您可以使用getStaticProps中的revalid键来指定页面更新的频率,这对于Fallback:True非常有效,并且允许您拥有(几乎)始终更新的内容。
何时使用:
1.**getStaticProps:**不频繁变化的数据,特别是来自云服务器的数据。(如果有动态路由,则必须与getStaticPath一起使用)。
1.**重新验证:**如果数据可能发生更改,可以轻松添加到getStaticProps,并且我们可以提供缓存版本。
1.**getServerSideProps:**主要用于必须在服务器上获取的频繁更改或依赖于用户身份验证的数据。当我们要获取与用户的Cookie/活动相关的数据时,因此无法缓存。

pcww981p

pcww981p2#

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

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

NextJs v12.2.0引入了“按需再验证”,它非常强大和有用。假设您有一个新闻网站,使用旧的增量静态再生并不是最好的解决方案,设想我们将重新验证设置为1小时,这意味着我们刚刚发布的最新紧急新闻要到一个小时后才会在网站上发布,太糟糕了:(这里是按需重新验证发挥作用的地方。当您发布新文章时,您将使用API调用“reValid()”方法,并且将重新生成文章页面,而无需等待重新验证时间。

相关问题