一些前端小知识
服务器端渲染 (SSR)
服务器端渲染 (SSR) 是什么？服务器端渲染 (Server-Side Rendering, SSR) 是一种 Web 页面渲染方式，它指的是将页面的 初始 HTML 内容 在 服务器端 完成生成，然后将这个完整的 HTML 页面直接发送给浏览器。 这与传统的客户端渲染 (Client-Side Rendering, CSR) 形成对比。
SSR 的核心原理
- 用户发起请求： 浏览器向服务器请求一个页面。
- 服务器处理： 服务器接收请求后，运行 Node.js 程序（或其他支持 SSR 的环境），根据请求的数据，将 Vue、React 等前端组件直接渲染成包含完整内容的 HTML 字符串。
- 返回完整 HTML： 服务器将这个完整的、带有内容的 HTML 文件作为响应发送给浏览器。
- 浏览器显示： 浏览器接收到 HTML 后，可以立即显示页面的内容，用户看到的是一个完整的页面，无需等待 JavaScript 加载。
- 激活 (Hydration)： 页面内容显示后，浏览器开始下载并执行 JavaScript 文件。然后，JavaScript 将静态的 HTML 页面**“激活”（或称之为注水**），使其具备交互能力和响应式特性。
SSR 的主要优点更快的首屏加载：服务器直接返回完整 HTML，浏览器无需等待 JavaScript 下载、执行和数据获取，用户能更快看到页面内容。 更好的 SEO：搜索引擎爬虫可以直接抓取到完整的 HTML 内容，这对那些对 SEO（搜索引擎优化）要求高的网站（如新闻、电商）非常重要。 无障碍性：即使在网络较慢或用户禁用了 JavaScript 的情况下，页面内容也能在一定程度上正常显示。
SSR 的缺点
- 服务器负载增加： 每次请求都需要在服务器上执行渲染逻辑，这会消耗更多的 CPU 资源和内存。
- 开发复杂性： 需要处理同构代码（一套代码在客户端和服务器端运行），这引入了更复杂的环境配置和生命周期管理问题。
单页应用 (SPA)
单页应用 (SPA) 是什么？单页应用 (Single-Page Application, SPA) 是一种 Web 应用程序或网站的模型，它最核心的特点是：整个应用只由一个 HTML 页面构成。 它通过动态重写当前页面的内容来与用户交互，而不是像传统网站那样，每次点击链接都从服务器加载整个新的页面。
核心工作方式SPA 采用了典型的客户端渲染 (CSR) 模式：
- 初次加载： 用户第一次访问网站时，服务器会返回一个非常简单的 HTML 文件，这个 HTML 文件中包含了一个空的或最小化的主体结构（例如一个
<div id="app"></div>）和一个用于加载 JavaScript (JS) 文件的标签。- JS 接管一切： 浏览器下载并执行这个 JS 文件。这个 JS 文件就是您的前端框架（如 Vue、React、Angular）的代码。
- 渲染内容： 前端框架运行后，在浏览器端通过 JS 动态获取数据、构建 DOM 结构，并将其插入到那个主体结构中（例如
#app元素）。- 内部导航： 当用户在应用内部点击链接或切换“页面”时，URL 会改变（通过前端路由技术，例如 Vue Router），但 浏览器不会重新加载整个页面。JS 会拦截这个请求，根据路由规则，动态地销毁当前组件，然后渲染新的组件和内容。
SPA 的主要优点流畅的用户体验：页面切换速度快，因为只下载需要更新的局部数据和组件，避免了每次都重新加载头部、底部等公共资源，体验更像原生 App。 前后端分离：前端专注于 UI 渲染和交互逻辑，后端专注于提供 API 接口，职责清晰，利于团队协作和独立部署。 易于构建复杂应用：借助现代前端框架的组件化和模块化能力，更容易管理复杂的状态和交互。
SPA 的主要缺点不利于 SEO：搜索引擎爬虫初次访问时，HTML 文件内容是空的或很少的，大部分内容需要等待 JS 执行后才能看到，导致内容难以被抓取。 首次加载较慢：第一次加载时需要下载所有应用所需的 JS、CSS 等资源文件，文件可能较大，导致白屏时间较长。