你好,我是新的下一个。js,我知道在getStaticProps Next中。js将在构建时和getServerSideProps Next中预渲染此页面。js将在每次请求时使用getServerSideProps返回的数据预呈现此页面但我想一个例子,当使用getStaticProps和getServerSideProps的网站
wlsrxk511#
使用getServerSideProps(SSR),数据在请求时获取,因此您的页面将具有更高的第一个字节的时间(TTFB),但始终使用新数据预渲染页面。(可用于动态内容/它允许您改进您的SEO,因为在这种方法中,数据在到达客户端之前被呈现。)使用静态生成(SSG)HTML是在构建时生成的,并将在每次请求时重复使用,TTFB速度较慢,页面通常速度较快,但每次更新数据时,您都需要重新构建应用程序(对于博客可以接受,但对于电子商务则不行)。通过增量静态再生(ISG),静态内容也可以是动态的,页面会在后台通过基于间隔的HTTP请求进行重建。您可以在getStaticProps中使用revalidate键指定页面更新的频率,这对于fallback非常有效:true,允许您(几乎)始终更新内容。何时用途:1.**getStaticProps:**任何不经常更改的数据,尤其是CMS中的数据。(如果存在动态路由,则必须与getStaticPaths一起使用)。1.**revalidate:**如果数据可能会更改,getStaticProps的一个简单插件,我们可以提供缓存版本。1.**getServerSideProps:**主要用于必须在服务器上获取的数据,这些数据经常更改或取决于用户身份验证。当我们想要获取与用户的cookie/活动相关的数据时,因此无法缓存。
lhcgjxsq2#
SSR不缓存任何数据。它在每次请求时获取新数据,这通常会导致性能下降。SSR应该在不知道用户想要什么的情况下使用,否则在动态内容的情况下使用SSG或ISG。以下是在每种情况下使用的一些示例:getServerSideProps(SSR):
NextJs v12.2.0推出了“按需重新验证”,功能非常强大,非常实用。假设你有一个新闻网站,使用旧的增量静态再生不是最好的解决方案,想象一下,我们将重新验证设置为1小时,这意味着我们刚刚发布的最新紧急新闻将不会在网站上发布,直到一个小时,太糟糕了:(这里按需重新验证开始发挥作用。当您发布新文章时,您将使用API调用“revalidate()”方法,文章页面将重新生成,而无需等待重新验证时间。
2条答案
按热度按时间wlsrxk511#
使用getServerSideProps(SSR),数据在请求时获取,因此您的页面将具有更高的第一个字节的时间(TTFB),但始终使用新数据预渲染页面。(可用于动态内容/它允许您改进您的SEO,因为在这种方法中,数据在到达客户端之前被呈现。)
使用静态生成(SSG)HTML是在构建时生成的,并将在每次请求时重复使用,TTFB速度较慢,页面通常速度较快,但每次更新数据时,您都需要重新构建应用程序(对于博客可以接受,但对于电子商务则不行)。
通过增量静态再生(ISG),静态内容也可以是动态的,页面会在后台通过基于间隔的HTTP请求进行重建。您可以在getStaticProps中使用revalidate键指定页面更新的频率,这对于fallback非常有效:true,允许您(几乎)始终更新内容。
何时用途:
1.**getStaticProps:**任何不经常更改的数据,尤其是CMS中的数据。(如果存在动态路由,则必须与getStaticPaths一起使用)。
1.**revalidate:**如果数据可能会更改,getStaticProps的一个简单插件,我们可以提供缓存版本。
1.**getServerSideProps:**主要用于必须在服务器上获取的数据,这些数据经常更改或取决于用户身份验证。当我们想要获取与用户的cookie/活动相关的数据时,因此无法缓存。
lhcgjxsq2#
SSR不缓存任何数据。它在每次请求时获取新数据,这通常会导致性能下降。SSR应该在不知道用户想要什么的情况下使用,否则在动态内容的情况下使用SSG或ISG。以下是在每种情况下使用的一些示例:
getServerSideProps(SSR):
静态生成(SSG):
增量静态再生(ISG):
客户端渲染(CSR):
SWR/ReactQuery +增量静态再生(SWR + ISG):
NextJs v12.2.0推出了“按需重新验证”,功能非常强大,非常实用。假设你有一个新闻网站,使用旧的增量静态再生不是最好的解决方案,想象一下,我们将重新验证设置为1小时,这意味着我们刚刚发布的最新紧急新闻将不会在网站上发布,直到一个小时,太糟糕了:(这里按需重新验证开始发挥作用。当您发布新文章时,您将使用API调用“revalidate()”方法,文章页面将重新生成,而无需等待重新验证时间。