当今Web应用程序体系结构的两种分类：服务器端渲染和浏览器端渲染

当今Web应用程序体系结构，按照前端的渲染方式不同，可以简单的分成两类：服务器端渲染和浏览器端渲染。

服务器端渲染

在服务器端渲染的web应用程序中，大多数应用程序逻辑保存在服务器上。用户基本上输入了URL，请求被发送到服务器，然后服务器生成包含所请求数据的最终HTML，并将其发送回浏览器，然后将其简单地呈现出来。当用户与页面交互时，该请求将再次发送到服务器，服务器再生成一个新的HTML页面并将其提供给浏览器。

这种方式是web最初的方式，十分有效，目前很多网页还在使用这种方式。

客户端渲染

但是，现代网页通常需要像在桌面上的应用程序那样工作。人们要求更好的用户体验，更多的交互性，“页面”之间的快速转换以及甚至脱机功能。这就是所谓的SPA（单页应用程序）发挥作用的地方。

当用户输入URL时，Web服务器响应的内容除了HTML页面，还包含了用以构成我们的客户端应用程序的一组资源（JavaScript文件和图像）。浏览器会接收到这些资源，然后加载JavaScript应用程序并对其进行“编译执行”。现在，该应用程序的工作就是直接在浏览器内部基于这些资源动态生成用户界面（HTML）。在这种情况发生之后，每个新的用户操作都不会再次重新加载整个页面，而是将用于特定的用户交互的数据发送到服务器（通常通过使用JSON格式），然后服务器又相应的将指定数据返回给客户端（通常也是json格式）。JavaScript应用程序获取这些数据，对其进行解析并动态生成显示给用户的HTML代码。

正如上图所示，两端传输的数据量得到了很大的优化。当然，这种方式存在一个缺点，就是初次加载的时间比较长，也许你也已经想到了，是的，浏览器没有得到可以直接显示的html文件，而是一堆js代码，浏览器需要解析它们才能运行、以产生最终的html文件来显示。

服务器端预渲染，同构JavaScript或通用JavaScript

我想向您展示目前用于第三类Web应用程序的一些名称。您可能会猜到，它旨在充分利用服务器端渲染的Web应用程序和SPA。

简而言之，它的作用如下。当用户输入URL时，服务器会在服务器端加载JavaScript应用程序，将其启动，然后将已经（通过JavaScript应用程序）预先渲染的HTML加上JavaScript应用程序本身交付给客户端。在那里，浏览器解释并运行JS应用程序，然后该应用程序必须足够智能以恢复服务器中断的位置。

优点是显而易见的：您可以快速启动，但是仍然可以像前面提到的那样使用SPA。

扩展阅读：

服务端渲染：后端模板引擎

浏览器渲染：前端模板引擎或用JS 渲染

在传统的web开发中，通常是前端将静态页面写好后给后端人员，后端人员会将其转成.VM、.JSP 文件，这些VM，JSP实际上就是后端的模板引擎。当客户端发送页面请求时，这些VM，JSP文件被服务端处理后返回的是带有数据的html，它的编译过程和数据的渲染都是在服务器完成的。而前端的模板引擎，如 juicer ，它是对请求后的数据进行渲染，也就是html的生成过程是在客户端完成的。

题外话，根据上述的内容，终于明白为什么要前后端分离。假设有客户提出在界面上添加个东西，按照传统的做法，前端先做个模板，然后和后端对接，后端有问题找前端修改再对接。这种方式的前端做的是前端的工作，但不全，而后端做的不只是提供数据接口的工作，因为他们还要将html  转成VM，这明显不碍于项目的开发和维护。所以前后端分离的概念就是，前端做前端的事，包括界面的展示，数据请求，逻辑处理，路由等；而后端只是提供数据接口而已。

把话题回归到主题上。前面也说过浏览器渲染有两种，前端模板引擎或用JS。对于MV*框架(数据和展示分离)的单页面应用（SPA），它们的页面都是通过JS 渲染而成，属于浏览器渲染。所以使用这种方式的弊端在于网站的搜索引擎优化，因为网络爬虫是不读区JS文件的。

服务端渲染：用后台语言通过模版引擎生成html，如：PHP文件、JSP文件、Python的Flask配合Jinja引擎、Django框架、Java配合vm模版引擎、NodeJS配合Jade.适合多页面应用。目前大部分网站还是这种形式。