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

Nuxt Server Components

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for wattanx wattanx
March 24, 2026
Programming
230
0

Nuxt Server Components

v-tokyo #24

Avatar for wattanx

wattanx

March 24, 2026

More Decks by wattanx

See All by wattanx
フロントエンド技術選定の裏側
Avatar for wattanx wattanx
1
110
Unlocking the potential of Nuxt Server Components
Avatar for wattanx wattanx
2
690
Deep dive into Nuxt Server Components
Avatar for wattanx wattanx
1
3.9k
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
Avatar for wattanx wattanx
4
4.2k
Demystifying Nuxt Bridge
Avatar for wattanx wattanx
3
7.5k
小さく進める Nuxt 3 移行
Avatar for wattanx wattanx
0
2.1k
プロダクト開発を止めずに Composition API と TypeScript に 最速で移行するための戦い
Avatar for wattanx wattanx
0
2.3k

Other Decks in Programming

See All in Programming
KagglerがMixSeekを触ってみた
Avatar for Morim morim
0
360
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
Avatar for Rikito Taniguchi tanishiking
0
140
Goの型安全性で実現する複数プロダクトの権限管理
Avatar for ishikawa-pro ishikawa_pro
2
1.4k
AI活用のコスパを最大化する方法
Avatar for Ochtum ochtum
0
370
Redox OS でのネームスペース管理と chroot の実現
Avatar for isan isanethen
0
500
事業会社でのセキュリティ長期インターンについて
Avatar for inlet-back masachikaura
0
210
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
Avatar for o8n o8n
4
1.5k
生成 AI 時代のスナップショットテストってやつを見せてあげますよ（α版）
Avatar for ojun ojun9
0
330
今からFlash開発できるわけないじゃん、ムリムリ! (※ムリじゃなかった!?)
Avatar for Sora Arakawa arkw
0
180
LM Linkで(非力な！)ノートPCでローカルLLM
Avatar for 瀬尾佳隆 seosoft
0
330
2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法
Avatar for SUZUKI Masashi masasuzu
0
270
Strategy for Finding a Problem for OSS: With Real Examples
Avatar for Chikahiro Tokoro kibitan
0
130

Featured

See All Featured
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
160
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
400
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
340
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.2k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
200
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
300
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
100
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.2k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
110

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/