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