SEO的问题处理:从0到1使用Vite + Vue 创建一个SSR模版项目

什么是 SSR？​

Vue.js 是一个用于构建客户端应用的框架。默认情况下，Vue 组件的职责是在浏览器中生成和操作 DOM。然而，Vue 也支持将组件在服务端直接渲染成 HTML 字符串，作为服务端响应返回给浏览器，最后在浏览器端将静态的 HTML“激活”(hydrate) 为能够交互的客户端应用。

一个由服务端渲染的 Vue.js 应用也可以被认为是“同构的”(Isomorphic) 或“通用的”(Universal)，因为应用的大部分代码同时运行在服务端和客户端。

为什么要用 SSR？​

与客户端的单页应用 (SPA) 相比，SSR 的优势主要在于：

1. 更快的首屏加载：这一点在慢网速或者运行缓慢的设备上尤为重要。服务端渲染的 HTML 无需等到所有的 JavaScript 都下载并执行完成之后才显示，所以你的用户将会更快地看到完整渲染的页面。除此之外，数据获取过程在首次访问时在服务端完成，相比于从客户端获取，可能有更快的数据库连接。这通常可以带来更高的核心 Web 指标评分、更好的用户体验，而对于那些“首屏加载速度与转化率直接相关”的应用来说，这点可能至关重要。
2. 统一的心智模型：你可以使用相同的语言以及相同的声明式、面向组件的心智模型来开发整个应用，而不需要在后端模板系统和前端框架之间来回切换。
3. 更好的 SEO：搜索引擎爬虫可以直接看到完全渲染的页面。

这个是git的案例地址 https://github.com/bluwy/create-vite-extra

1. 输入以下命令进行创建vue vite ssr 项目模板

1. 如图2所示他会让你选择一些框架 我们这边选择 vue
2. 如图3所示选择第一个即可 第二个和第一个的区别是多了一个.vscode的文件
3. 然后如图4所示 大家选择ts或者js都可以
4. 如图5所示就是新建项目之后的内容

1. 如图1所示pnpm i 进行依赖的下载
2. pnpm run dev 启动程序 如图2所示 启动后如图3所示

1. index.html
2. server.js # 主应用服务器 类似于启动文件
3. src/
4. main.js # 导出环境无关的（通用的）应用代码
5. entry-client.js # 将应用挂载到一个 DOM 元素上
6. entry-server.js # 使用某框架的 SSR API 渲染该应用

1. 如图1所示右键显示网页源代码 看有没有数据
2. 如图2所示 查看网络请求 刷新页面看有没有返回页面