您好,我是Next.js的新手,我知道在getStaticProps中,Next.js将在构建时预呈现此页面,而在getServerSideProps中,Next.js将使用getServerSideProps返回的数据在每次请求时预呈现此页面但是我想要一个何时使用网站的getStaticProps和getServerSideProps的例子
ztigrdn81#
使用getServerSideProps(SSR)数据是在请求时提取的,因此您的页面到第一个字节(TTFB)的时间会更长,但始终会使用最新的数据预先呈现页面。(可用于动态内容/它允许您提高SEO,因为在此方法中,数据在到达客户端之前呈现。)使用静态生成(SSG)在构建时生成的HTML会在每次请求时被重用,TTFB速度较慢,页面速度通常较快,但您需要在每次数据更新时重新构建您的应用(对于博客来说是可以接受的,但对于电子商务来说是不可以接受的)。有了增量静态再生(ISG),静态内容也可以是动态的,页面将通过基于间隔的HTTP请求在后台重建。您可以使用getStaticProps中的revalid键来指定页面更新的频率,这对于Fallback:True非常有效,并且允许您拥有(几乎)始终更新的内容。何时使用:1.**getStaticProps:**不频繁变化的数据,特别是来自云服务器的数据。(如果有动态路由,则必须与getStaticPath一起使用)。1.**重新验证:**如果数据可能发生更改,可以轻松添加到getStaticProps,并且我们可以提供缓存版本。1.**getServerSideProps:**主要用于必须在服务器上获取的频繁更改或依赖于用户身份验证的数据。当我们要获取与用户的Cookie/活动相关的数据时,因此无法缓存。
pcww981p2#
SSR不缓存任何数据。它会在每次请求时获取新数据,这通常会导致性能降低。当我们不知道用户想要什么时,应该使用SSR,否则,如果是动态内容,则使用SSG或ISG。以下是在每种情况下使用的一些示例:getServerSideProps(SSR):
NextJs v12.2.0引入了“按需再验证”,它非常强大和有用。假设您有一个新闻网站,使用旧的增量静态再生并不是最好的解决方案,设想我们将重新验证设置为1小时,这意味着我们刚刚发布的最新紧急新闻要到一个小时后才会在网站上发布,太糟糕了:(这里是按需重新验证发挥作用的地方。当您发布新文章时,您将使用API调用“reValid()”方法,并且将重新生成文章页面,而无需等待重新验证时间。
2条答案
按热度按时间ztigrdn81#
使用getServerSideProps(SSR)数据是在请求时提取的,因此您的页面到第一个字节(TTFB)的时间会更长,但始终会使用最新的数据预先呈现页面。(可用于动态内容/它允许您提高SEO,因为在此方法中,数据在到达客户端之前呈现。)
使用静态生成(SSG)在构建时生成的HTML会在每次请求时被重用,TTFB速度较慢,页面速度通常较快,但您需要在每次数据更新时重新构建您的应用(对于博客来说是可以接受的,但对于电子商务来说是不可以接受的)。
有了增量静态再生(ISG),静态内容也可以是动态的,页面将通过基于间隔的HTTP请求在后台重建。您可以使用getStaticProps中的revalid键来指定页面更新的频率,这对于Fallback:True非常有效,并且允许您拥有(几乎)始终更新的内容。
何时使用:
1.**getStaticProps:**不频繁变化的数据,特别是来自云服务器的数据。(如果有动态路由,则必须与getStaticPath一起使用)。
1.**重新验证:**如果数据可能发生更改,可以轻松添加到getStaticProps,并且我们可以提供缓存版本。
1.**getServerSideProps:**主要用于必须在服务器上获取的频繁更改或依赖于用户身份验证的数据。当我们要获取与用户的Cookie/活动相关的数据时,因此无法缓存。
pcww981p2#
SSR不缓存任何数据。它会在每次请求时获取新数据,这通常会导致性能降低。当我们不知道用户想要什么时,应该使用SSR,否则,如果是动态内容,则使用SSG或ISG。以下是在每种情况下使用的一些示例:
getServerSideProps(SSR):
静态生成(SSG):
增量静态再生(ISG):
客户端渲染(CSR):
SWR/ReactQuery+增量静态再生(SWR+ISG):
NextJs v12.2.0引入了“按需再验证”,它非常强大和有用。假设您有一个新闻网站,使用旧的增量静态再生并不是最好的解决方案,设想我们将重新验证设置为1小时,这意味着我们刚刚发布的最新紧急新闻要到一个小时后才会在网站上发布,太糟糕了:(这里是按需重新验证发挥作用的地方。当您发布新文章时,您将使用API调用“reValid()”方法,并且将重新生成文章页面,而无需等待重新验证时间。