别再说你会SPA开发了，这5个核心你真的搞懂了吗?
前言
此spa非彼spa,不是你所熟知的spa。你所熟知的spa作者肯定是没有你熟悉的。
我们这里指的是在前端开发中的一种模型，叫作单页应用程序，顾名思义，就是整个项目只有一个页面，而页面中的内容是动态的，以组件的形式展示，靠路由来映射组件。
spa的优点
组件化开发，易于维护 由于组件是独立的，当需要修改某个特定功能时，只需专注于对应的组件，而不必担心对整个应用程序造成影响。这大大简化了调试和维护的工作量。
一旦创建了一个组件，它就可以在应用的不同部分重复使用。例如，一个导航栏组件可以在网站的每个页面中使用，只需要编写一次代码。
页面切换快，体验好 在传统的多页应用中，每次页面跳转都会触发向服务器请求新页面的HTML文档，这通常包括重新加载CSS、JavaScript等资源文件，导致较长的等待时间。而在SPA中，初始加载时就会下载大部分必要的资源，后续的页面切换仅涉及数据的获取和局部DOM更新，无需重新加载整个页面。
前后端分离，提升开发效率 在前后端分离的架构中，前端团队专注于用户界面和用户体验的设计，而后端团队则负责业务逻辑和数据处理。这种分工允许两个团队同时工作，减少了相互等待的时间，每个团队只需关注自己的部分，降低了整体项目的复杂度，有助于提高代码质量和可维护性。
减轻服务器压力，提高性能
减少服务器请求次数:
- MPA的问题：
每次用户导航到新页面（如点击链接、提交表单），浏览器会向服务器发起完整的新请求，服务器需返回包含HTML、CSS、JavaScript等资源的完整页面。若用户频繁切换页面，服务器需处理大量重复请求，导致负载升高。 - SPA的优势：
- 应用仅首次加载时请求必要资源（HTML、CSS、JS）。
- 后续交互通过客户端路由（如React Router、Vue Router）在内存中切换视图，无需向服务器请求新页面。
- 数据更新通过轻量级API调用（如RESTful API或GraphQL）完成，仅传输JSON等精简数据，而非完整页面。
- 结果：服务器仅需处理少量初始请求和API调用，显著降低负载。
利用浏览器缓存优化资源传输
- MPA的局限：
每个页面依赖独立的资源（如/page1.html、/page2.js），即使部分资源（如全局CSS）未更改，浏览器也可能因URL不同而无法复用缓存，导致重复下载。 - SPA的优化：
- 所有资源通过单一入口（如index.html）加载，浏览器可高效缓存JS、CSS等静态资源。
- 服务端渲染（SSR）或静态生成（SSG）技术还能缓存渲染后的HTML，进一步加速后续访问。
- 结果：重复访问时，浏览器直接从本地加载资源，减少服务器带宽消耗。
spa的缺点
初次加载慢（Initial Load Time）：
原因分析：
- 资源体积庞大：SPA 需在首次加载时一次性下载核心 JavaScript、CSS、第三方库等资源（如 React、Vue、Axios），即使后续页面仅需少量功能，用户仍需等待完整依赖的加载。
- 渲染阻塞：传统 SPA 采用单文件入口（如 index.js），浏览器需解析、编译、执行大量代码后才能显示首屏内容，延迟明显。
- 网络依赖性强：若用户网络环境差（如移动网络或高延迟地区），大文件下载和解析时间会被放大。
影响：
- 用户体验差：用户需长时间等待首屏渲染，可能导致流失（如电商网站跳出率升高）。
- 性能评分低：Lighthouse 等工具会因首屏加载时间过长给出低分（如 FCP、LCP 指标）。
不利于搜索引擎优化（SEO） 下面是一份使用vue开发的网页
原因分析：
- 内容动态渲染：SPA 的内容通常通过 JavaScript 在客户端渲染（CSR），搜索引擎爬虫（如 Googlebot）可能无法执行 JS，导致仅抓取到空 HTML 或初始占位符（如 div id="app"></div>）。
- 元数据缺失：动态生成的标题（<title>）、描述（<meta name="description">）、OpenGraph 标签等可能未被爬虫正确识别。
- 延迟索引：即使搜索引擎支持 JS 渲染（如 Google 的 Crawl via HTTP/2），内容仍需额外时间处理，导致 SEO 效果滞后。
影响：
- 排名下降：内容无法被有效索引，长尾关键词流量减少。
- 信任度降低：缺失元数据（如标题、描述）可能导致搜索结果中链接点击率（CTR）下降。
金牌优化师ssr
想解决这两个问题，首先就是要加载完整的html以便搜索SEO搜索引擎可以直接搜索到，第二就是就首页先进行加载，而不是等所有的组件都加载完成后才有首页，而我们的金牌优化师刚刚好能同时解决两个问题。
我们要知道在渲染浏览器页面之前，html要先将后端的的响应拿到才能开始给浏览器解析渲染，而我们的ssr是想跳过后端发送给前端响应，而是拿到前端的代码直接交给浏览器进行渲染，这样首页的内容不是js渲染的，而且不用等前端拿完所有的后端响应才开始解析然后给浏览器，而是执行到这个后端接口直接给浏览器html代码就可以渲染在页面上了
接下来我们看看后端接口怎么写，我们可以先下载node.js的一个框架
npm i express
这里我们使用字符串来当作前端给过来的代码
const express = require('express');
const app = express();
const Vue = require('vue');
const vue3Compiler = require('@vue/compiler-ssr');
const renderer = require('@vue/server-renderer')
const vueapp = {
template: `
<div>
<h1 @click='add'>Hello, SSR!</h1>
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</div>
`,
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
}
},
methods: {
add() {
this.items.push(`Item ${this.items.length + 1}`);
}
}
}
// 读取vue文件，编译成js代码
vueapp.ssrRender = new Function('require', vue3Compiler.compile(vueapp.template).code)(require);
// console.log(vueapp.ssrRender());
app.get('/', async (req, res) => {
let vapp = Vue.createSSRApp(vueapp);
let html = await renderer.renderToString(vapp); // 渲染成html
const title = 'SSR Demo';
let ret = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${title}</title>
</head>
<body>
${html}
</body>
</html>`;
res.send(ret);
})
app.listen(3000, () => {
console.log('SSR server is running on port 3000');
});流程就是:
- 1. 创建 node 服务
- 2. 读取 vue 组件
- 3. 借助 vue 自带编译器函数编译 vue 组件 得到 AST
- 4. 借助 vue 自带渲染器函数渲染 AST 得到 html
- 5. 拼接 html 模板
- 6. 发送响应