本文分析了前端渲染（SPA）、后端渲染（传统ASP、Java、PHP）和同构渲染的优缺点。前端渲染在局部刷新、懒加载和富交互上有优势，但面临SEO和首屏性能问题。后端渲染在首屏性能和SEO上有优势。同构渲染旨在解决这些问题，但在实现中存在性能、环境差异和开发成本等挑战。建议采用首屏优化、分拆打包、交互优化和部分同构策略来改善用户体验。
本期精读的文章是：Here's why Client-side Rendering Won
讨论地址是：前后端渲染之争 · Issue #5 · dt-fe/weekly
1. 引言我为什么要选这篇文章呢？
十年前，几乎所有网站都使用 ASP、Java、PHP 这类做后端渲染，但后来随着 jQuery、Angular、React、Vue 等 JS 框架的崛起，开始转向了前端渲染。从 2014 年起又开始流行了同构渲染，号称是未来，集成了前后端渲染的优点，但转眼间三年过去了，很多当时壮心满满的框架(Rendlr、Lazo)从先驱变成了先烈。同构到底是不是未来？自己的项目该如何选型？我想不应该只停留在追求热门和拘泥于固定模式上，忽略了前后端渲染之“争”的“核心点”，关注如何提升“用户体验”。
这篇文章分析了前端渲染的优势，并没有进行深入探讨。我想通过它为切入口来深入探讨一下。
明确三个概念：「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制；「前端渲染」指使用 JS 来渲染页面大部分内容，代表是现在流行的 SPA 单页面应用；「同构渲染」指前后端共用 JS，首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。
2. 内容概要前端渲染的优势：
局部刷新。无需每次都进行完整页面请求
懒加载。如在页面初始时只加载可视区域内的数据，滚动后rp加载其它数据，可以通过 react-lazyload 实现
富交互。使用 JS 实现各种酷炫效果
节约服务器成本。省电省钱，JS 支持 CDN 部署，且部署极其简单，只需要服务器
最低0.47元/天 解锁文章
1128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
