resumable

Componentのコードをdownload

Componentのcodeを実行

applicationのstateや、frameworkのstateを復元する

この部分の操作は、server側とclient側で二重で行うことになるので完全に無駄

この部分を省略したrenderingの方法をresumableと呼ぶ

参考

hydrationのoverheadについてと、その解決策としてのresumableの解説

「resumable」という単語だけでは伝わりづらいと思う

https://gyazo.com/85bc7611687ee8ec9026a60c3bf273ca https://www.builder.io/blog/hydration-is-pure-overhead

具体例

2つのcomponentからなるcomponentから生成したhtmlはただの2つのbuttonになる

server上でrenderingしたときはここにevent handlerなどもattatchされている

しかし、clientに送るためにserializeする過程で全部消えてただのhtmlになる

RECOVERY部分を排除すればoverheadを消せる

手順

WHAT, WHERE, APP_STATE, FRAMEWORK_STATEを全て含んでserializeしたHTMLを生成する

event handlerをglobalなものとして扱う

event handlerを遅延して回復する

server上でやったことを繰り返す必要がない

eventが呼ばれてからattachする

必要になってからevent handlerを作成する

使われないかもしれないものをコストをかけて全部作るhydartionと異なる点

どんな感じでserializeしているのか

code:html

<div q:host>

<div q:host>

<button on:click="./chunk-a.js#greet">Greet</button>

</div>

<div q:host>

</div>

</div>

<script>/* code that sets up global listeners */</script>

<script type="text/qwik">/* JSON representing APP_STATE, FRAMEWORK_STATE */</script>

内容によるか

serverで完結するものならclientはzero jsになる

このコード、上の具体例のやつね

code:js

export const Main = () => <>

<Greeter />

<Counter value={10}/>

</>

export const Greeter = () => {

return (

<button onClick={() => alert('Hello World!'))}>

Greet

</button>

)

}

export const Counter = (props: { value: number }) => {

const store = useStore({ count: props.number || 0 });

return (

<button onClick={() => store.count++)}>

{count}

</button>

)

}

メモリ消費量も少ない

event handlerは実行後にメモリ解放する