服务端渲染和客户端渲染与Web浏览器

路由和Web服务器架构

在传统Web开发中，前端工程师只负责开发所有的静态页面（基于HTML的样式、超链接、效果等）。后端工程师使用后端技术（Java、PHP、Dot Net、NodeJS等）编写接口，连接数据库，获取数据动态渲染前端编写的静态页面，并进行站点部署。

路由

路由是计算机网络工程中的专有名词，routing 是通过互联网把信息从源地址传输到目的地址的活动，决定数据包从来源到目的地的路径。

路由表

又称映射表，类似一个 {内网IP: 设备MAC地址} 的键值对。

后端路由和后端渲染

后端渲染也称服务端渲染（Server Side Rendering，SSR），是传统Web开发技术中常用的渲染方式，所有业务流程由后端处理，前端只负责开发静态页面，所有的html文件在后端应用看来就是一个html字符串。

客服端只需发送一个GET请求，传递URL和Query String，接收服务端传回的html字符串并解析渲染到浏览器或其他平台中。前端和后端的关系是{URL: 渲染后的html字符串}的映射关系，即路由表映射。

优点：服务端负责将一个完整的经过渲染的html字符串发送到客户端，客户端（Web浏览器等）只需进行html解析，客户端压力小，且利于搜索引擎优化（SEO）。

缺点：前端和后端耦合度过高，在Web工程项目扩展过程中带来一系列问题。

前后端分离

前后端分离是现代Web开发技术的重要组成。随着Web工程不断更新迭代，服务器-客户端架构在越来越多的平台中得到运用，传统Web工程中后端的冗余度和耦合性不断上升，Web工程师需要学习不同平台的开发技术，工程的维护难度越来越大，传统的Web工程技术难以应付所有业务场景，“软件危机”似乎要在Web应用中再次重演。在进行后端工程重构的同时，一种新的Web开发技术：前后端分离被提出。

在前后端分离的场景中，前端工程师负责解决所有业务逻辑（网络请求、资源处理），后端工程师只提供资源（通过接口）。整个Web架构大致分为了三块内容：

各种客户端
泛用Web服务器
数据库

泛用性的Web服务器可以处理来自不同客户端（浏览器和其他网络应用）的请求。处理请求的后端应用部分被称为中间件。通常情况下，Web服务器分为两部分：

静态资源服务器，处理客户端发送的资源请求（来自html标签的src、css的url等，document、script、img等类型）并在响应中返回资源（图片、视频等）
API接口服务器，处理客户端发送的数据请求（来自Ajax的请求等，xhr类型），与数据库进行交互，并在响应中返回数据（传统的XML、现代的JSON等）

前端路由和前端渲染

前端渲染也称浏览器端渲染（Browser Side Rendering，BSR），或者更加广泛的客户端渲染（Client Side Rendering）。客户端发送请求并得到原始页面，在原始html页面中包括一些JavaScript代码段，这部分代码段将执行包括Ajax网络请求在内的业务逻辑，继续向服务器发送其他请求，并对响应作处理。

一个前端应用将包括多个同步或异步的请求，并获取多个传统意义上的“页面”。这些页面通过异步的网络请求在业务流程中获取并在客户端中解析和渲染，在客户端中以单页面的形式显示，因此被称为单页面应用程序（Single Page Application，SPA）。同一个站点会包含多个单页面前端应用。SPA的路由表类似 {请求URL: Web Components模块} 的键值对结构，每个请求获取一部分页面内容并由前端渲染到页面上，这套路由表由开发SPA的前端工程师进行维护，后端工程师只负责提供资源请求的接口。

核心

SPA即是在前后端分离架构的基础上为前端增加了一套路由系统
前端路由即是URL和页面/页面部分的映射关系
改变URL时不会发起服务端请求，请求在动态获取资源时发起，页面通常不会整体刷新

优点：减少Web工程耦合度，提高后端应用泛用性，前端部分开始工程化以应对中大型项目

缺点：前端网络请求增加，加大客户端压力，后端提供的原始数据有被劫持风险，对传统的SEO架构不友好