美文网首页
Next.js预渲染的两种形式——静态生成和服务端渲染

Next.js预渲染的两种形式——静态生成和服务端渲染

作者: Marshall3572 | 来源:发表于2021-12-21 12:04 被阅读0次

    Two froms of Pre-rendering of Next.js

    Next.js有两种预渲染形式:静态生成(Static Generation)和服务端渲染(Server-side Rendering)。 不同之处在于他们为页面生成HTML代码的时间。

    • 静态生成是一种在build阶段生成html的预渲染方式。预渲染的HTML的代码会被每个request复用
    • 服务端渲染是每次请求都生产新HTML

    我们在 Next.js 中可以选择任意一种预渲染方式,亦或是混合使用——大多数时候用静态生成,其他用服务端渲染。

    When to Use Static Generation v.s. Server-side Rendering

    那我们该如何选择这两种渲染方式呢?
    任何时候都推荐使用静态生成(with & without data) ,因为我们的页面只需要build一次并使用CDN,这样就比使用server-render每个request都要渲染页面快得多。

    你应该问问你自己:“我能在用户请求前预渲染这个页面吗?”
    如果答案是“可以”,那就使用静态生成(static generation)吧

    相反,如果你不能在用户请求前预渲染这个页面,比如这个页面需要频繁的更新数据,而且页面内容每次都会随request变化,那这个时候我们就应该使用服务端渲染(Server-Side Rendering),这样会慢一些,但是预渲染的页面可以实时更新。
    或者你可以跳过预渲染,使用客户端的Javascript来填充数据。

    相关文章

      网友评论

          本文标题:Next.js预渲染的两种形式——静态生成和服务端渲染

          本文链接:https://www.haomeiwen.com/subject/kmqxqrtx.html