名词百科

什么是 SPA / SSR?

一句话定义

SPA(单页应用)是页面切换不重新加载文档的前端架构,由 JavaScript 接管路由与渲染;SSR(服务端渲染)是在服务端先渲染出 HTML 再返回,首屏更快且利于爬虫抓取。

发布者:黔序科技

它到底是什么

两者解决的是同一个问题的两端:内容在哪里生成。SPA 在浏览器里生成,切换快但有首屏空白;SSR 在服务端生成,首屏直接可读但每次请求都要计算。

它们不是对立的架构,现代框架大多是混合模式:首次访问由服务端渲染,之后的路由切换在客户端完成,即所谓同构渲染。

怎么运作的

SPA:浏览器加载一次 HTML 外壳和脚本,之后由前端路由拦截跳转,向接口取数据并局部更新。优点是切换流畅、服务端压力小;缺点是首屏白屏时间取决于脚本下载与执行,爬虫对异步内容的抓取有限。

SSR:服务端执行前端代码生成完整 HTML,浏览器先看到内容再加载脚本接管交互。优点是首屏快、可被抓取;缺点是服务端要承担渲染压力,且代码需同时兼容两端环境。

静态生成(SSG):构建时预先生成 HTML,是 SSR 的特例。内容更新频率低时最优,改内容要重新构建。

容易混的几个概念

  • CSR:客户端渲染,SPA 的渲染方式。
  • 同构渲染:首屏 SSR,后续 CSR,现代框架的默认形态。
  • 预渲染:构建时为指定路由生成静态 HTML,适合少量固定页面。
  • SSG:静态站点生成,内容变更需重新构建。

常见问题

SPA 对 SEO 一定不利吗?

不一定。搜索引擎能执行 JavaScript,但抓取预算有限、等待时间有限,异步内容仍有风险。内容型站点用 SSR 或预渲染更稳妥,后台管理系统则完全不需要考虑。

SSR 会拖慢服务器吗?

会,渲染从客户端转移到服务端,并发高时压力明显。缓解办法是缓存渲染结果、静态化不常变的页面、把动态部分放到客户端加载。

B 前端终端 · 同组词条

前后端分离前后端分离是把界面展示与业务逻辑拆成两个独立部分开发的架构方式:前端负责页面与交互,后端提供接口与数据。两者通过 HTTP 接口通信。微前端微前端是把一个大型前端应用拆成多个可独立开发、独立部署的小应用,再在运行时或构建时组合成一个整体的架构方式。PWAPWA(Progressive Web App,渐进式网页应用)是在普通网页基础上增加离线缓存、桌面安装入口和消息推送能力的网页应用形态。它仍然运行在浏览器中,不需要应用商店。UI设计UI 设计关注界面的视觉呈现(色彩、排版、控件样式);UX 体验设计关注用户完成任务的整体感受与路径效率。前者管「看起来怎样」,后者管「用起来顺不顺」。跨平台开发跨平台开发是用一套代码构建多个平台应用的方式,代表框架有 uni-app、Flutter、React Native、Taro。它降低重复开发成本,但平台差异仍需单独适配。可视化搭建可视化搭建是用拖拽、配置的方式组装页面或应用的技术,用户无需写代码即可完成布局与内容编排。常见于建站工具、活动页生成和后台装修器。公众号开发公众号开发是在微信公众平台的框架内,围绕图文推送、自定义菜单、用户消息和网页授权等能力进行的开发工作。它属于内容与消息载体,不是应用容器。企业官网企业官网建设是围绕企业展示、品牌传达和获客转化搭建官方网站的工作,通常包含信息架构设计、视觉设计、前端实现、内容管理和基础 SEO 配置。