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
2.搭建时可能遇到的问题
1.vant4进行自动导入时报错:vant自动导入插件不完全支持ssr项目,需要关闭样式导入,在main.ts进行手动引入
2.pinia对预加载数据处理:必须在加载完数据后在进行store注册
1)store文件创建一个注册函数
2)在entry-client中进行注册
3.如何进行数据预加载
我们可以利用vue所提供的onServerPrefetch钩子搭配pinia进行数据缓存就可以实现了(如果是ssr项目,在页面渲染完成数据就已经展示出来了)
ex:
3.日志系统接入
1.为什么要有日志
简单来说就是为了更方便高效的排查问题
通过记录日志,可以在程序运行时打印关键变量、逻辑和流程,方便我们进行调试和排查问题。
同时通过对日志进行监控和分析,可以及时发现系统的异常行为和潜在问题。通过设置合适的告警规则,可以在系统发生异常或达到预警条件时及时通知开发,以便采取相应的措施。
AND在关键地方记录日志。方便和其它业务方解决问题的时候,获取问题的根源,及时甩锅(QAQ)。
2.如何生成日志
因为我们是node服务,所以我们选择使用log4j进行日志的生成
csharp
yarn add koa-log4
安装完成后,首先我们在logconfig中进行log的初始化配置
接着我们抛出日志写入方法,以及定义日志输出格式
1)抛出函数
2)定义格式
最后我们利用koa中间件特性进行日志记录
1)定义中间件
2)挂载中间件
以上都完成,我们就可以接入自己的日志平台,进行日志配置以及告警配置啦
4.参考示例
附:项目参考地址 github.com/StarsShines...