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
390
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
2.4k
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
wattanx
4
3k
Demystifying Nuxt Bridge
wattanx
3
5.6k
小さく進める Nuxt 3 移行
wattanx
0
1.9k
プロダクト開発を止めずに Composition API と TypeScript に 最速で移行するための戦い
wattanx
0
2k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Documentation Writing (for coders)
carmenintech
66
4.5k
Agile that works and the tools we love
rasmusluckow
328
21k
Gamification - CAS2011
davidbonilla
80
5.1k
Building an army of robots
kneath
302
44k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
We Have a Design System, Now What?
morganepeng
51
7.3k
Embracing the Ebb and Flow
colly
84
4.5k
It's Worth the Effort
3n
183
28k
What's in a price? How to price your products and services
michaelherold
243
12k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
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 なので使ってフィードバックしよう