logo头像

叩首问路,码梦为生

简单聊一下服务端渲染

写在前面

Server Slide Rendering 服务端渲染,又简写为 SSR,他一般被用在我们的 SPA(Single-Page Application) 中,即单页应用。

为什么要用SSR?

首先我们需要知道 SSR 对于 SPA 的好处优势是什么。

  • 更好的 SEO(Search Engine Optimization)SEO 是搜索引擎优化,简而言之就是针对百度这些搜索引擎,可以让他们搜索到我们的应用。这里可能会有误区,就是我也可以在 index.html 上写 SEO ,为什么会不起作用。因为 React、Vue 的原理是客户端渲染,通过浏览器去加载 js、css,有一个时间上的延迟,而搜索引擎不会管你的延迟,他就觉得你如果没加载出来就是没有的,所以是搜不到的。
  • 解决一开始的白屏渲染,上面讲了 React 的渲染原理,而SSR服务端渲染是通过服务端请求数据,因为服务端内网的请求快,性能好所以会更快的加载所有的文件,最后把下载渲染后的页面返回给客户端。

服务端渲染VS客户端渲染

客户端渲染路线:

  1. 请求一个 html
  2. 服务端返回一个 html
  3. 浏览器下载 html 里面的 js/css 文件
  4. 等待 js 文件下载完成
  5. 等待 js 加载并初始化完成
  6. js 代码终于可以运行,由js代码向后端请求数据( ajax/fetch )
  7. 等待后端数据返回
  8. react-dom ( 客户端 )从无到完整地,把数据渲染为响应页面

服务端渲染路线:

  1. 请求一个 html
  2. 服务端请求数据( 内网请求快 )
  3. 服务器初始渲染(服务端性能好,较快)
  4. 服务端返回已经有正确内容的页面
  5. 客户端请求 js/css 文件
  6. 等待 js 文件下载完成
  7. 等待 js 加载并初始化完成
  8. react-dom ( 客户端 )把剩下一部分渲染完成( 内容小,渲染快 )

从上面两者的渲染路线可以看到,其主要区别就在于,客户端从无到有的渲染,服务端是先在服务端渲染一部分,在再客户端渲染一小部分

参考文章

React服务端渲染+pm2自动化部署

支付宝打赏 微信打赏

听说赞过就能年薪百万