Server side rendering với Hydration lãng phí tài nguyên như thế nào?

Tại sao nên đọc bài này?

• Tìm hiểu cách Server side rendering mà hầu hết các framework/lib như React, Nextjs, Vuejs, Svelte đang làm hiện tại

• Có cách để tối ưu hơn cho SSR

Hydration - Làm tươi

In web development, hydration or rehydration is a technique in which client-side JavaScript converts a static HTML web page, delivered either through static hosting or server-side rendering, into a dynamic web page by attaching event handlers to the HTML elements. Trong xây dựng web, hydration hay rehydration là một cách để client-side JavaScript biến một trang HTML tĩnh, được dựng lên từ hosting static hoặc server-side rendering thành một web động bằng việc gắn các hàm xử lý sự kiện vào các Element HTML

Vậy hydration làm việc ra sao?

• WHAT : Nó là chỗ logic mà mình thường code khi user trigger một event.

• WHERE: Trong cả mớ Element của cây DOM thì mình phải biết gắn cái WHAT ở trên vào Element nào cho đúng.

• APP_STATE : là cái state của app mình hay viết á, mọi người hay hiểu ngắn gọn nó là state. Nếu không có APP_STATE thì các web của các bác không khác gì web tĩnh show ra cho user cả. Nhìn ngon đó nhưng không làm gì được 😝

• FRAMEWORK_STATE: Là những state nội tại của framework mà mình đang dùng để lưu trữ những thứ như component này nằm đâu, ứng với Element nào trên cây DOM, rồi một component đang ở Lifecycle nào. Nếu không có FRAMEWORK_STATE thì cái web của các bác sẽ không biết update lại Element nào khi APP_STATE thay đổi cả.

1. Download code của component

2. Chạy code đó

3. Khôi phục lại WHAT(APP_STATE + FRAMEWORK_STATE) và WHERE để biết được tầm vực của event handler

4. Gắn cái WHAT (Code handler logic interactive) vào đúng cái WHERE (DOM Element)

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>
  )
}

<button>Greet</button>
<button>10</button>

Resumability: Giải pháp thay thế Hydration mà không phải double work

1. Seriallize tất cả data về WHAT (Bao gồm cả FRAMEWORK_STATE + APP_STATE) và WHERE vào HTML để gửi xuống cho Browser

2. Một thằng “Global event handle” để hứng tất cả các event. Tại sao lại cần global? Tại vì có event handler ở mức global thì mình không cần phải chờ event attach vào đúng Element nào thì mới có thể chạy được

3. Một thằng có thể lazy load code WHAT tương ứng với các event nhận được

• Push (hydration): Download code, chạy nó, sau đó gắn đống code xử lý event vào đúng Element

• Pull (Resumability): Không làm gì cả, khi nào user trigger một event thì lazy load code tương ứng rồi xử lý event

<div q:host>
  <div q:host>
    <button on:click="./chunk-a.js#greet">Greet</button>
  </div>
  <div q:host>
    <button q:obj="1" on:click="./chunk-b.js#count[0]">10</button>
  </div>
</div>
<script>/* code that sets up global listeners */</script>
<script type="text/qwik">/* JSON representing APP_STATE, FRAMEWORK_STATE */</script>

The cost of JavaScript in 2019

Note: If you prefer watching a presentation over reading articles, then enjoy the video below! If not, skip the video and read on. One large change to the cost of JavaScript over the last few years has been an improvement in how fast browsers can parse and compile script.

https://v8.dev/blog/cost-of-javascript-2019

Về việc dùng bộ nhớ ở pattern Hydration

Only load what users need

Tổng kết

Khi nào user tương tác với logic gì thì mới load logic đó xuống và chạy thôi