• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 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