Open tomoya06 opened 3 years ago
一般情况下,一个web页面的数据渲染完全由客户端或者浏览器端来完成。先从服务器请求,然后到页面;再通过AJAX请求到页面数据并把相应的数据填充到模板,形成完整的页面来呈现给用户。
而服务端渲染(Server-Side Rendering, SSR)则是,把数据的初始请求放在了服务端,服务端收到请求后,把数据填充到模板形成完整的页面,由服务端把渲染的完整的页面返回给客户端。这样减少了一次客户端到服务端的HTTP请求,加快了相应速度,一般用于首屏的性能优化。
与传统 SPA (单页应用程序 (Single-Page Application)) 相比,服务器端渲染 (SSR) 的优势主要在于:
使用服务器端渲染 (SSR) 时还需要有一些权衡之处。以Vue为例:
如果无需动态编译HTML,还可以考虑预渲染方案。
使用Nuxt.js可以完成vue cli项目的迁移。参考官方文档。迁移的todo demo参考这里。
可以看到生成的静态文件中,html文件已经包含了完整的DOM。下图,vscode左为SSR build,右为CSR build,Chrome展示了实际页面。
SSR
概述
一般情况下,一个web页面的数据渲染完全由客户端或者浏览器端来完成。先从服务器请求,然后到页面;再通过AJAX请求到页面数据并把相应的数据填充到模板,形成完整的页面来呈现给用户。
而服务端渲染(Server-Side Rendering, SSR)则是,把数据的初始请求放在了服务端,服务端收到请求后,把数据填充到模板形成完整的页面,由服务端把渲染的完整的页面返回给客户端。这样减少了一次客户端到服务端的HTTP请求,加快了相应速度,一般用于首屏的性能优化。
比较
与传统 SPA (单页应用程序 (Single-Page Application)) 相比,服务器端渲染 (SSR) 的优势主要在于:
使用服务器端渲染 (SSR) 时还需要有一些权衡之处。以Vue为例:
如果无需动态编译HTML,还可以考虑预渲染方案。