关键词：
前言
网页的最初形式就是一个个静态页面，例如我们写了一个 html 文件，放在服务器上就可以供用户访问了。 而后网站变得需要展示更多的内容，让内容更加动态，因此需要接入数据库，配合数据库的内容做展示，于是诞生了 html 模板引擎，用于把动态的数据插入到 html 中，叫做动态页面，后面我会叫它为传统的动态页面，例如 java 的 Jsp，php 的 Smarty 和 node 的 Jade 等。 再后来伴随浏览器的发展，网页交互变得越来越复杂等一系列原因，前端技术突飞猛进，诞生了前后端分离的单页面应用，简称 spa（single page application），最流行的莫过于 react、angular 和 vue了，三大框架一统江湖。 单页面应用也有其自身的缺陷，seo不友好、首次加载较慢，但是大家又不可能回过头去使用模版引擎，于是乎基于单页面应用框架的 SSR（sever side rendering）服务端渲染应运而生，例如基于 vue 的 nuxt.js 和基于 react 的 next.js。 它不仅使我们统一了技术栈，还解决了单页面本身的一些问题，以至于我们能在某些场景下得到满足。
基于整个发展史，我在这里暂且把网页的开发方式划分为这四个类型：传统的静态页面、传统的动态页面、单页面、单页面的服务端渲染。
接下来我们从下面几个方面，来谈一谈每一种开发方式
- 主要涉及技术
- 实现和执行过程
- 开发效率
- 加载速度
- 服务端压力
- 应用场景
传统的静态页面
1.主要涉及技术
html-css-js
2.实现和执行过程
将静态资源存放在服务器，用户通过 url 访问静态资源并加载到浏览器，最后渲染
3.开发效率
引入资源少，开发速度快，对于复杂应用开发效率极低
4.加载速度
服务器只需要返回静态资源，响应流程简单，速度非常快
5.服务器压力
服务器压力小，占用很少资源
6.应用场景
仅支持展示少量信息的网页，交互较少，比如简单的介绍页面，官方网站，个人简历网页等。
传统的动态页面
1.主要涉及技术
html-css-js、数据库、后端程序及相关模版引擎
2.实现和执行过程
运行后端程序并监听路由（请求路径），用户访问对应路由后端渲染对应的页面，执行相关 sql 并返回数据，模版引擎将数据插入到 html 节点中，返回 html，浏览器渲染
3.开发效率
开发效率较高，mvc模式，需要搭建耦合的前后端架构，模版引擎后端渲染部分和前端 ajax 通过 js 渲染部分需要额外编码处理。如果后端迁移语言，几乎等于重写。前后端职责并不是特别分明，后端程序员也可以修改模板。
4.加载速度
服务端程序需要监听路由，同步请求接口，渲染模板，响应流程较多，加载速度较快
5.服务器压力
服务器需要启动后端程序，后端程序需要请求数据和渲染页面，占用内存和计算资源较多
6.应用场景
内容丰富，复杂交互的动态网页，适合全栈开发。也有一种动静结合的应用场景，后端程序根据路由，把页面动态渲染后生成一个静态的页面，定期更新此静态页面，这样用户访问的时候，就直接访问的是静态页面，能很大程度减少服务器压力。缺点是更新不及时,是一种类似缓存的策略，使用此方式还是根据应用场景综合评估。
单页面
1.主要涉及技术
html-css-js、单页面框架
2.实现和执行过程
服务器直接返回静态资源，浏览器加载执行相关 js，单页面框架判断路由执行对应 js 代码，所有请求异步，完全通过 js 插入和修改 dom ，不需要服务端做任何事情。
3.开发效率
开发效率较高，mvvm模式，前后端分离完全独立的纯前端应用，前后端职责分明互不干涉。
4.加载速度
无静态资源缓存情况下，首次加载速度较慢，因为需要经历静态资源下载、js 完全执行、异步数据返回。首次加载完成后页面路由被前端控制，切换非常快。缓存静态资源以后，首次加载速度也非常快。
5.服务器压力
服务器压力很小，只需要返回静态资源，网页逻辑、路由和计算全部分摊给无数客户端。
6.应用场景
内容丰富、数据量大、复杂交互的动态网页。大部分场景都能满足，是目前最流行的方式。
单页面的服务端渲染
注：之所以没有直接使用 SSR（服务端渲染）来表示，是因为动态网页也可以叫服务端渲染。
1.主要涉及技术
html-css-js、单页面框架、nodejs、基于node和单页面框架自行实现核心逻辑 或者 使用三方框架如nextjs、nuxtjs
2.实现和执行过程
用户访问 url， node 拦截到路由，并根据路由渲染对应单页面组件生成 dom 字符串，如果有数据请求，同步获取到数据后才渲染出 dom 字符串，插入到 html 中返回客户端，客户端很快显示出界面，至此服务端渲染完成。客户端 body 后的 script 标签加载单页面相关 js 文件，而后客户端进行一次单页面同构，完成对应组件 dom 的事件绑定及那些服务器端无法实现的功能，后续的交互和程序执行就完全是一个单页面应用。
3.开发效率
开发效率相对于单页面要低一些，因为额外要处理的逻辑变得比较多，比如 node 没有 window 对象等等。也会有应用方案本身的一些小坑，以及需要花成本学习 next 等框架。
4.加载速度
首次加载速度比较快，因为很快就能先呈现出页面（但是同构未完成时功能受限）。如果没有缓存的情况下，首次加载速度 SSR 是优于单页面的，如果 js 被缓存，反而单页面会快一点。因为 SSR 会多一点服务端的流程开销。
5.服务器压力
相比纯单页面，服务器需要增加 node 服务带来的消耗。而服务器压力会比动态页面少很多，因为仅仅是用户第一次访问的时候才是服务端渲染，而后路由改变页面渲染都是被单页面控制。
6.应用场景
内容丰富，复杂交互的动态网页，对首屏加载有要求的项目，对 seo 有要求的项目（因为服务端第一次渲染的时候，已经把关键字和标题渲染到响应的 html 中了，爬虫能够抓取到此静态内容，因此更利于 seo）。此方式一些适合的项目：活动模板，新闻通知类，博客系统，混合开发等等。
文章若有错误，欢迎指出，以便修改～
静态网页与动态网页
静态网页与动态网页静态网页静态网页是指存放在服务器文件系统中实实在在的HTML文件。当用户在浏览器中输入页面的URL，然后回车，浏览器就会将对应的html文件下载、渲染并呈现在窗口中。早期的网站通常都是由静态页面制... 查看详情
前后端渲染
...只供用户浏览但不包含任何脚本、不含有任何交互功能的网页。动态的HTML指：网页不仅提供给用户浏览，网页本身还有交互功能，存在着在脚本如JAVASCRIPT，并利用某种服务器端语言如PHP等实现如用户注册，用户登录，上传文件... 查看详情
静态网页与动态网页区别
...riptAndXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。）但是这些特效都是在客户端上借助于浏览器展现给用户的，所以在服务器上本身并没有任何的变化。3、静态web无法连接数据库；4、静态web资... 查看详情
静态网页与动态网页的区别
静态网页：1、在静态Web程序中，客户端使用Web浏览器（IE、FireFox等）经过网络(Network)连接到服务器上，使用HTTP协议发起一个请求（Request），告诉服务器我现在需要得到哪个页面，所有的请求交给Web服务器，之后WEB服务器根... 查看详情
nuxt.js服务端渲染实践，从开发到部署
...很给力的，提issue后很积极的给予帮助，再次感谢Nuxt.js的开发团队。解决的问题路由鉴权第一个拦路虎就是登陆时候的鉴权问题，如何把token保存到本地。官方使用express-ses 查看详情
前后端分离与不分离
...第一种方式是服务器端渲染的方式，是指在服务器端就将网页直接生成，浏览器这里拿到的是一整个网页，CSS和JS的部分是在浏览器端执行的，而网页的内容部分，也就是数据，是由服务器端生成的。这叫做服务器端渲染。至于... 查看详情
angular10预渲染实践笔记(代码片段)
...践笔记参考资料：Angular服务端渲染Angular预渲染Angular开发实践之服务端渲染Angular预渲染实践【Angular项目实战】Angular5服务器渲染（SSR）ssr(angular)相关小笔记目的：基于Angular的服务端渲染和预渲染功能来生成多页... 查看详情
django前戏(代码片段)
目录Django前戏软件开发架构动静态网页模板渲染什么是web框架Django简介创建Django项目方式Django各个文件的作用Django小白必会三板斧注意事项纯手撸web框架基于wsgire框架urls.pyviews.pyTemplates文件夹下Django前戏软件开发架构c/s架构客户... 查看详情
react服务端渲染与预渲染
...前route对应的组件是实现路由同步的关键，再通过组件的静态API方法获取接口数据主要是在服务端通过组件的静态API方法获取接口数据后创建store，再通过window.store=store传递给前端主要是要将前端的js文件附加在服务端渲染的模板... 查看详情
前后端分离
...示，前端与后端的耦合度很高。这种应用模式比较适合纯网页应用，但是当后端对接App时，App可能并不需要后端返回一个HTML网页，而仅仅是数据本身，所以后端原本返回网页的接口不再适用于前端App应用，为了对接App后端还需... 查看详情
服务端预渲染之nuxt(介绍篇)(代码片段)
...，给项目SEO带来很大的不便，搜索引擎在检索的时候是在网页中爬取数据，由于单页面应用读取到的页面是几乎空白的，无法爬取到任何数据信息。<!DOCTYPEhtml><html><head><metacharset=utf-8><metaname=viewportcontent="w... 查看详情
前后端分离与不分离
...耦合度很高。 这种应用模式比较适合纯网页应用，但是当后端对接App时，App可能并不需要后端返回一个HTML网页，而仅仅是数据本身，所以后端原本返回网页的接口不再适用于前端App应用，为了对接App后端还需... 查看详情
前后端分离模式(代码片段)
前后端逻辑混合开发模式：优点：1.用户体验好，在相同的网络条件和业务复杂度以及硬件环境下，他可以快速进行首屏展示，避免ajax请求所带来的渲染延时。2.有利于seo搜索引擎优化。3.方便静态化，在访问高峰期可以将某些... 查看详情
前后端分离及不分离
...展示，前端与后端的耦合度很，这种应用模式比较适合纯网页应用，但是当后端对接APP时，APP可能并不需要后端返回一个HTML网页，而仅仅是数据本身，所以后端原本返回的网页的接口不再适用于前端APP应用，为了对接APP后端还... 查看详情
前端如何高效的与后端协作开发(代码片段)
前端如何高效的与后端协作开发1.前后端分离前端与后端的分离，能使前端的开发脱离后端的开发模式，拥有更大的自由度，以此便可做前端工程化、组件化、单页面应用等。可以参考：前后端分离、web与static服务器分离2.尽量... 查看详情
前端代码发布案例参考
看了两个个知乎的回答,自己总结下.大公司里怎样开发和部署前端代码？回答一非覆盖发布:文件的摘要信息放到资源文件发布路径中,这样内容有修改的文件变成了一个全新的文件,不会覆盖之前的文件先全量部署静态资源,再灰度... 查看详情
nuxt与vue部署到服务器的区别(代码片段)
...s开发，一般都是为了实现SSR。让搜索引擎更好的抓取网页内容，就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题。nuxt部署方式nuxt.js官方为我们提供了两种部署的方式，一种是静态资源部署，一种是ssr形式... 查看详情
网页从输入网址到渲染完成经历了哪些过程？
大致可以分为如下7步：输入网址；发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；与web服务器建立TCP连接；浏览器向web服务器发送http请求；web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的ur... 查看详情