前后端分离示例代码推荐

[KunMinX]

在了解 Web 开发，其中谈到了一个 “前后端分离” 的设计，

网上的文章大致都表示，分离前，都是后端 “渲染” 好页面，再返回给前端，那么它这里所说的 “渲染”，究竟是指什么呢？

这种含糊其辞、脱离特定背景的表述，实在无法理解，想听听 “说人话” 对此是怎么表述的，或者如果有分离前和分离后两种架构的最小精简代码示例就更好了。

（我暂且猜测，分离前是 html 代码由后端根据业务逻辑拼接，然后把拼接好的 html 返回给浏览器，让浏览器 “渲染”，可见我说的渲染和大部分文章说的渲染可能根本不是一个东西 … 就想听听是不是真的有所谓的 “渲染” 发生在后端，然后丢一个所谓的渲染完的结果给浏览器，浏览器什么也不用做直接展示？）

这里给个说是在后端 “渲染” 的网文：

https://www.infoq.cn/article/mNfTT4UBk5PQl3JpNt6M

[Orenoid]

没详细了解过这个概念的严格定义，按我的理解就是：
分离前，后端渲染是指将动态数据整合到静态 HTML 文件里，也就是你说的拼接，然后把拼接后的 HTML 文件返回给前端，前端直接负责展示。
分离后，前端先直接从服务器拿到静态 HTML 文件，并进行加载，随后再通过 ajax 异步向后端接口请求业务数据，然后再通过 JavaScript 将数据加载到网页上，实质上就是修改和操作 DOM，这种情况下就是前端负责渲染。
按我的理解，通常讨论的“渲染”（尤其是在讨论前后端分离这个语境下）是指数据和 HTML 的整合，而不是浏览器将文档转为 DOM 树再转化为像素点这一操作。

[tomczhen]

浏览器页面显示效果是通过 HTML，CSS 来控制的，那么控制网页的显示效果就有两种手段。

1. 获取时决定，就是后端根据需求生成 HTML 和 CSS，这时影响页面的 HTML，CSS 完全由后端代码生成。

2. 获取后决定，即浏览器读取到 HTML CSS 之后通过在浏览器运行环境的语言，调用浏览器提供的 API 操作已经加载的 HTML，CSS，然后浏览器再绘制。

现实场景是，即便所谓的后端渲染页面，也会用到 JavaScript 去修改已经渲染好的页面，比如最常见的通过 jQuery 操作。而前端渲染也需要一个入口 HTML，可以是一个纯静态文件，也可以由后端输出。

[KunMinX]

@Orenoid

感谢分享，清晰了，我明白了。

[ChanKc]

服务端渲染的渲染确实是“生成 html”而不是“把图画出来”的意思。
我一开始也懵，希望能有人发明出更好的词

[ChanKc]

https://developers.google.com/web/updates/2019/02/rendering-on-the-web

[netnr]

服务端渲染有利于 SEO

[KunMinX]

@ChanKc

谢谢分享，我想明白了，这里的渲染其实是一个动词，表达为 “去渲染” 更合适一些（比如 for-Rendening ），

我是结合 react 等函数式编程框架理解到这一点的，

因为这些框架都有 render 函数，当 setState 的时候，重新触发这个函数，来动态构造布局树。

由于它本质上是函数式编程，view 的实例是内部生成的，因而取名 render 方法，假装跳过中间环节，直奔最终的 render 操作。

然而毕竟 render 就是 render，广泛意义上就是指从代码到像素点的转换，因而对 “渲染” 这个概念的滥用，让交流变得非常不舒服。

我情愿用 “布局拼装” 来人如其名地概括这个现象。分离前，后端静态布局拼装，分离后，前端动态布局拼装。

[ChanKc]

@KunMinX 所以在 Web 中，代码到像素点的转换用了另一个词：Paint，中文应该是绘制吧

[KunMinX]

@KunMinX

或者说数据绑定、页面生成也行，后端数据静态绑定，和前端数据动态绑定。后端页面静态生成，前端页面动态生成。

[skrjscom]

ASP PHP 时代经历过没？？？ web 设计师设计好 HTML 页面，ASP PHP 拿过去拆散 把代码塞进去。

[gantleman]

