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

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...

相关推荐
qq_3325394513 分钟前
React 前端框架推荐
前端·react.js·前端框架
拉不动的猪31 分钟前
刷刷题34(uniapp中级实际项目问题-1)
前端·vue.js·面试
奔跑的露西ly1 小时前
【HarmonyOS NEXT】实现文字环绕动态文本效果
前端·javascript·html·harmonyos
irving同学462383 小时前
Next.js 组件开发最佳实践文档(TypeScript 版)
前端
哟哟耶耶3 小时前
node.js-WebScoket心跳机制(服务器定时发送数据,检测连接状态,重连)
node.js
刺客-Andy3 小时前
React Vue 项开发中组件封装原则及注意事项
前端·vue.js·react.js
marzdata_lily3 小时前
从零到上线!7天搭建高并发体育比分网站全记录(附Java+Vue开源代码)
前端·后端
小君3 小时前
让 Cursor 更加聪明
前端·人工智能·后端
顾林海3 小时前
Flutter Dart 异常处理全面解析
android·前端·flutter
残轩3 小时前
JavaScript/TypeScript异步任务并发实用指南
前端·javascript·typescript