SSR resumable framework
yarn build
yarn start
input:
import { addCount } from '~action/count.js' // esbuild loader return path in server
// state: will run in server and inject to client
export const loader = async (req) => {
return {
count: req.query.count,
}
}
// view: will run in both client and server, but s() in server h() in client
export default ({ count }) => {
return (
<main>
<button $onclick={addCount}>{count}</button>
</main>
)
}
output:
<main><button $onclick="./action/count.js?mod=addCount" data-id="1">0</button></main>
Sdom in server, Vdom in client
// jsx input
const view = ({list}) => <div>{list.map(i=><i>{i}</i>)}</div>
// server output
const view = ({list}) => s.openTag('div')+s.expression(list.map(i=>s.openTag('i')+s.text(i)+s.closeTag('i')))+s.closeTag('div')
// client output
const view = ({list}) => h('div',{children:[list.map(i=>h('i',{children:[i]}))]})
asta 是一个 ssr 特化的框架,它核心的两个优化
- client 端 0 js
asta 第一个优化,首屏幕 html 是有事件的,js 根据交互懒加载,这种概念也被称之为 Resumable
,不需要 hydrate
, inspird by qwik.js
优化成果是不管业务多么复杂,都可以谷歌评分 100 分
- server 端只有 html
asta 第二个优化,就是在 server 端只拼接 html,没有 vdom 的遍历,后续直接将 html 当作结构来使用,inspired by marko.js
两个优化,分别解决了 ssr 世界里的两个瓶颈
asta 是无敌的,毫不夸张