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
Nuxt Server Components
Search
wattanx
March 24, 2026
Programming
0
73
Nuxt Server Components
v-tokyo #24
wattanx
March 24, 2026
Tweet
Share
More Decks by wattanx
See All by wattanx
フロントエンド技術選定の裏側
wattanx
1
110
Unlocking the potential of Nuxt Server Components
wattanx
2
690
Deep dive into Nuxt Server Components
wattanx
1
3.8k
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
wattanx
4
4.2k
Demystifying Nuxt Bridge
wattanx
3
7.4k
小さく進める Nuxt 3 移行
wattanx
0
2.1k
プロダクト開発を止めずに Composition API と TypeScript に 最速で移行するための戦い
wattanx
0
2.3k
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
950
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
580
KagglerがMixSeekを触ってみた
morim
0
100
Rで始めるML・LLM活用入門
wakamatsu_takumu
0
200
Feature Toggle は捨てやすく使おう
gennei
0
280
Pythonデータ分析コトハジメinFukuoka
kanan
0
100
Vuetify 3 → 4 何が変わった?差分と移行ポイント10分まとめ
koukimiura
0
180
Windows on Ryzen and I
seosoft
0
360
maplibre-gl-layers - 地図に移動体たくさん表示したい
kekyo
PRO
0
450
社内規程RAGの精度を73.3% → 100%に改善した話
oharu121
13
8.3k
今年もTECHSCOREブログを書き続けます!
hiraoku101
0
120
Reactive ❤️ Loom: A Forbidden Love Story
franz1981
2
140
Featured
See All Featured
Chasing Engaging Ingredients in Design
codingconduct
0
150
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.8k
The Pragmatic Product Professional
lauravandoore
37
7.2k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
110
ラッコキーワード サービス紹介資料
rakko
1
2.7M
Bash Introduction
62gerente
615
210k
Heart Work Chapter 1 - Part 1
lfama
PRO
5
35k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
330
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.2k
The untapped power of vector embeddings
frankvandijk
2
1.6k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.1k
Art, The Web, and Tiny UX
lynnandtonic
304
21k
Transcript
Nuxt Server Components v-tokyo#24, wattanx
wattanx STORES Design Engineer / Nuxt Ecosystem Team
What’s Nuxt Server Components?
experimental 個々のコンポーネントをサーバーで レンダリングできる Nuxt 3 から導入された機能
Server でだけ実行される Hydration されないので Client bundle に不要な JS が含まれない
Server が必須ではない ビルド時にアプリケーションで利用される Server Component を プリレンダリングする 完全に静的なサイトであっても利用可能
Astro Client Islands の逆 Nuxt Server Components は Interactive じゃない島をつくる
.server.vue にすると Server Component に Server でしか使えないコードが書ける client bundle に含まれない
Client Interactivity with Server Components Server Components の Slot にいれると
interactive にできる (Hydration できる)
Partial Hydration nuxt-client ディレクティブを使うことで 一部だけ Hydration できる
Lazy Server Components レンダリング完了するまで fallback slot が表示 されるのでナビゲーションをブロックしない
How it works
/__nuxt_island/{component_name}.json へ リクエストするとコンポーネントがレンダリングされる
CSR の場合 Browser Server URL にアクセス 空の HTML を返す GET
/__nuxt_island/{component_name}.json Vue App を Mount Server Component Rendering レンダリング HTML 生成
SSR の場合 Browser Server URL にアクセス Server-Side Rendering 開始 Server
Component Rendering /__nuxt_island/ へのリクエストはせず 直接レンダリング処理を実行できる HTML 生成 レンダリング Hydration Server Component は Hydration されない
Server Components のレンダリング処理が複雑 https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-island.ts#L298-L355
vue-onigiri 🍙 https://github.com/huang-julien/vue-onigiri Vue Component Tree を serialize/deserialize して Vue
Server Component を実現 複雑になった Server Component のレンダリング 処理を改善するため
vue-onigiri を使うと これだけのコードになるかも
When to use Nuxt Server Components?
ブログ 基本的に interactive な要素が少ないので
ネットショップが向いてるかも
ネットショップが向いてるかも ナビゲーション 商品の説明 特定ユーザーだけの割引 ユーザーごとのおすすめ
ネットショップが向いてるかも ナビゲーション 商品の説明 特定ユーザーだけの割引 ユーザーごとのおすすめ Static(prerendering) Server Component
Other frameworks
Astro Server Islands https://docs.astro.build/ja/guides/server-islands/ Server でだけレンダリングされる コンポーネントを作れる Server-Side でのみ実行される レンダリング完了するまで
fallback slot が 表示される
まとめ
まとめ 個々のコンポーネントをサーバーで レンダリングできる
まとめ https://commerce-nuxt-sc.wattanx.workers.dev/