边缘计算一:现代前端架构演进图谱 —— 从 SPA 到边缘渲染

过去十年,前端项目架构经历了从简单 HTML 文件到复杂框架的飞跃,但很多开发者忽略了**"渲染位置"与"资源交付方式"**对体验与性能的根本性影响。

从最初的浏览器渲染,到现在"在离用户最近的地方动态返回 HTML",架构正在悄悄改变。

这篇文章我们用一张思维图,梳理:

  • 前端架构渲染方式演进的五个阶段

  • 每种方式的核心逻辑、优缺点

  • 当前趋势:边缘渲染(Edge Rendering)为何成了"显学"

一、前端架构五阶段演进图

静态 HTML → SPA → SSR → SSG → ISR → Edge SSR

我们按时间和复杂度拆解:

渲染方式 特征 代表框架 部署平台
静态 HTML 页面全写死 任意静态空间
SPA(客户端渲染) JS 驱动 DOM React, Vue 任意 CDN
SSR(服务端渲染) Node 渲染 HTML Next.js, Nuxt Node 服务器
SSG(静态生成) 构建时产出 HTML Gatsby, Next.js CDN
ISR(增量静态渲染) 按需构建、可回源 Next.js ISR Vercel / Netlify
Edge SSR 离用户最近处实时渲染 Next.js App Router Cloudflare, Vercel Edge

二、SPA:从"快"到"慢"的误解

最早的 React/Vue SPA 项目"快得飞起",但后来大家发现:

  • 首屏加载慢(JS 巨大)

  • SEO 效果差(HTML 是空壳)

  • 数据都等 JS 跑完后才加载

原因是:所有渲染都在浏览器端完成,HTML 是个"壳子"

三、SSR 与 SSG:性能与 SEO 的回归

为了解决 SPA 的问题,我们开始:

  • SSR:在服务器上生成完整 HTML → 提升首屏 + SEO

  • SSG:构建阶段生成 HTML → 快得像静态页,但不能频繁变动内容

但:

  • SSR 受限于服务器性能,用户远了就慢

  • SSG 内容一旦多,需要频繁重新构建

四、ISR:让静态页"活"起来

ISR(Incremental Static Regeneration)是个妙招:

  • 页面首次访问时构建

  • 后续访问使用缓存

  • 设定过期时间或 tag 控制更新

优势是:无需每次部署全量构建,也保留 CDN 加速的性能

五、Edge SSR:渲染靠近用户,真正意义上的"前端后端化"

为什么需要 Edge SSR?

传统 SSR 服务器 → 可能在东京

中国用户访问 → 经历 300ms 网络时延

Edge SSR → 在香港、北京、上海的边缘节点直接执行渲染逻辑

提升的是:全局用户的首屏体验和动态内容交付能力

如何实现?

  • 利用平台如 Vercel Edge FunctionsCloudflare Workers

  • 使用 Next.js App Router + middleware + edge config

这就意味着你的 React 应用可以在 CDN 的边上完成动态 HTML 渲染,而不必等中央服务响应。

六、总结

现代前端开发者不只是"写页面的人",而是"体验调度师"。

在你下次回答"这个项目我们用什么架构"的时候,试着思考:

  • 渲染在哪里?

  • 数据在哪里?

  • 用户在哪里?

相关推荐
2zcode5 分钟前
基于Matlab图像处理的水果分级系统
图像处理·人工智能·matlab
wh_xia_jun13 分钟前
基于深度学习的胸部 X 光图像肺炎分类系统(四)
人工智能·深度学习·分类
cwn_5 小时前
Sequential 损失函数 反向传播 优化器 模型的使用修改保存加载
人工智能·pytorch·python·深度学习·机器学习
老鱼说AI5 小时前
Transformer Masked loss原理精讲及其PyTorch逐行实现
人工智能·pytorch·python·深度学习·transformer
我是苏苏5 小时前
Pytorch01:深度学习中的专业名词及基本介绍
人工智能
空中湖5 小时前
PyTorch武侠演义 第一卷:初入江湖 第5章:玉如意的秘密
人工智能·pytorch·neo4j
lxmyzzs5 小时前
【已解决】YOLO11模型转wts时报错:PytorchStreamReader failed reading zip archive
人工智能·python·深度学习·神经网络·目标检测·计算机视觉·bug
Blossom.1186 小时前
基于深度学习的图像分类:使用预训练模型进行迁移学习
人工智能·深度学习·目标检测·分类·音视频·语音识别·迁移学习
2301_781668616 小时前
前端基础 JS Vue3 Ajax
前端
上单带刀不带妹6 小时前
前端安全问题怎么解决
前端·安全