前端ssr技术探究

🚀前言

随着react、angular以及vue的兴起,spa技术使得前端开发效率显著提升,同时也带来了一些问题,如不利于seo,首屏加载缓慢,造成白屏问题。那么为什么会造成这些问题,什么是spa技术,什么ssr技术呢?

spa(single page application)

简述:
    single page application单页面应用,只有一张Web页面的应用
    加载单个html页面并在用户与应用程序交互时动态更新该页面的Web应用程序
    页面初始化时加载必须的htm,js,css,所有操作都在此页面完成,通过js控制
    MVVM:经典的MVVM开发模式,前后端各负其责

缺点:

    1. 不利于SEO,SEO需花费额外的功夫 。 在spa中,首次返回的 HTML 文档中,是空节点(root),不包含内容,爬虫就无法分析你的网站有什么内容,所以就无法给你好的排名。

                  

          2.首屏渲染缓慢,造成白屏。白屏问题的本质是,在SPA中,DOM的构建者是Javascript。

            

<html>
  <head><title /></head>
  <body>
  	<div id="root"></div>
    <script src="render.js"></script>
  </body>
</html>

如上代码,在 SPA 架构中,浏览器首先接收到的这这样的一个html文件,然后继续请求一个被webpack打包好的bundle.js,执行脚本后把生成的DOM节点append到#root上。白屏的时间和请求以及解析的时间成正比,就必然造成一定时间的白屏。

服务端渲染(Server Side Rendering)

是指将单页应用(SPA)在服务器端渲染成 HTML 片段,发送到浏览器,然后交由浏览器为其绑定状态与事件,成为完全可交互页面的过程。

SSR 渲染流程:

React SSR.jpg

ssr缺点

  1. 服务器压力大,每次请求都经过服务器,服务器每次都要解析准备好这次要请求的html
  2. 只是首屏加载快,对用户已经看过的页面没有优势。
  3. 前端技术难度提升,抛弃了spa技术带来的技术优势

那么,是否spa技术的优点和ssr技术优点结合在一起,当然有!

SSR同构应用

同构现象,是视觉美学中的一个概念,就是指某个共同的元素为多个元素所共用的现象。而同构应用指的是在客户端和服务端之间完整(或部分)地共享代码的应用。通过在服务器端运行应用的JavaScript代码,页面可在发送到浏览器之前预先填充内容,所以用户甚至可以在浏览器JavaScript运行之前就看到内容。当本地的JavaScript运行时,它会接手后续的交互及导航操作,通过快速初始化加载和服务端页面渲染,让用户在单页应用程序中得到流畅的交互体验 。

https://juejin.im/post/5e15e10c6fb9a04843550f5c

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!

0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论