Next.js-渲染模式

标签

Next.js

字数

402 字

阅读时间

2 分钟

现代 web 常见的渲染模式

1. SSR Server-Side Rendering 服务端渲染

SSR 也就是服务端渲染好 html，然后当浏览器收到 http 响应时，接收到的 html 文件上就有页面上需要显示内容，一般只需要浏览器渲染完成 html 时，就可以看到页面内容，不需要去等待 js 的下载和执行，一般来说响应时间会比较短，正常网速下，页面显示时间短，用户等待时间少。但是跳转页面时还是 SSR，路由切换时间就很长，且页面公共元素不能复用。

2. CSR Client-Side Rendering 客户端渲染

CSR 是当浏览器收到 http 响应时，页面仍然是白屏，需要等待一段时间加载完成关键资源，再去通过 js 代码渲染页面内容，一般来说，就算是正常网速，页面首次显示页面时间也比较长，与关键资源的体积大小有关，一般来说同等网速比 SSR 渲染时间慢个几倍都比较正常。但跳转页面时因为资源早就下载好了，渲染页面就很快，路由切换时间就很短，页面公共元素能复用。

3. 同构渲染

同构渲染 就是首屏时 SSR 渲染，跳转其他页面时 CSR 渲染，这样既实现了首屏速度快，切换页面体验也很好。