SSR从入门到放弃

1.SSR背景介绍

1.什么是ssr

SSR 特别指支持在 Node.js 中运行相同应用程序的前端框架（例如 React、Preact、Vue 和 Svelte），将其预渲染成 HTML，最后在客户端进行水合处理

2.SSR优缺点

优点

搜索引擎优化（SEO）：SSR允许搜索引擎爬取页面HTML结构，因为服务端已经生成了与业务相关的HTML，这有利于SEO。
首屏呈现渲染：用户无需等待页面所有JavaScript加载完成就可以看到页面视图，这减少了白屏时间，使得首屏内容能够更快地展现给用户。

缺点

项目复杂度：整个项目的复杂度会增加，需要考虑到库的支持性和代码的兼容性。
性能问题：每个请求都需要创建多个实例，这可能会导致性能问题，如消耗增大和污染。
服务器负载：相比于前后端分离，服务器负载会更大，因为服务器需要处理更多的渲染工作。

3.SSR项目介绍

本次用于展示的TEST-SSR是基于vue3+vite所构建的ssr项目，接入了日志、告警、内置网关降级等操作。

核心特点：同构（同一套代码运行在双端）无论是ssr渲染还是csr渲染，都使用同一套代码进行开发，无需后续进行重复开发。

2.SSR项目搭建

1.如何搭建一个SSR项目

我们要如何搭建一个SSR项目呢？

目前常见的SSR项目方案有nuxt、nest等，本次我们选择的是基于vite的SSR方案（vite-ssr），相对于其他的脚手架来讲更加灵活。搭建方式： 1.参考vite官网的服务端渲染方案，进行配置构建

2.接入自动化注册，自动引入，vant等常用配置插件

3.目录结构介绍

vbscript 复制代码

├── README.md                        Readme
├── logconfig                        日志生成配置
├── logs                            日志存放处（线上在home下）
├── nodeInstall                      docker构建时需要安装的依赖
├── public                           静态资源
│   ├── favicon.ico                 icon
├── dist                             构建完成的资源存放路径
│   ├── client                      打包后的静态资源
│   ├── server                      服务器渲染
├── package.json                     管理项目依赖外部模块
├── index.html                       模版html
├── server-dev.js                    dev服务主入口
├── server-prod.js                   prod服务主入口
├── vite.config.ts                   vite相关配置
├── proxy.ts                         代理配置
├── build.sh                        构建配置（dockerfile内容由此出录入）
├── build_.sh                        本地校验构建配置（dockerfile内容由此出录入）
├── build_csr.sh                      客端构建配置（暂时无用）
├── process.json                    部署后pm2使用
├── Dockerfile                       docker（内容在build.sh中写入）
├── src                              源码目录
│   ├── App.vue                     起始 Vue-component，可以理解成 Vue 的 root Component
│   ├── common                      工具函数/方法
│   │    ├──css                    公共css
│   │    ├──hooks                  公共hooks
│   │    ├──js                     公共utils
│   ├── vite-env.d.ts               防止ts报错
│   ├── entry-client.ts             客端加载入口文件
│   ├── entry-server.ts             服务端加载入口文件
│   ├── main.ts                     公共入口文件
│   ├── pages                       页面
│   │    ├──模块name                对应模块的页面
│   ├── components                  通用组件
│   │    ├──模块name                对应模块的组件
│   ├── api                         接口
│   │    ├──模块name.ts             对应模块的api
│   ├── assets                      源静态资源
│   │    ├──模块name                对应模块的静态资源
│   ├── constant                    全局变量
│   ├── router                      前后端同构路由
│   ├── store                       前后端同构Store(pinia)
│   │    ├──模块name.ts              对应模块的store
│   └── types                       全局ts声明
...其他为自动导入配置aut-/components.d、postcss.config-rem转化、ts相关配置、prettierrc美化、eslint