Nuxt Server Components

v-tokyo #24

Transcript

1. Nuxt Server Components v-tokyo#24, wattanx
2. wattanx STORES Design Engineer / Nuxt Ecosystem Team
3. What’s Nuxt Server Components?
4. experimental 個々のコンポーネントをサーバーで レンダリングできる Nuxt 3 から導入された機能
5. Server でだけ実行される Hydration されないので Client bundle に不要な JS が含まれない
6. Server が必須ではない ビルド時にアプリケーションで利用される Server Component を プリレンダリングする 完全に静的なサイトであっても利用可能
7. Astro Client Islands の逆 Nuxt Server Components は Interactive じゃない島をつくる
8. .server.vue にすると Server Component に Server でしか使えないコードが書ける client bundle に含まれない
9. Client Interactivity with Server Components Server Components の Slot にいれると interactive にできる (Hydration できる)
10. Partial Hydration nuxt-client ディレクティブを使うことで 一部だけ Hydration できる
11. Lazy Server Components レンダリング完了するまで fallback slot が表示 されるのでナビゲーションをブロックしない
12. How it works
13. /__nuxt_island/{component_name}.json へ リクエストするとコンポーネントがレンダリングされる
14. CSR の場合 Browser Server URL にアクセス 空の HTML を返す GET /__nuxt_island/{component_name}.json Vue App を Mount Server Component Rendering レンダリング HTML 生成
15. SSR の場合 Browser Server URL にアクセス Server-Side Rendering 開始 Server Component Rendering /__nuxt_island/ へのリクエストはせず 直接レンダリング処理を実行できる HTML 生成 レンダリング Hydration Server Component は Hydration されない
16. Server Components のレンダリング処理が複雑 https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-island.ts#L298-L355
17. vue-onigiri 🍙 https://github.com/huang-julien/vue-onigiri Vue Component Tree を serialize/deserialize して Vue Server Component を実現 複雑になった Server Component のレンダリング 処理を改善するため
18. vue-onigiri を使うと これだけのコードになるかも
19. When to use Nuxt Server Components?
20. ブログ 基本的に interactive な要素が少ないので
21. ネットショップが向いてるかも
22. ネットショップが向いてるかも ナビゲーション 商品の説明 特定ユーザーだけの割引 ユーザーごとのおすすめ
23. ネットショップが向いてるかも ナビゲーション 商品の説明 特定ユーザーだけの割引 ユーザーごとのおすすめ Static(prerendering) Server Component
24. Other frameworks
25. Astro Server Islands https://docs.astro.build/ja/guides/server-islands/ Server でだけレンダリングされる コンポーネントを作れる Server-Side でのみ実行される レンダリング完了するまで fallback slot が 表示される
26. まとめ
27. まとめ 個々のコンポーネントをサーバーで レンダリングできる
28. まとめ https://commerce-nuxt-sc.wattanx.workers.dev/