图解 SSR 等 6 种前端渲染模式

最新推荐文章于 2024-05-29 16:55:55 发布

前端向后

最新推荐文章于 2024-05-29 16:55:55 发布

阅读量3.5k

点赞数 1

本文链接：https://blog.csdn.net/ayqy_jiajie/article/details/106894275

版权

关注「前端向后」微信公众号，你将收获一系列「用心原创」的高质量技术文章，主题包括但不限于前端、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.

渲染流程如下图

最低0.47元/天解锁文章

前端向后

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
图解 SSR 等 6 种前端渲染模式

关注「前端向后」微信公众号，你将收获一系列「用心原创」的高质量技术文章，主题包括但不限于前端、Node.js以及服务端技术写在前面React、Vue 等现代化前端框架的大旗之下，CSR（...
复制链接

扫一扫