为什么现在又流行服务端渲染html？
不了解web的发展历史很难理解为什么现在又流行服务端渲染html了。现在的服务端渲染html和过去的渲染方式并不相同，所采用的技术、方式、方法也不相同，并不是旧瓶装旧酒，而是旧瓶装新酒。技术的更迭很大一部分原因在于出现了瓶颈无法满足当下的网络数据供应。
渲染一词起源于游戏领域、3D设计领域，渲染的意义在于并不是简单地画一张画呈现在其他人面前，而以数据的形式保存物体的位置，颜色、法线、纹理、光照等，当有人需要查看的时候，就会重新再次准确地重现，重现的过程就是渲染。
渲染流程会接受使用定点描述3D物体的原始数据作为输入用于处理，再计算它的片段（fragment），片段就是一个个像素的3D投射，片段包含了位置、颜色、法线、纹理、光照等等，渲染好的像素输出到显示屏上。
浏览器端渲染和服务器端渲染的区别
页面渲染的本质就是浏览器将HTML文本转换成页面的过程。页面渲染大致需要走过下面几个步骤：
1、用户输入网址后浏览器请求服务器端得到一个HTML文本。
2、接着就到了HTML文本解析的过程了，先构建DOM树。如果遇到了内联样式、样式脚本，就需要下载并构建样式规则。如果遇到JavaScript脚本就会下载并执行。
3、DOM树、样式规则构建完后渲染进程就会将他们两合并成渲染树，然后渲染进程就会对渲染树进行布局，生产布局树。渲染进程对布局树进行绘制并生成绘制记录。
4、渲染进程对布局树分成并栅格化每一层得到合成帧，再发给GPU进程显示到浏览器的页面中。
服务器端渲染（SSR）会在浏览器请求页面的URL的时候，就会把我们需要的HTML文本组装好，然后返回给浏览器，浏览器不需要再经过JavaScript执行就可以直接构建出DOM树并展示到页面中。客户端渲是当浏览器请求URL时服务器端直接返回一个空的静态HTML文件，服务器端不需要任何查数据库和模板组装的操作。浏览器拿到这个HTML文件后就开始样式表和脚本，脚本会请求服务器端提供的API来获取数据，获取完数据后JavaScript脚本就会动态地将数据渲染到页面中，完成页面的显示。
web的发展史
web1.0时代没有AJAX，几乎所有的应用都是服务器端渲染，浏览器请求页面URL之后，服务器端会将所有的东西准备好，包括了数据库查询到的数据、组件模板（PHP、ASP、JSP等）等，返回给浏览器，浏览器不需要任何的JavaScript参与。
但随着人们的期许值越来越大，web业务也变得越来越复杂了，再加上AJAX的出现，web1.0服务器端渲染暴露出了很多缺点，比如我们每次点击页面的一个小模块都需要重新请求一次页面，重新查询数据库，重新组装加载一次html。JavaScript、jsp、php、asp代码混在一起更是使得web应用很难进行维护。
nodejs出现之后网页开始被当成了SPA，即独立应用程序。前端接管了所有页面渲染的事情，而服务器端只负责数据查询和处理API。
SPA发展过程中也逐渐暴露出很多问题，比如不利于搜索引擎SEO，JavaScript日益臃肿导致首批渲染速度还不及web1.0时代的服务器端渲染，于是服务器端渲染再次被应用，当浏览器请求URL时，前端服务器会根据不同的URL向后端服务器请求数据，请求完前端服务器会组装一个携带具体数据的HTML文本返回给浏览器。浏览器会同时渲染页面、加载执行JavaScript脚本。当我们请求跳转到别的页面的时候，浏览器会执行JavaScript脚本，同时向后端服务器请求数据，获取完数据后再次执行JavaScript脚本动态渲染页面。
综上所述
服务器端渲染、客户端渲染的进化史其实也是前、后端工程师血泪发展史。早期后端总是鄙视前端js太简单，前端也无非是切切图、写写js特效，前端工程师根本算不上一个程序员。
如今前端翻身了彻底地摆脱了后端的指指点点。如今一份代码，既可以由服务端渲染，也可以由客户端渲染。
以上个人浅见，欢迎批评指正。
为什么现在又流行服务端渲染html？相关推荐
- nuxtjs+express+vue2+vuex搭建的服务端渲染（SSR）个人网站项目 1
5se7en.com nuxtjs+express+vue2.0+vuex搭建的服务端渲染个人网站项目. github项目地址: https://github.com/se7en-1992... 项目 ...
- React + Koa 实现服务端渲染(SSR)
⚛️React是目前前端社区最流行的UI库之一,它的基于组件化的开发方式极大地提升了前端开发体验,React通过拆分一个大的应用至一个个小的组件,来使得我们的代码更加的可被重用,以及获得更好的可维护性 ...
- 服务端渲染vs客户端渲染到前后端同构
关于服务端渲染与客户端渲染的优劣,互联网上已经有过很多的文章进行过分析,在这里我谈一下我个人的见解. 首先,还是来老生常谈一下关于两种渲染方式的主要优劣: 服务端渲染(仅列出当下最突出的优劣): 优: ...
- Express与传统Web应用（服务端渲染、art-template模板引擎、配置静态资源托管）
一.服务端渲染相关的概念 什么是渲染? 例如对于我们前端开发者来说最常见的一种场景就是:请求后端接口数据,然后将数据通过模板绑定语法绑定到页面中,最终呈现给用户. 数据: 模板: 渲染(数据+模板)结 ...
- Nuxt --- 也来说说vue服务端渲染
Nuxt 随着现在vue和react的流行,许多网站都做成了SPA,确实提升了用户体验,但SPA也有两个弱点,就是SEO和首屏渲染速度.为了解决单页应用的痛点,基于vue和react的服务端渲染应运而 ...
- SSR -- 服务端渲染基础
前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:建议通过左侧导航栏进行阅读 服务端渲染基础 基本概述 随着前端技术栈和工具链的迭代成熟,前端工程化.模块化也已成为了当下的主流技术方案,在这波前端 ...
- 如何在 React 18中 利用Suspense 实现 服务端渲染(SSR)
概述 React 18 将包括对 其服务器端渲染 (SSR) 性能的架构做了改进.这些改进带来了实质性的效果,是几年来其团队工作的结晶.大多数的改进点都是在幕后进行的,但您需要了解一些选择加入机制,尤 ...
- vue服务端渲染之nuxtjs
前言 本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同 客户端 ...
- 服务端渲染(SSR)和Nuxt.js
服务端渲染(SSR) 客户端渲染和传统服务端渲染的问题 SPA应用有两个非常明显的问题: 首屏渲染慢 不利于 SEO 传统的服务端渲染又存在: 应用的前后端部分完全耦合在一起,在前后端协同开发方面会有 ...
最新文章
- Scala Spark Streaming + Kafka + Zookeeper完成数据的发布和消费
- Vue3中遇到问题：PostCSS plugin tailwindcss requires PostCSS 8 解决方案
- Flink从入门到精通100篇（十九）-基于 Flink 的大规模准实时数据分析平台的建设实践
- python中的函数def和函数的参数
- word 公式编号 右侧对齐_word排版实例：如何将文档中的公式与文字对齐
- 新手程序员如何找一个靠谱的公司
- 数据可视化及数据保存
- css3的新增选择器 200303
- 【聚类】- 聚类实现的数据结构抽象
- php网站怎么对接微信群,PHP对接微信公众平台消息接口开发流程教程
- 机器学习之监督学习（五）——集成学习
- WCF分布式开发必备知识(4):Web Service（转）
- jdk及tomcat的安装
- Java编写飞机大战（超级详细的完整版）--附源码及图片
- 计算机flash教案,flash教学计划
- 实战项目-python库分析科比生涯数据
- ARM-linux开发板网线连接电脑访问外网
- Python实现飞机大战
- springboot 项目启动报Has been loaded by XML or SqlProvider, ignoring the injection of the SQL的错误的解决方案
- esxi 内核 linux,大娃套小娃系列-ESXI虚拟机安装Debian系统实现Docker容器