定义:主要用于单页面应用,大部分页面结构不变,只通过JS改变部分内容的使用(例如:react-router,vue-router)
定义:根据window.location.href找到服务端匹配的模板进行渲染,通过服务器渲染和浏览器路径决定内容
从性能和用户体验的层面来比较的话,后端路由每次访问一个新页面的时候都要向服务器发送请求,然后服务器再响应请求,这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已,没有了网络延迟,对于用户体验来说会有相当大的提升。但是页面使用浏览器自带的刷新和前进后退前端路由就会重新获取资源,这将造成较大的资源浪费。在SEO角度讲单页面应用天生对SEO不友好,因为整个页面都是通过JS渲染的,搜索引擎爬虫只能抓取到一个根节点,但是后端路由是经过后端自带的模板框架渲染的(ejs,jsp)已经在服务器拼接好了HTML对搜索引擎蜘蛛会更倾向与后端路由。
优势:
劣势:
优势:
劣势:
1.如果选择前端路由后端路由、单页面与多页面?
方案的选择要根据业务而定,如果是面向客户的产品(toC)推荐使用多页面后端路由,如果是面向企业的产品(ToB)推荐使用单页面前端路由
2.如何解决SEO和首页白屏的问题
首先要知道客户端渲染无法解决此问题,我们需要的是保证大部分三大框架优点的同时解决此问题,如果你们网站是纯静态的推荐使用预渲染,如果是根据AJAX动态更新的推荐使用NextJs/NuxtJs等服务器渲染框架
3.页面中传值问题
基本分为通过url传值和加密传值,url传值基本为 window.location.href=href/param方法修改路径或者?a=1&b=2,加密传值类似React的state传值
4.本站的技术栈选择
博客网站是及其注重SEO的因此前台选择了NextJs服务器渲染,前后端分离也更加方便了开发,后台管理采用了Vue3客户端渲染主要节约服务器资源以及更快的切换页面