Day11: Svelte 內建 element 與 SSR 淺談

September 20, 2020

180

Day11: Svelte 內建 element 與 SSR 淺談

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

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

◼︎ 相關連結：

・Svelte 官網 https://svelte.dev

Kalan

September 20, 2020

Tweet

More Decks by Kalan

See All by Kalan

單頁式應用中的無障礙設計

0

750

選擇 Svelte 的三個理由 - JSDC

0

300

Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21

0

150

状態管理を楽にする道

1

320

Day25. 如何解析 HTML 語法

0

130

Day24. Svelte 如何編譯程式碼（2）

0

170

Svelte 如何編譯程式碼（1）

0

160

Day22. Svelte 經驗談

0

140

Day18. UI 實戰篇 - 圖片檢視器

0

130

Other Decks in Programming

See All in Programming

開発者とQAの越境で自動テストが増える開発プロセスを実現する

1

190

PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications

2

520

良いユニットテストを書こう

8

2.8k

[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ！

0

480

Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道

0

160

なまけものオバケたち -PHP 8.4 に入った新機能の紹介-

1

120

Security_for_introducing_eBPF

0

110

Fibonacci Function Gallery - Part 1

0

220

Recoilを剥がしている話

5

6.8k

Keeping it Ruby: Why Your Product Needs a Ruby SDK - RubyWorld 2024

0

190

たのしいparse.y

3

120

アクターシステムに頼らずEvent Sourcingする方法について

4

290

Featured

See All Featured

ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020

111

49k

XXLCSS - How to scale CSS and keep your sanity

247

1.3M

Let's Do A Bunch of Simple Stuff to Make Websites Faster

507

140k

Making the Leap to Tech Lead

133

9k

[RailsConf 2023] Rails as a piece of cake

53

5k

Measuring & Analyzing Core Web Vitals

4

170

Evolution of real-time – Irina Nazarova, EuRuKo, 2024

5

450

Designing Dashboards & Data Visualisations in Web Apps

229

52k

A better future with KSS

238

17k

Fashionably flexible responsive web design (full day workshop)

405

66k

Building an army of robots

302

44k

4 Signs Your Business is Dying

181

21k

Transcript

第 12 屆 IT 鐵⼈賽 30 天從 0 到 1
學 Svelte Day11 - svelte 內建 element 與 SSR 簡介
第 12 屆 IT 鐵⼈賽 svelte 內建 element 類型 <svelte:self
/> 遞迴使⽤元件 <svelte:window /> 可對 window 物件做操作 <svelte:body /> 與 <svelte:window/> 類似，可操作 body <svelte:head /> 可操作 head <svelte:component /> 可以動態引入 Svelte 元件 <svelte:options /> 可針對元件分別指定編譯器選項
第 12 屆 IT 鐵⼈賽 <svelte:self /> 遞迴使⽤元件本範例取⾃官⽅ API
⽂件
第 12 屆 IT 鐵⼈賽 <svelte:window>
第 12 屆 IT 鐵⼈賽好處：把⿇煩事交給 Svelte Svelte 會在正確的時間點處理事件監聽器不⽤煩惱
SSR 的問題不需要另外寫監聽器修改變數
第 12 屆 IT 鐵⼈賽 <svelte:head> 處理 <head>
第 12 屆 IT 鐵⼈賽使⽤ <svelte:head> 的好處根據元件、⾴⾯不同分別管理 <head
/> 內容當元件銷毀時，svelte 也會刪除、修改對應內容⽀援 SSR，⽅便實作 SEO
第 12 屆 IT 鐵⼈賽淺談 Svelte 當中的 SSR