Unlocking the potential of Nuxt Server Components

Transcript

1. STORES 株式会社 wattanx Unlocking the potential of Nuxt Server Components
2. Ryota Watanabe（wattanx） ・STORES 株式会社 ソフトウェアエンジニア。 ・猫が好き。大阪在住。 ・Nuxt コミッター、Nuxt Bridge のメンテナ。 自己紹介
3. Agenda 3 Nuxt Server Components について Nuxt Server Components の機能紹介 01 02
4. はじめに ちょっとアンケート
5. 本セッションの狙い Nuxt Server Components の機能について知ってもらう
6. 本セッションで話さないこと 仕組みについては以下のスライドをご覧ください https://speakerdeck.com/wattanx/deep-dive-into-nuxt-server-components
7. Nuxt Server Components
8. Nuxt Server Components • Nuxt 3 から導入された機能 ◦ まだ experimental • Server でだけレンダリングされるコンポーネントをつくることが できる Nuxt Server Components
9. Nuxt Server Components • Server でだけ実行されて、Hydration されない ◦ Client bundle に不要な JS も含まれない • Server が必須ではない。 ◦ ビルド時にアプリケーションで使用される Server Component を プリレンダリングする ◦ そのため、完全に静的なサイトであっても動作する
10. Nuxt Server Components Browser Server GET / GET /bundle.js Hydration HTML JS Render GET /__nuxt_island Render component HTML Not Hydrated Nuxt Server Components の流れ (Server-Side Rendering 時)
11. Nuxt Server Components • Server から受け取った HTML を Interactive にする ◦ Server から受け取った HTML はイベントリスナがセット されていない ◦ イベントリスナをセットする作業が Hydration Hydration とは
12. Nuxt Server Components • 拡張子を .server.vue にする • NuxtIsland コンポーネントを使う Nuxt Server Components の使い方
13. Nuxt Server Components experimental.componentIslands を 有効化する
14. Nuxt Server Components 拡張子を .server.vue にすると Server Component になる
15. Nuxt Server Components 使う側は import なしで使用する もしくは #components からの import (実際のパスから import するのはまだサポートできていない)
16. Nuxt Server Components • Server Component の基盤 ◦ .server.vue は NuxtIsland コンポーネントを使ったコー ドに変換される • components/islands にコンポーネントを作ると、Server で だけレンダリングできるコンポーネントになる NuxtIsland コンポーネント
17. Nuxt Server Components NuxtIsland コンポーネントの使い方
18. Nuxt Server Components 静的な部分を島（Island）としている NuxtIsland は動的な部分に静的なコンテンツを埋め込むアーキテクチャ 海: 動的（JS で Interactive になっている） 島: 静的（Interactive ではない）
19. Nuxt Server Components の機能紹介
20. Nuxt Server Components • Server Only Components • Server Component Interactivity • Partial Hydration • Lazy Server Components • Server Only Page Nuxt Server Components の機能（勝手に命名した）
21. Nuxt Server Components の機能（Server Only Components） • Server でだけレンダリングするコンポーネントを作ることが できる • client bundle に含まれない Server Only Components
22. Nuxt Server Components の機能（Server Only Components） Server でしか使えないモジュールが使える これらのライブラリは client bundle に含まれない
23. Nuxt Server Components の機能（Server Component Interactivity） • Server Component は Hydration されない • Slot を使うことで Interactive なコンポーネントを子に持つ ことができる Server Component Interactivity
24. Nuxt Server Components の機能（Server Component Interactivity） これは動きません （Hydration されないため）
25. Nuxt Server Components の機能（Server Component Interactivity） Server Component の Slot に入れると interactive にできる (Hydration できる)
26. Nuxt Server Components の機能（Partial Hydration） • Server Component は Hydration されない • nuxt-client ディレクティブを使うことで一部だけ Hydration できる Partial Hydration
27. Nuxt Server Components の機能（Partial Hydration） nuxt-client ディレクティブを使うことで Server Component の一部を Hydration することができる Hydration される Hydration されない
28. Nuxt Server Components の機能（Lazy Server Components） • Server Component を使ったページへの Client Navigation はレンダリング完了までブロックされる • lazy prop と #fallback slot を使えばレンダリングをブロッ クしないようにできる Lazy Server Components
29. Nuxt Server Components の機能（Lazy Server Components） 完了するまでは fallback が表示される
30. Nuxt Server Components の機能（Lazy Server Components） lazy と #fallback なし
31. Nuxt Server Components の機能（Lazy Server Components） lazy と #fallback あり
32. Nuxt Server Components の機能（Server Only Page） • Server でだけレンダリングされるページをつくれる Server Only Page
33. Nuxt Server Components の機能（Server Only Page） pages のファイルを .server.vue にするだけ Hydration されない
34. まとめ
35. • Nuxt Server Components は Server でだけレンダリングする コンポーネントを作ることができる • Nuxt Server Components を使うと client bundle を削減できる • Server Component と Client Component を入れ子にできるし、 一部だけHydration することもできる • Server Only Page も作ることができる まとめ
36. まとめ まだ experimental なので使ってフィードバックしよう