Resumable - Qwik
Lastor
coding qwik 看到這個 resumable 不忍想起,以前曾在某處看到有人討論說,IT 圈很多新詞,很多是新框架為了標榜自己的特色,所創造的新詞彙
Lastor
qwik 提出的這個 resumable (可恢復的?) 似乎就只是對標 Next.js 的 hydration (水合 or 注水)
Lastor
Nuxt 體系不確定是不是也叫做 hydration 就是。為啥取這名子,應該單純是因為 React 的 API 就取這名子,所以大家就跟著這樣稱呼 (我猜
Lastor
React 頂層 API 在 app 初始化的地方,一般 SPA 情況會使用的是 render()
Lastor
但有另一個比較特別的叫做 hydrate()
ReactDOM – React
Lastor
這個就我理解上,他對 render 的差異是,如果 html 是空的,就用 render 把你寫的 template 給渲染到 DOM 上
Lastor
但如果 html 是有被「預渲染」過的,想以這份 html 重新掛上 React 的情況就是用 hydrate
Lastor
Next.js 就是依靠這個 API 來實現 React 的 SSR 渲染,先在 Node.js 跑一次,把 template 渲染出來,然後吐給瀏覽器之後用 hydrate 進行 mount
Lastor
理論上 hydrate 應該效能是要比 render 還省的,因為他不會去做 render 動作,也不會跟虛擬 DOM 做深度對比,就單純把 js 掛上去
Lastor
但從 user 角度來看,因為 html 已經被預渲染了,所以 user 會先看到畫面,但是 hydrate 可能還沒好,所以無法進行交互
Lastor
而這等待期間,其實會比 render 帶來的感受還糟糕,因為 CSR 的情況,user 一開始看到的可能是白畫面,那至少能知道還在 loading
Lastor
hydrate 相較之下,卻是先讓畫面出現,實則還在 loading,這體驗反而會產生一種感知落差
Lastor
而 Qwik 的 resumable 就是為了解決這問題,提出的新概念,簡單一句話就是,我不做 hydrate 了,用另一種思路來處理
Lastor
話說 React 的這個 hydrate 雖然一般是針對 SSR 用的,但我之前在 Preact 實驗過,前端手動預渲染的情況也是可以用 hydrate 去重新激活
Lastor
只是這個預渲染的操作,手工處理有點吐血,hydrate 在碰到條件渲染的情況,也會碰到一些意想不到的坑......
Lastor
真的想玩這玩意,還是用 Next.js 實在點,大大們造好的輪子已經幫我們解決這些鳥問題了