vite + vue3 + ts + SSR 使用 ssr 框架

ssr 框架，是为前端框架，在服务端渲染的场景下，所打造的开箱即用的、服务端渲染框架。面向 Serverless，同时支持 React，Vue2，Vue3。同时支持 Webpack/Vite。

什么情况下你应该选择 ssr 框架

• 需要在 Node.js 与前端框架结合的场景使用，与其他纯前端的框架不同 ssr 框架是专为服务端渲染场景或者 Node.js 与前端结合的场景打造的框架
• 需要一个开箱即用的服务端渲染能力，不需要手动去组合不同的前端框架与服务端框架之间的联系
• 需要框架层面的渲染降级能力，在服务端渲染出错时自动降级到客户端渲染
• 需要一个配置简单逻辑清晰的框架， ssr 框架的渲染逻辑和应用构建逻辑是同类型框架中最清晰的
• 可能会改动技术栈，如从 Vue2 升级为 Vue3，从 Vue3 降级为 Vue2 或 React/Vue 互相切换
• 需要在服务端渲染场景下开箱即用使用 antd vant 等流行 ui 库
• 需要能够同时支持 Webpack, Vite 两种开发工具，以便同时得到快速的启动速度 HMR 速度以及稳定的生产环境代码
• 需要在 Vue3 场景支持 Script Setup 以及 pinia 作为数据管理方案

应用部署：

• 传统 nodejs 形式部署：Nest.js 应用部署；Midway 应用部署。
• Serverless 的形式进行部署：Nest.js Serverless 形式部署；Midway Serverless 形式部署。

注意：在 Midway.js Nest.js 场景下我们都已实现了一键部署到 Serverless 平台的能力。但底层实现略有差异。如需要大量使用 Serverless 平台提供的能力，我们建议创建 Midway.js 类型的应用

Node 框架：

• Express.js 是 Node.JS 诞生之初，是一款基于 Node.js 以及 Chrome V8 引擎，快速、极简的JS服务端开发框架。
• Koa.js 是一款微型 Web 框架，写一个 hello world 很简单，但 web 应用离不开 session，视图模板，路由，文件上传，日志管理。这些 Koa 都不提供，需要自行去官方的 Middleware 寻找。
• Egg.js 是基于 Koa.js，解决了上述问题，将社区最佳实践整合进了Koa.js，另取名叫 Egg.js，并且将多进程启动，开发时的热更新等问题一并解决了。这对开发者很友好，开箱即用，开箱即是最(较)佳配置。
• Midway 是阿里团队，基于渐进式理念研发的 Node.js 框架，结合了 OOP和函数式两种编程范式。以 egg 是作为底层框架，加上了良好的 TypeScript 的定义支持等众多新特性，推出了Midway。
• Nest.js 使用渐进式 JavaScript，内置并完全支持 TypeScript 并结合了 OOP（面向对象编程），FP（函数式编程）和 FRP（函数式响应编程）的元素。Nest 框架底层 HTTP 平台默认是基于 Express 实现的。 Nest 旨在成为一个与平台无关的框架。通过平台，可以创建可重用的逻辑部件，开发人员可以利用这些部件来跨越多种不同类型的应用程序。Nest 目前有两个支持开箱即用的 HTTP 平台：express 和 fastify 可以在项目中直接引入。Nest属于前端 TypeScript大趋势下，深度使用注解特性，并提供各种增强开发体验的框架，它提供了一套完整的解决方案，包含了认证、数据库、路由、http 状态码、安全、配置、请求等开箱即用的技术。

安装

npm init ssr-app project-name

? Select a framework: > - Use arrow-keys. Return to submit.
   nestjs-vue3-ssr(Support Vite and Script Setup)
    nestjs-vue3-ssr-pinia(Support Pinia, Vite and Script Setup)
    nestjs-react-ssr(Support Vite)
    nestjs-vue-ssr
>  midway-vue3-ssr(Midawy3.0, Support Vite and Script Setup)
    midway-react-ssr(Midawy3.0, Support Vite)
    midway-vue-ssr(Midawy3.0)
    micro-app-ssr(micro-frontends + ssr)

cd project-name

npm install
npm start

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com