SSR
服务器渲染就是向后端服务器请求数据,然后在后端生成完整的首屏html页面返回给浏览器,
服务器渲染返回给浏览器的是已经获取了异步数据并执行js脚本的最终html页面,网络爬虫可以抓取到完整的页面信息,
SSR另一个很大的作用是加速首屏渲染,
因为无需等待所有的js脚本下载并执行,所以用户会很快看到渲染完成的首屏页面。
什么是 SSR
SSR 顾名思义就是 Server-Side Render, 即服务端渲染。原理很简单,就是服务端直接渲染出 HTML 字符串模板,浏览器可以直接解析该字符串模版显示页面,因此首屏的内容不再依赖 Javascript 的渲染(CSR - 客户端渲染)。
SSR 的核心优势:
首屏加载时间:因为是 HTML 直出,浏览器可以直接解析该字符串模版显示页面。
SEO 友好:正是因为服务端渲染输出到浏览器的是完备的 html 字符串,使得搜索引擎 能抓取到真实的内容,利于 SEO。
SSR 需要注意的问题:
虽然 SSR 能快速呈现页面,但是在 UI 框架(比如 React)加载成功之前,页面是没法进行 UI 交互的。
TTFB (Time To First Byte),即第一字节时间会变长,因为 SSR 相对于 CSR 需要在服务端渲染出更对的 HTML 片段,因此加载时间会变长。
更多的服务器端负载。由于 SSR 需要依赖 Node.js 服务渲染页面,显然会比仅仅提供静态文件的 CSR 应用需要占用更多服务器 CPU 资源。以 React 为例,它的 renderToString() 方法是同步 CPU 绑定调用,这就意味着在它完成之前,服务器是无法处理其他请求的。因此在高并发场景,需要准备相应的服务器负载,并且做好缓存策略。