Day11: Svelte 內建 element 與 SSR 淺談

第 12 屆 IT 鐵人賽影片教學 — 30 天從 0 到 1 學 Svelte

◼︎ 本集內容：談 svelte 的內建 element 與 SSR 教學

◼︎ 相關連結：

・Svelte 官網 https://svelte.dev

Transcript

1. 第 12 屆 IT 鐵⼈賽
   30 天從 0 到 1 學 Svelte
   Day11 - svelte 內建 element 與 SSR 簡介
   

   View Slide

2. 第 12 屆 IT 鐵⼈賽
   svelte 內建 element 類型
   遞迴使⽤元件
   可對 window 物件做操作
   與 類似，可操作 body
   可操作 head
   可以動態引入 Svelte 元件
   可針對元件分別指定編譯器選項
   

   View Slide

3. 第 12 屆 IT 鐵⼈賽
   遞迴使⽤元件
   本範例取⾃官⽅ API ⽂件
   

   View Slide

4. 第 12 屆 IT 鐵⼈賽
   
   

   View Slide

5. 第 12 屆 IT 鐵⼈賽
   好處：把⿇煩事交給 Svelte
   Svelte 會在正確的時間點處理事件監聽器
   不⽤煩惱 SSR 的問題
   不需要另外寫監聽器修改變數
   

   View Slide

6. 第 12 屆 IT 鐵⼈賽
   
   處理
   

   View Slide

7. 第 12 屆 IT 鐵⼈賽
   使⽤ 的好處
   根據元件、⾴⾯不同分別管理 內容
   當元件銷毀時，svelte 也會刪除、修改對應內容
   ⽀援 SSR，⽅便實作 SEO
   

   View Slide

8. 第 12 屆 IT 鐵⼈賽
   淺談 Svelte 當中的 SSR
   

   View Slide