Asta，SSR 特性优化的新框架

这是一件真实发生的事情

事情的起因是，公司的大型 vue 项目需要改造成 vue ssr，我们用了两个月的时间，一点点迁移，最终一切都成功了——

上线前一天，发现 qps 不到 100，所有努力白费

我们开始寻找瓶颈，发现主要的瓶颈有两处：

1. server 端的 vdom tree 的生成和遍历

vue，react，preact，fre 这类 vdom-based 框架必然需要在 server 端生成和遍历 vdom，这是一个极为巨大的开销，server 真的很脆弱

1. 组件数量

诚然，vue3 有一个 block tree 的优化，甚至 ssr 中可以将一些 html 直接编译出来，而避开了一些 vdom 开销，但这其实对复杂项目很鸡肋

因为复杂项目真正的瓶颈在于组件自身的开销，状态管理，生命周期，这些都不能被编译器很好的处理

于是我下定决心，用了一下午的时间写了 asta

它的 server 没有 vdom，只有 s 函数，用来拼接字符串

// jsx input
const component = ({list}) => <div>{list.map(i=><i>{i}</i>)}</div>
// server output
const component = ({list}) => s.openTag('div')+s.expression(list.map(i=>s.openTag('i')+s.text(i)+s.closeTag('i')))+s.closeTag('div')

同时！Asta 的组件仅仅只是字符串拼接函数，没有状态，没有生命周期，它保留了完整的 js 的语义

这里要提一点，那就是当 vue，svelte 等框架在推广他们的模板的时候，总是说 template 能做的编译 jsx 做不到

但这是明显的认知错误

jsx 其实说白了比模板也仅仅只是多了 js 的完整语义而已，在保留 js 语义的前提下，jsx 就只是 html 标签和 {} 表达式

最终结果

我们对一个简单页面，包含一个线上真实接口，几个简单组件，进行压测，实际结果如下：

1. nuxt2 150 qps (极低)
2. nuxt3 450 qps (模板优化立大功) 
3. marko 550 qps (没有 vdom)
4. asta 750 qps (没有 vdom，组件也很纯)

最终的压测结果，asta 简直碾压式吊打……

以上，这是 asta 做的第一个优化

在 client 端，asta 使用了一种新兴的方案，叫做 resumable，它的核心思想是将必要信息序列化到 html 里，然后根据交互懒加载 js，然后直接从 html 恢复，最终首屏幕是 0 js

这样子的谷歌评分就会一直 100 分，不会随着业务增长而降低，这是 O(1) 的

当然对于国内百度来说，意义不大，百度人家不认 lighthouse 评分，哈哈

总的来说，asta 是一个从两个方面进行特性优化的 ssr 框架，仅此而已，它不是既要还要，我也不是

这个回答不是为了碰瓷，我只是清楚的告诉大家 ssr 的几个瓶颈，和针对瓶颈做的针对优化

说实话，我不理解，瓶颈一直存在，前端这么卷，竟然真的没人去针对解决，这不对劲

总结

github 在这里，感兴趣可以跑一下 demo 试试手感

github.com/yisar/asta