网页开发方式-从静态页面到服务端渲染

前言

网页的最初形式就是一个个静态页面，例如咱们写了一个 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、ajax、数据库、后端程序及相关模版引擎

2.实现和执行过程

运行后端程序并监听路由（请求路径），用户访问对应路由后端渲染对应的页面，执行相关 sql 并返回数据，模版引擎将数据插入到 html 节点中，返回 html，浏览器渲染

3.开发效率

开发效率较高，mvc模式，须要搭建耦合的先后端架构，模版引擎后端渲染部分和前端 ajax 经过 js 渲染部分须要额外编码处理。若是后端迁移语言，几乎等于重写。先后端职责并非特别分明，后端程序员也能够修改模板。

4.加载速度

服务端程序须要监听路由，同步请求接口，渲染模板，响应流程较多，加载速度较快

5.服务器压力

服务器须要启动后端程序，后端程序须要请求数据和渲染页面，占用内存和计算资源较多

6.应用场景

内容丰富，复杂交互的动态网页，适合全栈开发。也有一种动静结合的应用场景，后端程序根据路由，把页面动态渲染后生成一个静态的页面，按期更新此静态页面，这样用户访问的时候，就直接访问的是静态页面，能很大程度减小服务器压力。缺点是更新不及时,是一种相似缓存的策略，使用此方式仍是根据应用场景综合评估。

单页面

1.主要涉及技术

html-css-js、ajax、单页面框架

2.实现和执行过程

服务器直接返回静态资源，浏览器加载执行相关 js，单页面框架判断路由执行对应 js 代码，全部请求异步，彻底经过 js 插入和修改 dom ，不须要服务端作任何事情。

3.开发效率

开发效率较高，mvvm模式，先后端分离彻底独立的纯前端应用，先后端职责分明互不干涉。

4.加载速度

无静态资源缓存状况下，首次加载速度较慢，由于须要经历静态资源下载、js 彻底执行、异步数据返回。首次加载完成后页面路由被前端控制，切换很是快。缓存静态资源之后，首次加载速度也很是快。

5.服务器压力

服务器压力很小，只须要返回静态资源，网页逻辑、路由和计算所有分摊给无数客户端。

6.应用场景

内容丰富、数据量大、复杂交互的动态网页。大部分场景都能知足，是目前最流行的方式。

单页面的服务端渲染

注：之因此没有直接使用 SSR（服务端渲染）来表示，是由于动态网页也能够叫服务端渲染。

1.主要涉及技术

html-css-js、ajax、单页面框架、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）。此方式一些适合的项目：活动模板，新闻通知类，博客系统，混合开发等等。

文章如有错误，欢迎指出，以便修改～

关注大诗人公众号，第一时间获取最新文章。