halo 大家好，俺是 132，今天给大家带来一篇 ssr 框架的文章
背景
新公司需要做 ssr 方案，俺前前后后做了很多方案，最终公司使用了 vite+vue2.7 的方案，然后 esbuild 版本没有采用，所以整理了一下拿来开源
开源只是提供一种不使用 webpack 做框架的思路，不会刻意维护，但是可以肯定的是，它具有一定的完成度
remix-like
前端框架的 ssr，也就是同构方案，知名的有 nextjs，nuxtjs，remix，等等
vkt 复现了一个 vue 版本的 remix，它长这样：
<template>
<div>{{ msg }}</div>
</template>
<script>
import { useLoaderData } from 'venti'
import { computed } from 'vue'
export function loader() {
return {
msg: 'Hello world!',
}
}
export default {
setup() {
const data = useLoaderData()
const msg = computed(() => data.value.msg)
return {
msg,
}
},
}
</script>
复制代码其中，loader 跑在服务端，负责数据的并行处理，而组件跑在 clent 端，就是正常的 vue setup
这也是 remix 的核心思路，它通过 数据/UI 分离，做到数据并行加载，没有瀑布问题
与此同时，使用嵌套路由也可以做到组件并行加载，通过两个方面的并行调度，整体的性能就会比 nextjs 好一个档次
落地
在公司，我们想要将一个大型 spa shi 山迁移到 ssr 架构上来，是非常困难的，所以我们想了一个渐进式的方案：微前端
比如我们有 a b c 三个路由，其中 c 需要转 ssr，那么我们只需要用微前端串联起来，c 单独构建，然后最终走微前端的路由即可
keep-alive 则是通过缓存 dom 来实现
最终效果，就是用户除了首次刷新，感受不出来这是一个 ssr 网站
我们正在迁移，目前来看，lighthouse 给的指标就是个玄学：
这玩意贼鸡儿离谱，你有一项不达标，直接 80 分，三项不达标，直接 20 分，推特都没几分，我不想说啥了
和其他方案的对比
| 构建工具 | 瀑布问题 | 其他 | |
|---|---|---|---|
| nextjs | webpack | 有 | react |
| remix | esbuild | 无 | react |
| nuxtjs | webpack/vite | 有 | vue |
| venti | esbuild | 无 | vue |
| venti-内部版 | vite | 无 | vue2.7 |
列这个对比，只是想给大家看看，大家在做类似的方案的时候，用不同的工具，不同的作者喜好
俺开源东西从来不打什么企业级的口号，因为人在江湖飘，谁还不是在 shi 山上跳舞，写个框架只是分分钟的事情，真正的工作量在砍 shi 山的过程中
vue 吐槽
说实话，vue 的坑是真的不少，手感也很差，为了搞 venti，还给 esbuild-vue 提了几个 pr，之前估计根本没人搞过
vite 的坑也超级多，虽然可以通过 rollup 规避掉一部分，但……rollup 还是比较慢的
但是还是那句话，大家都在打工，纵使我知道如果让我搞 react/fre，我会搞得更完美，但 shi 山恰恰是 vue，只能硬着头皮砍
但仅限于工作，工作之外，我是一点也不想碰 vue 了，不想浪费时间和精力，所以题目我也写明了，开源即弃坑
toto
大家好久不见了鸭，时隔半年，我又开始写代码了，工作接下来主要还是落地 ssr，工作之外也可以说一下，我在搞一个渲染引擎，叫做 homo，鸿蒙的谐音
它类似 kraken 或 skyline，但代码是我精心设计过的，非常轻量
然后就是 c 站，最近又有人冒充 c 站了，冒牌不可怕，谁长得像盗版谁尴尬，c站我近期也会全面复活了，因为十月份有死神，俺要追番
然后就是游戏和原神，我确实一直在研究游戏，但因为最近工作太忙了，所以真的忙不过来
总之就是，接下来要搞的坑特别多，完全没有时间和精力给 venti 了
望天，一千字了，不说了再贱
啊放一个 github 地址，大家有兴趣可以看看