一文讲解前端路由、后端路由、单页面应用、多页面应用
前端路由
定义：主要用于单页面应用，大部分页面结构不变，只通过JS改变部分内容的使用（例如：react-router,vue-router）
- 优点：用户体验好，不需要每次都从服务器全部获取，在切换页面时快速展现给用户客户端渲染可以减轻服务器压力
- 缺点：使用浏览器的前进，后退键的时候会重新发送请求，无法合理地利用缓存刷新无法记住之前滚动的位置（需要配合生命周期手动调整），如果使用客户端渲染不利于SEO，文件大时会出现首页白屏
后端路由
定义:根据window.location.href找到服务端匹配的模板进行渲染，通过服务器渲染和浏览器路径决定内容
- 优点:可以方便的使用AJAX或者服务器渲染最新的HTML对SEO友好
- 缺点:文件复用不灵活,如果通过后端语言模板实现组件化就要前后端不分离
前后端路由对比
从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。但是页面使用浏览器自带的刷新和前进后退前端路由就会重新获取资源，这将造成较大的资源浪费。在SEO角度讲单页面应用天生对SEO不友好，因为整个页面都是通过JS渲染的，搜索引擎爬虫只能抓取到一个根节点，但是后端路由是经过后端自带的模板框架渲染的（ejs,jsp）已经在服务器拼接好了HTML对搜索引擎蜘蛛会更倾向与后端路由。
单页面应用
优势：
- 实际上并不存在页面切换问题，因为整个网站只有一个HTML，通过预先加载好的JS控制页面显示会更流畅，而且可以附加各种动画和过度效果，用户体验更好。
- 有大量脚手架已经，三大框架的成长使得单页面前后端分离已经成为趋势(--本观点写于2021.08.12)
劣势:
- 还是上面重复的SEO问题只通过JS切换对SEO不友好
- 所有页面放到一个HTML中通过JS切换，如果测试有误对漏掉一些BUG很可能影响后续功能
- 体积较大，首次加载时间较长，首页白屏问题
多页面应用
优势:
- 逻辑清楚页面直接几乎没有相互影响
- 单个页面体积小，加载速度快
劣势:
- 代码冗余
- 页面切换体验不好
总结
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客户端渲染主要节约服务器资源以及更快的切换页面