Deep dive into Nuxt Server Components

Vue Fes Japan 2024

Transcript

1. STORES 株式会社 wattanx Deep dive into Nuxt Server Components
2. Ryota Watanabe（wattanx） ・STORES 株式会社 ソフトウェアエンジニア。 ・猫が好き。大阪在住。 ・Nuxt コミッター、Nuxt Bridge のメンテナ。 自己紹介
3. Agenda 3 Nuxt のレンダリングモードと課題 Nuxt Server Components について Nuxt Server Components の活用方法 作って学ぶ Nuxt Server Components 他の似たような技術との違い 01 02 03 04 05
4. はじめに ちょっとアンケート
5. 本セッションの狙い • どんなことができるのか • どんな課題を解決するのか • どんな仕組みなのか • 他の技術との違いは何なのか Nuxt Server Components について知ってもらう
6. Nuxt のレンダリングモードについて
7. Nuxt のレンダリングモードについて • Client-Side Rendering • Server-Side Rendering Nuxt がサポートしているレンダリングモード
8. Nuxt のレンダリングモードについて • 動的にデータを取得する • 取得したデータを JavaScript を使って画面に表示する • JavaScript で画面遷移を実現 Client-Side Rendering
9. Nuxt のレンダリングモードについて (Client-Side Rendering) Browser Server GET / GET /bundle.js Render JS をダウンロードする レンダリングされる 空の HTML を ダウンロードする HTML JS
10. Nuxt のレンダリングモードについて (Client-Side Rendering) • パフォーマンス • 検索エンジンの最適化 Client-Side Rendering の課題
11. Nuxt のレンダリングモードについて (Client-Side Rendering) • パフォーマンス ◦ ブラウザが JavaScript をダウンロードし、解析・実行するのを待 たなければならない ◦ そのため、コンテンツが表示されるまで遅い • 検索エンジンの最適化 ◦ クローラーとの相性が悪い ◦ JavaScript を解釈できるクローラーもあるが...
12. Nuxt のレンダリングモードについて Server-Side Rendering が課題を解決する
13. Nuxt のレンダリングモードについて (Server-Side Rendering) • Client-Side Rendering の課題を解決する • Server は完全にレンダリングされた HTML をブラウザに返す Server-Side Rendering（Universal Rendering）
14. Nuxt のレンダリングモードについて (Server-Side Rendering) Browser Server GET / GET /bundle.js Hydration HTML JS レンダリング済みの HTML をダウンロードする JS をダウンロードする Hydration される Render
15. Nuxt のレンダリングモードについて (Server-Side Rendering) • Server から受け取った HTML を Interactive にする ◦ Server から受け取った HTML はイベントリスナがセット されていない ◦ イベントリスナをセットする作業が Hydration Hydration とは
16. Nuxt のレンダリングモードについて まだ課題が残っている
17. Nuxt のレンダリングモードについて • bundle size の増大 残っている課題
18. Nuxt のレンダリングモードについて markdown で書いたコンテンツを HTML に変換して表示する例 以下のソースコードは Server, Client 両方で実行される (Server-Side Rendering を想定)
19. Nuxt のレンダリングモードについて Q: なぜ Server, Client 両方で実行する必要があるのか A: 両方実行して同じ DOM 構造にならないと Hydration できないから
20. Nuxt のレンダリングモードについて Server, Client 両方で実行されるため 以下のライブラリは Client の bundle にも含まれる sanitize-html: 194.8Kb (80.9Kb gzipped) marked: 35.9Kb (11.2Kb gzipped) でかい...減らしたい...
21. Nuxt のレンダリングモードについて fs などは Server でしか使えないので、 API Routes を使っている
22. Nuxt のレンダリングモードについて 本当はこう書きたいし、bundle size も減らしたい Server でしか使えないけど、 Server でだけ実行できれば... Hydration が必要ないので、 Server でだけ実行できれば...
23. Nuxt のレンダリングモードについて Server でだけレンダリングされる コンポーネントがあれば解決する
24. Nuxt のレンダリングモードについて そんな都合のいい仕組みがあるんですか？
25. Nuxt Server Components
26. Nuxt Server Components • Nuxt 3 から導入された機能 ◦ まだ experimental • Server でだけレンダリングされるコンポーネントをつくることが できる Nuxt Server Components
27. Nuxt Server Components • Server でだけ実行されて、Hydration されない ◦ Client bundle に不要な JS も含まれない • Server が必須ではない。 ◦ ビルド時にアプリケーションで使用される Server Component を プリレンダリングする ◦ そのため、完全に静的なサイトであっても動作する
28. Nuxt Server Components Server Component 使わない場合 Server Component 使う場合 約 66.4 % 減 詳しいソースコード https://github.com/wattanx/mini-nuxt-sc/pull/1
29. Nuxt Server Components • 拡張子を .server.vue にする • NuxtIsland コンポーネントを使う Nuxt Server Components の使い方
30. Nuxt Server Components experimental.componentIslands を 有効化する
31. Nuxt Server Components 拡張子を .server.vue にすると Server Component になる 書きたかったコードが書ける！
32. Nuxt Server Components 使う側は import なしで使用する もしくは #components からの import (実際のパスから import するのはまだサポートできていない)
33. Nuxt Server Components • Server Component の基盤 ◦ .server.vue は NuxtIsland コンポーネントを使ったコー ドに変換される • components/islands にコンポーネントを作ると、Server で だけレンダリングできるコンポーネントになる NuxtIsland コンポーネント
34. Nuxt Server Components NuxtIsland コンポーネントの使い方
35. Nuxt Server Components 静的な部分を島（Island）としている NuxtIsland は動的な部分に静的なコンテンツを埋め込むアーキテクチャ 海: 動的（JS で Interactive になっている） 島: 静的（Interactive ではない）
36. Nuxt Server Components • Async Component が使える • Server Component と Client Component を入れ子にできる • Server Component のうち、一部だけ Hydration できる Nuxt Server Components でできること（一部抜粋）
37. Nuxt Server Components Async Component が書ける
38. Nuxt Server Components Slot を使うことで Server Component と Client Component を入れ子 にする
39. Nuxt Server Components nuxt-client ディレクティブを使うことで Server Component の一部を Hydration することができる
40. Nuxt Server Components の活用方法
41. Nuxt Server Components の活用方法 • ブログ ◦ ほとんどの場合インタラクションが必要ないため • 時限式のコンポーネント Nuxt Server Components を活かせるもの
42. Nuxt Server Components の活用方法 • 時限式のコンポーネント ◦ https://www.mizdra.net/entry/2024/08/27/190853 ◦ ある特定の日に表示するようなコンポーネント ◦ Client Component だと Client bundle にその日まで出したくな い情報が含まれてしまう ◦ これは Nuxt Server Components においても効果的
43. Nuxt Server Components の活用方法 • 頻繁に props が変更されるコンポーネント ◦ props が変わるたびに Server へのリクエストが発生するため Nuxt Server Components を活かせないもの
44. Nuxt Server Components の活用方法 • Server Component 同士の入れ子 ◦ Server Component のレンダリングには Server へのリクエ スト が必要 ◦ なので、入れ子にするとオーバーヘッドが増える ◦ 理由は仕組みを理解するとわかる (このあと解説予定) 気をつけた方がいいところ
45. 作って学ぶ Nuxt Server Components
46. 作って学ぶ Nuxt Server Components Nuxt Server Components を作って仕組みを解説します
47. 作って学ぶ Nuxt Server Components • Server Component の基盤である NuxtIsland • コンポーネントを Server でだけレンダリングする仕組み 最終的にできあがるもの
48. 作って学ぶ Nuxt Server Components • Vue で Server-Side Rendering できる環境 • npm create vite-extra@latest app -- --template ssr-vue-ts 準備するもの
49. 作って学ぶ Nuxt Server Components Nuxt Server Components の流れ (Server-Side Rendering の場合)
50. 作って学ぶ Nuxt Server Components Browser Server GET / GET /bundle.js Hydration HTML JS Render GET /__nuxt_island Render component HTML Not Hydrated
51. 作って学ぶ Nuxt Server Components Browser Server GET / GET /bundle.js Hydration HTML JS Render GET /__nuxt_island Render component HTML Not Hydrated 従来のレンダリングとの差分
52. 作って学ぶ Nuxt Server Components Nuxt Server Components の構成要素 • Vue コンポーネントをレンダリングするエンドポイント • Server で Vue コンポーネントをレンダリングする処理 • Vue コンポーネントをレンダリングするエンドポイントへリクエストを投げる コンポーネント
53. 作って学ぶ Nuxt Server Components Nuxt Server Components の構成要素 • Vue コンポーネントをレンダリングするエンドポイント 👈 まずはここ • Server で Vue コンポーネントをレンダリングする処理 • Vue コンポーネントをレンダリングするエンドポイントへリクエストを投げる コンポーネント
54. 作って学ぶ Nuxt Server Components Browser Server GET / GET /bundle.js Hydration HTML JS Render GET /__nuxt_island Render component HTML Not Hydrated ここ
55. 作って学ぶ Nuxt Server Components URL からコンポーネント名や props を抽出する処理をつくる 実際のURL /__nuxt_island/CodeExample_XdPPUtbPQW.json?props={"count":4} URL からコンポーネント名: CodeExample が抽出 クエリパラメータから props: { count: 4 } が抽出
56. 作って学ぶ Nuxt Server Components エンドポイントを作る コンポーネント名や props を抽出して context に詰め込む render 関数はあとで説明
57. 作って学ぶ Nuxt Server Components • Server-Side Rendering 中に利用したいデータを追加できる ◦ Nuxt では Request Event を詰めたりしている ◦ useSSRContext を使うことでコンポーネント内からアクセ スできる • https://ja.vuejs.org/api/ssr.html#ssr-context SSR Context
58. 作って学ぶ Nuxt Server Components Nuxt Server Components の構成要素 • Vue コンポーネントをレンダリングするエンドポイント • Server で Vue コンポーネントをレンダリングする処理👈 次はここ • Vue コンポーネントをレンダリングするエンドポイントへリクエストを投げる コンポーネント
59. 作って学ぶ Nuxt Server Components Browser Server GET / GET /bundle.js Hydration HTML JS Render GET /__nuxt_island Render component HTML Not Hydrated ここ
60. 作って学ぶ Nuxt Server Components コンポーネント名とコンポーネントのマッピングをつくる
61. 作って学ぶ Nuxt Server Components 動的にコンポーネントをレンダリングするコンポーネントをつくる レンダリングしたいコンポーネントを取得 動的にコンポーネントをレンダリングできる
62. 作って学ぶ Nuxt Server Components Server で Vue コンポーネントをレンダリングするには
63. 作って学ぶ Nuxt Server Components createSSRApp と renderToString を使う https://ja.vuejs.org/guide/scaling-up/ssr.html
64. 作って学ぶ Nuxt Server Components createSSRApp と renderToString、 動的にコンポーネントをレンダリングする処理を組み合わせる Server で Vue コンポーネントをレンダリングする 動的にコンポーネントをレンダリングする
65. 作って学ぶ Nuxt Server Components この render 関数は /__nuxt_island で実行される
66. 作って学ぶ Nuxt Server Components Nuxt Server Components の構成要素 • Vue コンポーネントをレンダリングするエンドポイント • Server で Vue コンポーネントをレンダリングする処理 • Vue コンポーネントをレンダリングするエンドポイントへリクエストを投げる コンポーネント 👈 次はここ
67. 作って学ぶ Nuxt Server Components Browser Server GET / GET /bundle.js Hydration HTML JS Render GET /__nuxt_island Render component HTML Not Hydrated ここ
68. 作って学ぶ Nuxt Server Components だいぶ簡略化したコード /__nuxt_island へリクエストを投げる Server でレンダリングされているので Client-Side ではprops が変わったらリクエストを投げる HTML 文字列 レンダリングする Hydration されない
69. 作って学ぶ Nuxt Server Components これが NuxtIsland コンポーネントです
70. 作って学ぶ Nuxt Server Components NuxtIsland は /__nuxt_island へリクエストを投げて レスポンスの HTML 文字列をレンダリングする
71. 作って学ぶ Nuxt Server Components コンポーネント単位でレンダリングする仕組みが完成 🎉
72. 作って学ぶ Nuxt Server Components このままでは Server Component の子に interactive なコンポーネントをもつことができない
73. 作って学ぶ Nuxt Server Components Slot を使うことで Server Component と Client Component を入れ子に できる
74. 作って学ぶ Nuxt Server Components Q: Slot を含めてレンダリングするとどうなりますか？ A: ただのHTML 文字列になるので、 Hydration されません (イベントハンドラなどの情報がない)
75. 作って学ぶ Nuxt Server Components どうやって完全にレンダリングされた HTML 文字列に Slot を差し込むのか
76. 作って学ぶ Nuxt Server Components Teleport が活躍する
77. 作って学ぶ Nuxt Server Components Client Component を入れ子にするために必要なこと • <slot /> をビルド時に独自の placeholder に変換する • Slot のコンテンツを Teleport で囲んでレンダリングする • placeholder 部分に Slot のコンテンツを差し込む
78. 作って学ぶ Nuxt Server Components Slot の部分がコンテンツに置き換わった状態で レンダリングされるのを目指す
79. 作って学ぶ Nuxt Server Components Client Component を入れ子にするために必要なこと • <slot /> をビルド時に独自の placeholder に変換する 👈 まずはここ • Slot のコンテンツを Teleport で囲んでレンダリングする • placeholder 部分に Slot のコンテンツを差し込む
80. 作って学ぶ Nuxt Server Components ビルド時に独自の placeholder に変換する
81. 作って学ぶ Nuxt Server Components Client Component を入れ子にするために必要なこと • <slot /> をビルド時に独自の placeholder に変換する • Slot のコンテンツを Teleport で囲んでレンダリングする 👈 次はここ • placeholder 部分に Slot のコンテンツを差し込む
82. 作って学ぶ Nuxt Server Components こんな感じに書き換える
83. 作って学ぶ Nuxt Server Components Client-Side Rendering 時 Server-Side Rendering 時 Teleport 部分をわかりやすいように書くと以下のようなコードになる
84. 作って学ぶ Nuxt Server Components Teleport 部分をわかりやすいように書くと以下のようなコードになる これを Server Side でレンダリングするとどうなるかが重要
85. 作って学ぶ Nuxt Server Components • コンポーネントにあるテンプレートの一部を、そのコンポー ネントの DOM 階層の外側に存在する DOM ノードに「テレ ポート」できる組み込みコンポーネント • https://ja.vuejs.org/guide/built-ins/teleport.html Teleport
86. 作って学ぶ Nuxt Server Components v-if が true になったとき body 要素に挿入される
87. 作って学ぶ Nuxt Server Components Server-Side でレンダリングしたとき、SSR Context の teleports に Teleport 内のコンテンツが公開される （SSR Context は renderToString の第二引数に渡すオブジェクト） https://ja.vuejs.org/guide/scaling-up/ssr.html#teleports
88. 作って学ぶ Nuxt Server Components
89. 作って学ぶ Nuxt Server Components Teleport を含む NuxtIsland コンポーネントを Server-Side Rendering すると以下のように Teleport 内のコンテンツが手に入る
90. 作って学ぶ Nuxt Server Components Client Component を入れ子にするために必要なこと • <slot /> をビルド時に独自の placeholder に変換する • Slot のコンテンツを Teleport で囲んでレンダリングする • placeholder 部分に Slot のコンテンツを差し込む 👈 次はここ
91. 作って学ぶ Nuxt Server Components ビルド時に独自の placeholder に変換した
92. 作って学ぶ Nuxt Server Components NuxtIsland がレンダリングされると data-island-uid がセットされる
93. 作って学ぶ Nuxt Server Components uid=xxx,slot=default を見るとどこに差し込むべきかわかる 一致
94. 作って学ぶ Nuxt Server Components 差し込む場所がわかったので Teleport のコンテンツを差し込む (Server でレンダリングするときに正規表現で置換している) ここに差し込んで こうなる
95. 作って学ぶ Nuxt Server Components Server で出来上がった HTML
96. 作って学ぶ Nuxt Server Components Client-Side Rendering 時
97. 作って学ぶ Nuxt Server Components to に指定した attribute が一致するので Teleport される
98. 作って学ぶ Nuxt Server Components Teleport されるとこうなる
99. Nuxt のレンダリングモードについて Q: なぜ Server, Client 両方で実行する必要があるのか A: 両方実行して同じ DOM 構造にならないと Hydration できないから
100. 作って学ぶ Nuxt Server Components Server で出来上がった HTML と比較すると Server Client
101. 作って学ぶ Nuxt Server Components Server で出来上がった HTML と比較すると Server Client 完全に一致
102. 作って学ぶ Nuxt Server Components Hydration できる 🎉
103. 作って学ぶ Nuxt Server Components Nuxt Server Components 完全に理解した 🎉
104. 作って学ぶ Nuxt Server Components • Minimal Nuxt Server Components • Nuxt に依存しないように作った • Vue を使えば作れる https://github.com/wattanx/mini-nuxt-sc
105. 他の似たような技術との違い
106. 他の似たような技術との違い • バンドル前に事前にレンダーされるコンポーネント • Server がなくても実行できる (Nuxt と同じ) • RSC Payload と呼ばれる特別なデータ形式にレンダリングされる ◦ Nuxt Server Components は HTML にレンダリングされる React Server Components
107. 他の似たような技術との違い • 静的な部分に動的（JS で Interactive）な部分を埋め込むアプローチ • Nuxt Server Components とは逆 ◦ Nuxt は動的な部分に静的なコンテンツを埋め込むというアプローチ Island Architecture
108. まとめ
109. • Nuxt Server Components は動的な部分に静的なコンテンツを埋め込 む技術 • Nuxt Server Components を使うことで client bundle を減らすこと ができる • Nuxt Server Components は Teleport の使い方がおもしろい まとめ
110. まとめ • Remote Source もレンダリングできる • Server Page を作ることができる • Lazy Server Component を作ることができる 話せていないことがいっぱいある
111. まとめ まだ experimental なので使ってフィードバックしよう