Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Unlocking the potential of Nuxt Server Components

wattanx
October 29, 2024
390

Unlocking the potential of Nuxt Server Components

wattanx

October 29, 2024
Tweet

Transcript

  1. Nuxt Server Components • Nuxt 3 から導入された機能 ◦ まだ experimental

    • Server でだけレンダリングされるコンポーネントをつくることが できる Nuxt Server Components
  2. Nuxt Server Components • Server でだけ実行されて、Hydration されない ◦ Client bundle

    に不要な JS も含まれない • Server が必須ではない。 ◦ ビルド時にアプリケーションで使用される Server Component を プリレンダリングする ◦ そのため、完全に静的なサイトであっても動作する
  3. 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 時)
  4. Nuxt Server Components • Server から受け取った HTML を Interactive にする

    ◦ Server から受け取った HTML はイベントリスナがセット されていない ◦ イベントリスナをセットする作業が Hydration Hydration とは
  5. Nuxt Server Components 使う側は import なしで使用する もしくは #components からの import

    (実際のパスから import するのはまだサポートできていない)
  6. Nuxt Server Components • Server Component の基盤 ◦ .server.vue は

    NuxtIsland コンポーネントを使ったコー ドに変換される • components/islands にコンポーネントを作ると、Server で だけレンダリングできるコンポーネントになる NuxtIsland コンポーネント
  7. Nuxt Server Components • Server Only Components • Server Component

    Interactivity • Partial Hydration • Lazy Server Components • Server Only Page Nuxt Server Components の機能(勝手に命名した)
  8. Nuxt Server Components の機能(Server Component Interactivity) • Server Component は

    Hydration されない • Slot を使うことで Interactive なコンポーネントを子に持つ ことができる Server Component Interactivity
  9. Nuxt Server Components の機能(Server Component Interactivity) Server Component の Slot

    に入れると interactive にできる (Hydration できる)
  10. Nuxt Server Components の機能(Partial Hydration) • Server Component は Hydration

    されない • nuxt-client ディレクティブを使うことで一部だけ Hydration できる Partial Hydration
  11. Nuxt Server Components の機能(Lazy Server Components) • Server Component を使ったページへの

    Client Navigation はレンダリング完了までブロックされる • lazy prop と #fallback slot を使えばレンダリングをブロッ クしないようにできる Lazy Server Components
  12. • Nuxt Server Components は Server でだけレンダリングする コンポーネントを作ることができる • Nuxt

    Server Components を使うと client bundle を削減できる • Server Component と Client Component を入れ子にできるし、 一部だけHydration することもできる • Server Only Page も作ることができる まとめ