【源码】基于Node、Vite和Nest的SSR同构方案

项目简介

本项目是一套完整且完善的SSR同构方案，运用不同技术栈逐步实现与优化。先借助Node - SSR和Gulp搭建基础的SSR同构方案，助开发者全面了解SSR核心与路线；再通过vite - plugin - ssr达成基于Vite和React的SSR，具有开箱即用的特性；最后利用Nest和Vite完成基于Nest的SSR同构方案，可作为全栈开发的骨架。

项目的主要特性和功能

1. 工程化构建：支持Babel + Gulp简单编译工程化，也可用Vite进行工程化处理，涵盖代码拼接、ES和JSX转换、TS支持、代码格式化、缓存处理等。
2. SSR核心功能：实现HTML的SSR渲染、路由管理、注水与脱水操作、事件绑定和CSS处理，解决JSX SSR的Server端问题，支持客户端ES6 JSX编译到Node.js执行及单独编译到JS以方便hydrate。
3. 路由同构处理：提供多种路由同构处理方案，如建立层级平衡处理和全部Page同构直出方案，减少页面闪动问题。
4. Vite集成：使用vite - plugin - ssr插件，具备代码分割、TS、SCSS支持、缓存和预构建等功能。
5. Nest集成：基于Nest实现基础的SSR，通过装饰器和过滤器完成组件绑定和渲染，用Vite作为中间件，具备HRM能力，简化客户端构建。
6. 压力测试：经过压力测试，在特定配置下性能稳定。

安装使用步骤

前提条件

假设用户已下载本项目的源码文件，且已安装Node.js和npm。

基础Node - SSR + Gulp方案

1. 安装依赖：在项目根目录下执行npm install。
2. 编译和启动：执行npm run dev，此命令会完成清理、构建浏览器使用的JS、构建Node Server需要的SSR代码、复制模板文件并启动服务器。

Vite - plugin - ssr方案

1. 切换到对应分支（vite_plugin_ssr）。
2. 安装依赖：执行npm install。
3. 开发模式：执行npm run dev启动开发服务器。
4. 生产构建：执行npm run build，将构建产物部署到Node.js平台或容器中运行。

Nest + Vite方案

1. 切换到对应分支（nest - ssr）。
2. 安装依赖：执行npm install。
3. 启动项目：执行npm run start:dev启动Nest服务器。

压力测试

在项目运行后，可使用以下命令进行压力测试： shell ab -c200 -n1600 http://127.0.0.1:3000/

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】