javascript - 什么是前端渲染？什么是服务端渲染？两者区别及应用场景？

问题描述

我现在就只是前端用用框架写一写SPA，然后后台只是处理下数据库相关的数据，前后就restful形式的API传递下数据，至于这些个渲染毫无概念。所谓的服务端渲染就是指在后台生成html文件传给前端，那对于react和Vue这种引入了虚拟DOM的呢？前端渲染是指什么，解析html生成DOM树然后绘制页面？前端渲染和客户端渲染是指同一个意思吧？前端渲染和服务端渲染应用场景都有哪些？

问题解答

一言两句难以诠释清楚, 可以参考下面的链接:前端渲染和后端渲染后端渲染html、前端模板渲染html，jquery的html，各有什么区别？精读前后端渲染之争

首先渲染，在这儿应该是只将数据和模版组装成html。

前后端分离加上SPA的情况下，后端除了关键路径带认证那种的请求给你重定向之外，一般的路由逻辑都是前后端共享的，部分处理逻辑也是前后端共享，并且后端提供数据接口，与接口相关的数据处理逻辑就是后端独有。

在SPA场景下服务端渲染都是针对第一次get请求，用于生产完整的html给浏览器，浏览器直接出首屏。客户端渲染都是针对客户端状态变化，请求了数据，进行局部dom变化（局部可能大到整个body）。react/vue在这种场景下，服务端仅仅将jsx/模版转换成html，客户端根据props/state变化，协调虚拟dom和真实dom之间的同步。

在传统前后端分离场景下，后端负责渲染完整html，前端js负责交互之后，改变几个文字动画之类的。没有前端渲染。

综述：

虚拟dom仅仅存在于前端，用于协调虚拟dom和真实dom差异，最小化更新真实dom。

前端渲染指 解析数据和模版，生成dom。跟后端一致。

是的，同一个意思，在web场景下。

前端渲染：不想每次小变化都请求服务端重新生成整个dom的场景。服务端渲染：绝大多数场景，极端场景是客户端禁用js的时候。仅仅用前端渲染的场景估计是公司架构不允许react/vue做渲染（尚未部署node服务器）。通常情况，前后端渲染都有。

IT界有一个不好的习惯就是会造一个花里胡哨的名词让你不知道具体细节：

后端渲染：后端的程序在把html页面吐给前端之前，先把html页面上的特定区域，特定符号，给用数据填充过，再扔给前端，这就是后端渲染，所谓渲染，你可以理解一种修改，渲染这词最早来源于游戏领域，游戏领域又来源于现实画画，渲染嘛，拿着颜料往纸上涂便是。以前绝大部分服务器都是这个模式

前端渲染：后端的html页面作为静态文件存在，前端请求时后端不对该文件做任何内容上的修改，直接以资源的方式返回给前端，前端拿到页面后，根据写在html页面上的js代码，对该html的内容进行修改（涂颜料）。这就是前段渲染