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

前言

网页的最初形式就是一个个静态页面,例如我们写了一个 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)。此方式一些适合的项目:活动模板,新闻通知类,博客系统,混合开发等等。

文章若有错误,欢迎指出,以便修改~

分享一个朋友的人工智能教程。零基础!通俗易懂!风趣幽默!段子多!大家可以看看是否对自己有帮助【点击前往】

原文地址:https://www.cnblogs.com/1wen/p/10843540.html

时间: 2024-10-09 12:34:00

网页开发方式-从静态页面到服务端渲染的相关文章

追求极致的用户体验ssr(基于vue的服务端渲染)

首先这篇博客并不是ssr建议教程,需要ssr入门的我建议也不要搜索博客了,因为官网给出了详细的入门步骤,只需要step by step就可以了,这篇博客的意义是如何使用ssr,可能不同的人有不同的意见,我舍弃了ssr中的vuex和vue-router增加了redis,serverfetch等等实现了适合自己公司的业务,个人认为并不是所有的东西都值得吸收,对我来说我能用到的只是ssr将vue生成一个html和对应的js. 虾面我们来看看什么是服务端渲染? 官网给出的解释: Vue.js 是构建客户

服务端渲染与客户端渲染的区别与应用场景

内容整理自多个论坛博客. 主要参考:https://www.jianshu.com/p/b8cfa496b7ec https://www.jianshu.com/p/10b6074d772c https://www.douban.com/note/722996691/ 客户端渲染(CSR)VS服务端渲染(SSR) 1.客户端渲染和服务端渲染 1.1 概念 客户端渲染:后端不提供完整的html页面,而是提供一些api使得前端可以获取json数据,然后前端拿到json数据之后再在前端进行html页面

Vue服务端渲染和Vue浏览器端渲染的性能对比

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D

Vue 2.0 服务端渲染入门

1 什么是服务端渲染 SSR server side render 就是通过后端吐模板,而不是通过前端ajax获取数据,拼接字符串. 2 为什么需要SSR 需要SEO,因为爬虫不会等待ajax结果. 客户端网络慢,加载速度慢,影响用户体验. 3 另一种解决办法 预渲染 不是一次性下载整个单页应用,预渲染只是在构建时为了特定的路由生成特定的几个静态页面 你用webpack可以很简单地通过prerender-spa-plugin来添加预渲染 4 NodeJS编写Vue的SSR 首先npm insta

实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. 话不多说,我们分别来看两个Demo:(欢迎star 欢迎pull request) 1.浏

如何使用Vue2做服务端渲染

花费了一个月时间,终于在新养车之家项目中成功部署了vue2服务端渲染(SSR),并且使用上了Vuex 负责状态管理,首屏加载时间从之前4G网络下的1000ms,提升到了现在500-700ms之间,SSR的优势有很多,现在让我来跟你细细道来. 技术栈 服务端:Nodejs(v6.3) 前端框架 Vue2.1.10 前端构建工具:webpack2.2 && gulp 代码检查:eslint 源码:es6 前端路由:vue-router2.1.0 状态管理:vuex2.1.0 服务端通信:axi

Vue.js与 ASP.NET Core 服务端渲染功能整合

http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gy?ngy?si 译者:oopsguy.com 我真的很喜欢在前端使用 Vue.js,Vue 服务端渲染直到第二个版本才被支持. 在本例中,我想展示如何将 Vue.js  服务端渲染功能整合 ASP.NET Core. 我们在服务端使用了 Microsoft.AspNetCore.SpaServices 包,该包提供 ASP.N

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║实战二:初探SSR服务端渲染(个人博客二)

缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大家增加点儿学习的动力,每天提醒下,完全没有提纲或者安排说明什么的,就是按照我自己学的方向走,正好发现了一个规律就是:每一个系列正好是 1 个引子 + 12 篇正文,不知道大家对这个有没有感觉,大家可能看到我的头像就知道了,哈哈,其实我是一个红迷,正好这里机缘巧合,两个系列都形成了这样的,我自私的给自

基于vue的nuxt框架cnode社区服务端渲染

nuxt-cnode 基于vue的nuxt框架仿的cnode社区服务端渲染,主要是为了seo优化以及首屏加载速度 线上地址 http://nuxt-cnode.foreversnsd.cngithub地址 https://github.com/Kim09AI/nu... 技术栈 vue vue-router vuex nuxt axios simplemde ES6/7 stylus 目录结构 ├─npm-shrinkwrap.json ├─nuxt.config.js # nuxt配置文件 ├