Skip to main content

关于前后端渲染与同构

前言

十年前几乎所有网站都采用 ASP、Java、PHP 等后端渲染技术。但随着 jQuery、Angular、React、Vue 等 JavaScript 框架的崛起，前端渲染逐渐成为主流。

自2014年起，同构渲染开始流行，声称结合了前后端渲染的优点。然而，短短三年后，许多当时兴起的框架（如 Rendr 和 Lazo）逐渐消失。

我们不禁要问：同构渲染到底是否是未来？在选择技术时，是否应该仅仅追求热门而忽视前后端渲染的核心问题？我认为，我们应该关注如何提升用户体验，而非拘泥于固定模式。

1. 渲染方式的选择依据​

1.1 前端渲染的优势​

  • 局部刷新：用户在浏览网页时，不需要每次都加载完整页面，这样可以提高体验。
  • 懒加载：初始加载时只获取可见区域的数据，用户滚动后再加载其他内容，可以通过 react-lazyload 实现。
  • 丰富的交互：使用 JavaScript 实现各种酷炫效果，使用户体验更好。
  • 节约服务器成本：JavaScript 支持 CDN 部署，部署简单，只需服务器支持静态文件。
  • 关注分离设计：服务器负责访问数据库并提供数据接口，JavaScript 只关注如何获取和展示数据。
  • 跨平台使用：学习 JavaScript 一次，可以用来开发 Web、Server、Mobile 和 Desktop 应用。

1.2 后端渲染的优势​

  • 首屏性能：用户无需下载大量 JavaScript 和 CSS 就能看到页面。
  • SEO：后端渲染生成的 HTML 可直接被搜索引擎抓取。
  • 兼容性：不必担心浏览器的兼容性问题（随着浏览器的发展，这个优势逐渐减弱）。
  • 节能：减少客户端设备的电量消耗，尤其在移动设备上。

虽然后端渲染的优势主要集中在首屏性能和 SEO，但这些问题正逐渐被同构框架（如 React 和 Next.js）所解决。静态站点渲染也逐渐成为一种选择，但对于复杂应用而言，前端框架已能完全满足需求。

2. 同构渲染的现状与争议​

关于前端和后端渲染的现状，大家基本达成共识：前端渲染是未来的趋势，但也面临着首屏性能和 SEO 的挑战。同构渲染的争议主要集中在以下几点：

2.1 前端渲染的问题​

前端渲染面临的主要问题是 SEO 和 首屏性能。SEO 的问题在于传统搜索引擎只能抓取 HTML 中的数据，导致 SPA 页面无法被抓取。此外，SPA 通常会将所有 JavaScript 打包，文件体积庞大，尤其在网络环境差时，用户会面临长时间的白屏等待。

2.2 同构的优点​

同构渲染的出现正是为了应对前端渲染的问题。自2014年底 React 崛起以来，同构被视为前端框架的一个重要特性。然而，三年过去，许多产品逐渐从全栈同构转向首屏或部分同构。这让我们重新审视同构的优点是否真的存在。

  1. 有助于 SEO：如果应用需要 SEO，则同构是一个不错的选择。但对于后台应用，首页只需做一些静态内容即可。如今，谷歌的爬虫已能执行 JavaScript，理解网页内容。因此，尽量使用新的规范，如 pushstate 替代 hashstate，并定期更新网站地图。

  2. 节省开发时间：同构并未显著减少前端开发量，只是将部分代码移至服务端执行。为了实现同构，开发者需兼容 Node.js 环境，存在额外的成本。

  3. 提高首屏性能：虽然同构能改善首屏性能，但在某些情况下，过多的接口请求可能导致性能下降。

2.3 同构的局限​

  1. 性能问题：将原本在浏览器端处理的任务转移到服务器，可能导致服务器计算负担加重，尤其在需要大量计算的场景（如图表处理）中，性能瓶颈显著。

  2. 环境差异：前端代码常未考虑后端渲染的情境，使用浏览器对象和 DOM API 可能导致错误。常见的问题包括 document 对象不存在、DOM 计算错误等。需要实现合适的更新机制，以处理不同用户的 window 对象。

  3. 内存溢出：前端代码在浏览器中有内存重置的优势，但服务器端没有。例如，在 React 的 componentWillMount 中绑定事件可能导致内存溢出。

  4. 异步操作复杂：同构渲染要求所有请求在渲染前完成，导致流程复杂。尽管 Next.js 解决了一些问题，但仍需谨慎处理。

  5. 存储限制：复杂的数据类型无法转化为字符串，导致在同构中处理困难。

综上所述，同构渲染的实施难度大，且无论在前端还是服务端，都需要额外改造。

2.4 首屏优化​

除了同构，还有其他方法可以改善首屏渲染问题：

  1. 分拆打包：使用如 react-router 等路由库支持的分拆打包，按页面进行分拆，并在切换时加入加载和过渡效果。

  2. 交互优化：通过更好的用户交互体验解决首屏问题，如使用Skeleton Screen效果，改善白屏等待。

  3. 部分同构：通过优先渲染核心部分（如菜单），减少用户的等待时间。

通过以上措施，首屏问题将得到显著改善，且对现有架构的影响较小。

3. 总结​

共识：前端渲染是未来趋势，但面临 SEO 和首屏性能问题。

同构争议：同构旨在解决前端渲染问题，但并非所有应用都需 SEO，且搜索引擎爬虫能力逐渐增强。同构并未真正节省前端开发量，且需额外兼容 Node.js 环境。

Next.js​

Next.js 是基于 React 的流行同构开发框架，其亮点包括：

  1. 请求处理的标准化：Next.js 为组件新增了 getInitialProps 方法，简化初始化请求处理。

  2. CSS-in-JS 解决方案：使用 styled-jsx 解决了样式问题，简单易用。

  3. 默认快速：页面拆分打包，支持页面预加载。

Next.js 提供了一套简洁明了的解决方案，非常适合新项目使用，但在旧项目中需要评估成本。