关注「前端向后」微信公众号,你将收获一系列「用心原创」的高质量技术文章,主题包括但不限于前端、Node.js以及服务端技术
写在前面
React、Vue 等现代化前端框架的大旗之下,CSR(Client-Side Rendering)模式深入人心:
CSR (Client-Side Rendering) – rendering an app in a browser, generally using the DOM.
前端部分几乎全都是由客户端动态渲染(客户端执行 JS 代码,动态创建 DOM 结构)出来的,例如:
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Web App</title>
<meta charset="utf-8">
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
客户端逻辑越重,初始化需要执行的 JS 越多,首屏性能就越慢,因而出现了更多的渲染模式探索:
SSR(Server-Side Rendering):服务端渲染,在服务端将 Web 应用渲染成 HTML
Rehydration:二次渲染,复用服务端渲染的 HTML DOM 结构和数据,在客户端“温启动”JS 渲染
Prerendering:预渲染,在编译时运行一个客户端应用抓取其初始状态生成静态 HTML
一.CSR
CSR(Client-side rendering),即客户端渲染,是指用 JS 直接在浏览器里渲染页面,包括数据请求、视图模板、路由在内的所有逻辑都在客户端处理:
Client-side rendering (CSR) means rendering pages directly in the browser using JavaScript. All logic, data fetching, templating and routing are handled on the client rather than the server.
渲染流程如下图