Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Unlocking the potential of Nuxt Server Components
Search
wattanx
October 29, 2024
2
310
Unlocking the potential of Nuxt Server Components
wattanx
October 29, 2024
Tweet
Share
More Decks by wattanx
See All by wattanx
Deep dive into Nuxt Server Components
wattanx
1
2k
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
wattanx
4
2.8k
Demystifying Nuxt Bridge
wattanx
3
5.4k
小さく進める Nuxt 3 移行
wattanx
0
1.8k
プロダクト開発を止めずに Composition API と TypeScript に 最速で移行するための戦い
wattanx
0
2k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
32
1.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Docker and Python
trallard
40
3.1k
Become a Pro
speakerdeck
PRO
25
5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Building Adaptive Systems
keathley
38
2.3k
Unsuck your backbone
ammeep
668
57k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
560
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
810
Facilitating Awesome Meetings
lara
49
6.1k
We Have a Design System, Now What?
morganepeng
50
7.2k
Transcript
STORES 株式会社 wattanx Unlocking the potential of Nuxt Server Components
Ryota Watanabe(wattanx) ・STORES 株式会社 ソフトウェアエンジニア。 ・猫が好き。大阪在住。 ・Nuxt コミッター、Nuxt Bridge のメンテナ。
自己紹介
Agenda 3 Nuxt Server Components について Nuxt Server Components の機能紹介
01 02
はじめに ちょっとアンケート
本セッションの狙い Nuxt Server Components の機能について知ってもらう
本セッションで話さないこと 仕組みについては以下のスライドをご覧ください https://speakerdeck.com/wattanx/deep-dive-into-nuxt-server-components
Nuxt Server Components
Nuxt Server Components • Nuxt 3 から導入された機能 ◦ まだ experimental
• Server でだけレンダリングされるコンポーネントをつくることが できる Nuxt Server Components
Nuxt Server Components • Server でだけ実行されて、Hydration されない ◦ Client bundle
に不要な JS も含まれない • Server が必須ではない。 ◦ ビルド時にアプリケーションで使用される Server Component を プリレンダリングする ◦ そのため、完全に静的なサイトであっても動作する
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 時)
Nuxt Server Components • Server から受け取った HTML を Interactive にする
◦ Server から受け取った HTML はイベントリスナがセット されていない ◦ イベントリスナをセットする作業が Hydration Hydration とは
Nuxt Server Components • 拡張子を .server.vue にする • NuxtIsland コンポーネントを使う
Nuxt Server Components の使い方
Nuxt Server Components experimental.componentIslands を 有効化する
Nuxt Server Components 拡張子を .server.vue にすると Server Component になる
Nuxt Server Components 使う側は import なしで使用する もしくは #components からの import
(実際のパスから import するのはまだサポートできていない)
Nuxt Server Components • Server Component の基盤 ◦ .server.vue は
NuxtIsland コンポーネントを使ったコー ドに変換される • components/islands にコンポーネントを作ると、Server で だけレンダリングできるコンポーネントになる NuxtIsland コンポーネント
Nuxt Server Components NuxtIsland コンポーネントの使い方
Nuxt Server Components 静的な部分を島(Island)としている NuxtIsland は動的な部分に静的なコンテンツを埋め込むアーキテクチャ 海: 動的(JS で Interactive
になっている) 島: 静的(Interactive ではない)
Nuxt Server Components の機能紹介
Nuxt Server Components • Server Only Components • Server Component
Interactivity • Partial Hydration • Lazy Server Components • Server Only Page Nuxt Server Components の機能(勝手に命名した)
Nuxt Server Components の機能(Server Only Components) • Server でだけレンダリングするコンポーネントを作ることが できる
• client bundle に含まれない Server Only Components
Nuxt Server Components の機能(Server Only Components) Server でしか使えないモジュールが使える これらのライブラリは client
bundle に含まれない
Nuxt Server Components の機能(Server Component Interactivity) • Server Component は
Hydration されない • Slot を使うことで Interactive なコンポーネントを子に持つ ことができる Server Component Interactivity
Nuxt Server Components の機能(Server Component Interactivity) これは動きません (Hydration されないため)
Nuxt Server Components の機能(Server Component Interactivity) Server Component の Slot
に入れると interactive にできる (Hydration できる)
Nuxt Server Components の機能(Partial Hydration) • Server Component は Hydration
されない • nuxt-client ディレクティブを使うことで一部だけ Hydration できる Partial Hydration
Nuxt Server Components の機能(Partial Hydration) nuxt-client ディレクティブを使うことで Server Component の一部を
Hydration することができる Hydration される Hydration されない
Nuxt Server Components の機能(Lazy Server Components) • Server Component を使ったページへの
Client Navigation はレンダリング完了までブロックされる • lazy prop と #fallback slot を使えばレンダリングをブロッ クしないようにできる Lazy Server Components
Nuxt Server Components の機能(Lazy Server Components) 完了するまでは fallback が表示される
Nuxt Server Components の機能(Lazy Server Components) lazy と #fallback なし
Nuxt Server Components の機能(Lazy Server Components) lazy と #fallback あり
Nuxt Server Components の機能(Server Only Page) • Server でだけレンダリングされるページをつくれる Server
Only Page
Nuxt Server Components の機能(Server Only Page) pages のファイルを .server.vue にするだけ
Hydration されない
まとめ
• Nuxt Server Components は Server でだけレンダリングする コンポーネントを作ることができる • Nuxt
Server Components を使うと client bundle を削減できる • Server Component と Client Component を入れ子にできるし、 一部だけHydration することもできる • Server Only Page も作ることができる まとめ
まとめ まだ experimental なので使ってフィードバックしよう