JS综合解决方案2——企业应用渲染

码农小鼓匠
250 阅读4分钟

当前的前端开发多使用Vue/React这些框架来实现。在使用这些框架的时候，我们一般用的是SPA（单页面应用），而页面之间的跳转路由，还有hash和history的区别。

这篇文章将简要就不同路由模式、不同的页面渲染方法做介绍，并对比它们之间的区别。

路由模式

说到URL路由的模式，包括两种：

  • hash路由
  • history路由

hash路由

hash路由的显著特点就是路由中会有一个#，看起来比较扎眼，和我们平时访问绝大多数网站的方式不一样

http://localhost:3000/#/about

但是，虽然URL中有#，但是我们实际上访问服务端资源的时候，路径里是不带有#的

image.png

image.png

当切换页面的时候，并不是访问了一个新的HTML，而是访问了新的js文件

image.png

image.png

而且很重要的一点是，当我们不在根路径下，刷新页面，页面内容是可以正常展示的，而且请求的URL依然不包括hash值

image.png

由于hash路由的特点，这种类型的项目不利于SEO，因为所有的页面路由其实都指向了根路径

history路由

history路由就和我们日常访问的网站的URL一样了

http://localhost:3000/about

我们如果访问根路径，其表现和hash路由是一致的，访问其他路由的时候，其实也是访问了一个新的js文件

但是当我们不在根路由下的时候，刷新页面，会有报错，这时候我们请求的路径和浏览器顶部的URL一致，这里错误就是因为我们实际只有一个index.html文件，about目录下没有index.html

image.png

要处理这个问题，需要服务端协助，添加一个简单的回退路由，也返回index.html，具体可以参考Vue官网-不同的历史记录模式

相比于hash路由，history路由有助于SEO，因为可以用真实的URL访问页面

对比总结

  • hash路由：不够美观，但不需要服务端支持，在SEO上不太友好
  • history路由：美观直接，在SEO上友好，但是需要服务端做一些额外支持

页面渲染模式

客户端渲染 CSR

现在我们大部分的网页渲染方式就是CSR，流程如下图

CSR渲染流程.jpg

  1. 客户端向服务器请求，从服务器获取了网页HTML内容
  2. 客户端根据HTML中的引用CSS和JS，向服务器发送请求获取这些文件，服务器返回CSS/JS文件
  3. 客户端调用接口，服务端接收请求后，从数据库抽取对应数据，处理后返回给客户端，客户端渲染数据，完成渲染

可以看出，客户端渲染的特点就是客户端和服务器各司其职

  • 服务器：只提供数据，减轻了服务器的压力
  • 客户端：只做数据渲染，有利于复杂交互的渲染

但是CSR的缺点也很明显

  • 由于整个页面都是JS生成的，SEO不太好
  • 首页的HTML、CSS、JS、数据分步获取，会有白屏的问题

服务端渲染 SSR

对比客户端渲染，服务端渲染的概念就是：服务端来生成页面内容，最后返回给客户端

SSR渲染流程.jpg

相比于客户端渲染，服务端渲染的特点是服务端比较忙

  • 服务器：生成完整的页面内容，返回给客户端
  • 客户端：只负责展示页面内容

因此，客户端渲染的SEO效果好，首页白屏的问题也能解决

但是，由于服务端承担了大部分的工作（数据请求、页面渲染），服务器的压力会大，而且这些工作都在服务器端处理，时间长，对用户来说体验不好

预渲染Prerender

对于公司官网、博客内容这些相对稳定的网页内容，我们可以用预渲染的思路，即在服务器上预先渲染好HTML，客户端请求时直接返回，大大提升了页面渲染的速度

avatar
文章
阅读
粉丝