最初 html 时代是没有前端程序猿的。后端动态调整样式使用服务器过滤的方式。随着 JS，CSS 的流行，后端不再负责前端样式。

[KunMinX]

@ChanKc

哈哈，那可能刚好和 android 以及计算机科学中对 render 和 paint 的定义反过来了。

android 中 draw 表示的是绘制、排版的意思，也即构建视图模型，然后把这个模型结果统一交给 render 机制去渲染到屏幕。

https://zh.wikipedia.org/wiki/%E6%B8%B2%E6%9F%93

百科中对渲染的解释也是如此，指通过模型来生成图像的过程。

或许 web 开发中关于 “渲染” 和 “绘制” 的定义，是被早期的某个大佬给带歪的 …（除非我们有一天找到了这么称呼的缘由）

[ChanKc]

@KunMinX https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

[yhxx]

后端渲染，浏览器拿到的是<div class="price">128 元</div>

前端渲染，浏览器拿到的是<div id="container"></div>和<script>insert(`<div class="price">128 元</div>`)</script>

[lower]

名词准不准确我觉得重要性其次
可能 http 协议 /浏览器请求、响应、展示网页 这些知识点原理什么的，还需要补充了解，不然光看名词很难理解

[sugars]

我理解的是，不管分离与不分离，两者同样都是渲染 html，但区别就是渲染的时候完整与不完整了

[RedRoute]

我对与后台 ‘渲染’ 的理解是：后端（服务器端）对页面上的数据进行填充，请求服务器时，是一个数据处理完毕的 html，此时浏览器进行显示。
1.前后端不分离：这种做法往往是前端人员编写好静态页面，后端人员通过修改 html 文件，动态的在 html 进行一些数据的处理。当请求过来是，此时通过浏览器访问先请求到服务器，后端先进行处理，返回处理完毕的 html 。
2.前后端分离：此时前端人员完成页面，并通过请求后端提供的接口获取数据，同时完成数据的展示。后端不需要去对页面提供任何操作。此时通过浏览器访问先请求到服务器，直接返回 html 页面，页面中的 js 再去获取数据并显示。

[KunMinX]

@ChanKc

谢谢分享，文档中强行将 “渲染” 描述为 “绘制”，让人觉得不适：

The last step is paint, which takes in the final render tree and renders the pixels to the screen.

—— 最后一步是 “绘制”，基于最终渲染树 去把像素点 “渲染” 到屏幕 …

@lower

这不是精不精确的问题，而是与普适的约定存在冲突，人为造成了代沟，没法交流。

就好比，一个人强行把 “红色” 说成 “蓝色”，把 “爸爸” 说成 “妈妈”，然后完全意识不到与公约存在的冲突，而不停地拿这些概念自嗨，这样的沟通绝不会让人愉快。

[a132811]

@netnr 其实，结合 pushState， 搜索引擎 已经可以很好的 SEO ajax 页面。

[2kCS5c0b0ITXE5k2]

一个再请求结束的时候就渲染完了 一个在请求结束才开始渲染 大概意思

[lllllliu]

其实不能单纯的从页面说呢。
前后分离之后，后端更注重数据和功能的处理了，更多时间去把架构做好。
前端可以更注重项目的工程化了，也可以做很多其他的时间，比如用 nodejs 来渲染需要动态生成的页面，这个其实属于前端的事情了。

[lllllliu]

再从大的方面讲，前后端分离之后，前端部署架构就可以脱离后端的限制了。后端也一样。
前端负载也更好做了呢。后端服务也更好分配和管理了。

[lllllliu]

不要被前端就是只写页面来局限住了。。

[no1xsyzy]

来自 Collins：
You can use render with an adjective that describes a particular state to say that someone or something is changed into that state. For example, if someone or something makes a thing harmless, you can say that they render it harmless.

引申计算机，是指状态（即数据）与客体（比如结构或者模板）结合形成表现。
比如 DOM + Gecko -> 像素点
AJAX 结果 + React -> DOM
数据库 query 结果 + HTML 模板 -> 完整的 HTML

渲染可以是多层次的，比如
DOM + Gecko -> 像素点
AJAX 结果 + React -> DOM
结合一下就是
AJAX 结果 + React + Gecko -> 像素点
其实更偏哲学认知论范畴。