[{"data":1,"prerenderedAt":746},["ShallowReactive",2],{"content-/web-tech-stack-2026":3,"all-pages-for-dir":725,"related-/web-tech-stack-2026":726,"og-image-/web-tech-stack-2026":745},{"id":4,"title":5,"body":6,"category":708,"concepts":708,"description":709,"extension":710,"meta":711,"navigation":712,"ogImage":708,"path":713,"project_name":708,"published":714,"publishedAt":715,"seo":716,"stem":717,"tags":718,"todo":708,"unpublished":714,"updatedAt":708,"__hash__":724},"pages/2026-07/2026-07-22/web-tech-stack-2026.md","Webサービスの技術構成 2026年版 — Vue.js/Nuxt/Astroの使い分けとその理由",{"type":7,"value":8,"toc":685},"minimark",[9,13,17,45,49,53,56,59,64,76,87,91,122,126,129,132,136,139,149,152,155,259,263,266,270,279,282,285,289,327,337,340,347,367,370,374,443,446,493,496,543,546,549,608,611,614,628,631],[10,11,5],"h1",{"id":12},"webサービスの技術構成-2026年版-vuejsnuxtastroの使い分けとその理由",[14,15,16],"h2",{"id":16},"結論",[18,19,20,24,27,39,42],"ul",{},[21,22,23],"li",{},"Reactベースの技術選定メモをVue.jsに置き換えると、「単純なやつ」はVue 3 + Vite、「ちょい複雑」はNuxt（Static Generation）になる。",[21,25,26],{},"「React + Vite」が「Next + Vite」になることはない。Next.jsは独自のバンドラー（Turbopack、旧webpack）を使うフレームワークで、Viteとは別系統である。",[21,28,29,30,34,35,38],{},"「単純」と「ちょい複雑」の分かれ目は、Viteという",[31,32,33],"strong",{},"ビルドツール単体","を使うか、Nuxtという",[31,36,37],{},"メタフレームワーク","を使うかの違いにある。ルーティング・データフェッチ・SEO・画像最適化・APIルートを規約として持っているかどうかが境目になる。",[21,40,41],{},"記事コンテンツ中心のサイトにAstroを選ぶ判断は正しい。Nuxt/Next.jsは「アプリケーション」を前提に全コンポーネントを既定でハイドレートするが、Astroは「コンテンツ」を前提に既定でJavaScriptをゼロにし、必要な箇所だけVue/Reactを部分的にハイドレートする。",[21,43,44],{},"ちょっとしたAPIは、エンドポイントが少なければ生のCloudflare Workers、ルーティングやミドルウェアが増えたらHonoを使う。",[46,47,48],"p",{},"以下、各分岐点について、なぜその組み合わせになるのかを順に説明する。",[14,50,52],{"id":51},"_1ページだけの簡単なwebページ","1ページだけの簡単なWebページ",[46,54,55],{},"HTMLファイルを1枚書いてCloudflareに置く。ここは規模を問わず変わらない。ビルドプロセスもフレームワークも要らず、告知ページ・簡易フォーム・LP1枚向けの構成になる。",[14,57,58],{"id":58},"静的ビルドできるやつ",[60,61,63],"h3",{"id":62},"単純なやつ-vue-3-vite","単純なやつ: Vue 3 + Vite",[65,66,67,72],"figure",{},[68,69],"img",{"src":70,"alt":71},"/images/web-tech-stack-2026/figure-01.svg","静的ビルドできるサイトの入口は複雑さの軸で3つに分かれる。シンプルなSPAならVue3とVite、フォームや状態管理が複雑ならNuxtのStatic Generation、記事やドキュメント中心ならAstro",[73,74,75],"figcaption",{},"図1: 静的ビルドの入口は、単純→ちょい複雑→コンテンツ中心の順に規約が厚くなる",[46,77,78,82,83,86],{},[79,80,81],"code",{},"vite build","で静的アセットを吐き出し、Cloudflare Pagesのような静的ホスティングにそのまま置く。ページ数が少ない、ルーティングが要らない（あっても",[79,84,85],{},"vue-router","を自分で足す程度）、複雑なデータフェッチが要らない、といったシンプルなSPAや社内ツールに向く。",[60,88,90],{"id":89},"ちょい複雑-nuxtstatic-generation","ちょい複雑: Nuxt（Static Generation）",[46,92,93,94,97,98,101,102,105,106,109,110,113,114,117,118,121],{},"Nuxtを",[79,95,96],{},"nuxt generate","でビルドし、サーバーを立てずに静的HTMLとして書き出す。ファイルベースルーティング（",[79,99,100],{},"pages/","ディレクトリ構造がそのままURLになる）、データフェッチ規約（",[79,103,104],{},"useAsyncData","/",[79,107,108],{},"useFetch","）、SEO用の",[79,111,112],{},"useSeoMeta","、画像最適化（",[79,115,116],{},"@nuxt/image","）、APIルート（",[79,119,120],{},"server/api/","）まで、一つのフレームワークの中で一貫した作法として提供される。このサイト（mdx-playground）自体もNuxt 3 + @nuxt/contentで構築されている。",[60,123,125],{"id":124},"コラム-react-viteはnext-viteになり得るか","コラム: 「React + Vite」は「Next + Vite」になり得るか",[46,127,128],{},"結論から言うと、ならない。Next.jsは独自のバンドラーであるTurbopack（旧webpack）を使うフレームワークで、Viteの上に構築されているわけではない。2026年時点でTurbopackはNext.jsの標準バンドラーとなっており、本番ビルドでもTurbopackが既定で使われる。一方Viteは、Rust製エンジン「Rolldown」への置き換えが進み、開発サーバーと本番ビルドの両方が高速化されている。",[46,130,131],{},"つまり「Next.jsの中身をViteに差し替える」という構成は存在しない。Next.js＝Turbopack系、Vue/Svelte系のメタフレームワーク＝Vite系という棲み分けが、2026年時点の実質的な構図になっている。Viteの上に構築されたNext.js相当のメタフレームワークが欲しいなら、Vue圏ではNuxt、他にはSvelteKit・Astro・TanStack Start・Vike（vite-plugin-ssrの後継）などが選択肢になる。",[60,133,135],{"id":134},"単純とちょい複雑の分かれ目","「単純」と「ちょい複雑」の分かれ目",[46,137,138],{},"これは「ビルドツール単体」か「メタフレームワーク」かの違いに集約される。",[46,140,141,142,144,145,148],{},"Viteはビルドツール（開発サーバー＋バンドラー）であり、ルーティング・データフェッチ・SEO・APIルートの作法を持たない。必要になれば、",[79,143,85],{},"・自前のfetchロジック・",[79,146,147],{},"@unhead/vue","などを個別に組み合わせる。構成の自由度は高いが、その分すべて自分で決める必要がある。",[46,150,151],{},"Nuxtはメタフレームワークであり、上記の作法を規約として最初から持っている。ページ数が増える、フォームが複雑になる、複数コンポーネント間で状態を共有したい、といった「フロントエンドでゴニョゴニョしたい」場面になるほど、規約の恩恵が効いてくる。",[46,153,154],{},"つまり「ちょい複雑＝フロントエンドで複雑な状態管理・インタラクションをしたいときにNext.js的なフレームワークが出てくる」という理解は正しい。Vue版で言えば、その役をNuxtが担う。",[156,157,158,174],"table",{},[159,160,161],"thead",{},[162,163,164,168,171],"tr",{},[165,166,167],"th",{},"観点",[165,169,170],{},"Vue 3 + Vite（単純）",[165,172,173],{},"Nuxt（ちょい複雑）",[175,176,177,192,207,222,235,248],"tbody",{},[162,178,179,183,189],{},[180,181,182],"td",{},"ルーティング",[180,184,185,186,188],{},"自分で",[79,187,85],{},"を追加",[180,190,191],{},"ファイルベースで自動生成",[162,193,194,197,200],{},[180,195,196],{},"データフェッチ",[180,198,199],{},"自分でfetchロジックを書く",[180,201,202,105,204,206],{},[79,203,104],{},[79,205,108],{},"の規約あり",[162,208,209,212,217],{},[180,210,211],{},"SEO・メタタグ",[180,213,185,214,216],{},[79,215,147],{},"等を組む",[180,218,219,221],{},[79,220,112],{},"が標準搭載",[162,223,224,227,230],{},[180,225,226],{},"画像最適化",[180,228,229],{},"自分で対応",[180,231,232,234],{},[79,233,116],{},"モジュールあり",[162,236,237,240,243],{},[180,238,239],{},"APIエンドポイント",[180,241,242],{},"別途バックエンドが必要",[180,244,245,247],{},[79,246,120],{},"でフロントと同居できる",[162,249,250,253,256],{},[180,251,252],{},"向く場面",[180,254,255],{},"1〜数ページの単機能ツール、社内ダッシュボード",[180,257,258],{},"ページ数が多い、状態共有が要る、SEOが要るサイト",[60,260,262],{"id":261},"記事っぽいコンテンツ中心-astro","記事っぽいコンテンツ中心: Astro",[46,264,265],{},"文章系のコンテンツが中心のサイトにAstroを選ぶ判断は正しい。",[60,267,269],{"id":268},"nuxtとastroの違い","NuxtとAstroの違い",[65,271,272,276],{},[68,273],{"src":274,"alt":275},"/images/web-tech-stack-2026/figure-02.svg","Nuxt・Next.jsはアプリケーション全体をハイドレートする前提、Astroは既定でJSゼロにして指定した部分だけをVue・Reactでハイドレートする前提という設計思想の違いがある",[73,277,278],{},"図2: NuxtとAstroの違いは機能の優劣ではなく、サイトの大半が動くか読むかという前提の違い",[46,280,281],{},"Nuxt/Next.jsは「サイト全体がインタラクティブなアプリケーション」を前提に設計されており、コンポーネントは既定でクライアント側にハイドレート（JavaScriptで動く状態に）される。Astroは「サイトの大半は読み物」を前提に設計されており、既定ではJavaScriptを一切送らずHTMLのまま配信する。Vue・React・Svelteといったコンポーネントを使いたい箇所だけ、「Island（島）」として個別に指定してハイドレートする。1つのAstroページの中に、Vueで書いたカルーセルとReactで書いたモーダルを共存させることもできる。",[46,283,284],{},"したがって、ブログ・ドキュメント・LPのように「大半は読ませるページで、動く部分は一部だけ」というサイトはAstroの得意領域であり、逆に管理画面・ダッシュボードのように「ページの大半が状態を持つUI」であるサイトはNuxt/Next.jsの得意領域になる。",[60,286,288],{"id":287},"ちょっとしたapiが必要-workers直接-vs-hono","ちょっとしたAPIが必要: Workers直接 vs Hono",[156,290,291,303],{},[159,292,293],{},[162,294,295,298,300],{},[165,296,297],{},"選択肢",[165,299,252],{},[165,301,302],{},"具体例",[175,304,305,316],{},[162,306,307,310,313],{},[180,308,309],{},"生のCloudflare Workers",[180,311,312],{},"エンドポイントが1〜数個、ルーティングがif分岐数個で済む",[180,314,315],{},"Webhookの受け口1つ、単純なリダイレクトルーター",[162,317,318,321,324],{},[180,319,320],{},"Hono",[180,322,323],{},"ルート数が増える、パスパラメータが要る、ミドルウェア（認証・CORS・バリデーション）が要る",[180,325,326],{},"複数リソースを持つREST API、認証を挟む管理API、OpenAPI仕様を出したいAPI",[46,328,329,330,105,333,336],{},"Honoは軽量なTypeScript-firstのWebフレームワークで、Web標準（",[79,331,332],{},"Request",[79,334,335],{},"Response","）に準拠しているためCloudflare Workers・Deno・Bunと相性がよい。2026年時点でCloudflare Workers上に複数エンドポイントを持つAPIを新規に作る場合の既定の選択肢になっている。",[14,338,339],{"id":339},"サーバーが必要になったら",[46,341,342,343,346],{},"ここから先は元のメモの構成（React/Next.js前提）をそのまま残す。Vue圏で対応させる場合、「小〜中規模」の枠はNuxtのSSRモード（Nitroの",[79,344,345],{},"cloudflare","プリセットでCloudflare Workers上にデプロイ）が、「中〜大規模で最短」の枠はVercel上のNuxtが、それぞれTanStack Start・Next.jsの役割に近い。",[18,348,349,355,361],{},[21,350,351,354],{},[31,352,353],{},"小規模〜中規模"," → TanStack Start on CF Workers",[21,356,357,360],{},[31,358,359],{},"中〜大規模。最短で出したい"," → Next.js on Vercel",[21,362,363,366],{},[31,364,365],{},"中規模でコスト削減したい。苦しむ覚悟がある"," → OpenNext on CF Workers（Next.js専用のCloudflareアダプタで、公式サポート外の部分を自分たちで埋める必要がある）",[46,368,369],{},"なお、Nuxtの場合はNitroが元々Cloudflare向けのプリセットをネイティブに持っているため、OpenNextのような追加アダプタを挟む苦労は生じにくい。",[14,371,373],{"id":372},"db","DB",[156,375,376,386],{},[159,377,378],{},[162,379,380,382,384],{},[165,381,297],{},[165,383,252],{},[165,385,302],{},[175,387,388,399,410,421,432],{},[162,389,390,393,396],{},[180,391,392],{},"D1 / Durable Objects",[180,394,395],{},"小〜中規模でCloudflare Workersを使っている",[180,397,398],{},"個人開発のSaaS MVP、ブログのコメント機能、簡単なTodoアプリのバックエンド",[162,400,401,404,407],{},[180,402,403],{},"Turso",[180,405,406],{},"Cloudflare以外のホスティングで小〜中規模のSQLite的DBが欲しい",[180,408,409],{},"Vercel上のアプリでlibSQLのEmbedded Replicaを使い、読み取りをリージョンごとに高速化したいとき",[162,411,412,415,418],{},[180,413,414],{},"Supabase",[180,416,417],{},"Postgresを安く使いたい、国内向け",[180,419,420],{},"国内向けSaaSで、認証・リアルタイム機能もセットで欲しいとき",[162,422,423,426,429],{},[180,424,425],{},"Neon",[180,427,428],{},"Postgresを安く使いたい、東京リージョンがなくてもよい海外向け",[180,430,431],{},"サーバーレスPostgres、ブランチ機能でPRごとに検証用DBを分離したい開発チーム",[162,433,434,437,440],{},[180,435,436],{},"PlanetScale",[180,438,439],{},"Postgres/MySQLを使いたく、コストは許容できる",[180,441,442],{},"本格的にスケールするtoCサービス、頻繁なスキーマ変更を伴うチーム開発",[14,444,445],{"id":445},"ストレージ",[156,447,448,458],{},[159,449,450],{},[162,451,452,454,456],{},[165,453,297],{},[165,455,252],{},[165,457,302],{},[175,459,460,471,482],{},[162,461,462,465,468],{},[180,463,464],{},"R2",[180,466,467],{},"コストを節約したい",[180,469,470],{},"個人ブログの画像・動画配信、アクセス数はあるが予算が限られるプロジェクト",[162,472,473,476,479],{},[180,474,475],{},"AWS S3 / GCS（バージョニング有効）",[180,477,478],{},"消えたら詰む",[180,480,481],{},"契約書・請求書等の法定保存文書、金融系のバックアップアーカイブ",[162,483,484,487,490],{},[180,485,486],{},"R2 + 定期バックアップ（S3/GCS最安クラス）",[180,488,489],{},"節約したいが消えたら詰む",[180,491,492],{},"個人開発だが顧客データを預かるSaaS、コストを抑えつつ最低限の冗長性は欲しいとき",[14,494,495],{"id":495},"メール配信",[156,497,498,508],{},[159,499,500],{},[162,501,502,504,506],{},[165,503,297],{},[165,505,252],{},[165,507,302],{},[175,509,510,521,532],{},[162,511,512,515,518],{},[180,513,514],{},"AWS SES",[180,516,517],{},"たくさん送る",[180,519,520],{},"月間数万〜数十万通のトランザクションメール（パスワードリセット、注文確認）を送るサービス",[162,522,523,526,529],{},[180,524,525],{},"Cloudflare Email Service",[180,527,528],{},"Workersを使っている",[180,530,531],{},"Workers上で完結させたい小規模プロジェクトの通知メール",[162,533,534,537,540],{},[180,535,536],{},"Resend",[180,538,539],{},"あまり送らない",[180,541,542],{},"個人開発SaaSのウェルカムメール・週次ダイジェスト、月数百〜数千通程度",[46,544,545],{},"(SendGridは無料プランがなくなったため候補から外している。)",[14,547,548],{"id":548},"その他",[156,550,551,562],{},[159,552,553],{},[162,554,555,558,560],{},[165,556,557],{},"用途",[165,559,297],{},[165,561,302],{},[175,563,564,575,586,597],{},[162,565,566,569,572],{},[180,567,568],{},"決済",[180,570,571],{},"Stripe",[180,573,574],{},"サブスク課金・単発課金いずれも",[162,576,577,580,583],{},[180,578,579],{},"認証",[180,581,582],{},"BetterAuthを検討し、要件が合わなければ他サービス",[180,584,585],{},"自前で持ちたいがゼロから実装はしたくないとき",[162,587,588,591,594],{},[180,589,590],{},"リアルタイム同期",[180,592,593],{},"Cloudflare WorkersのDurable Objects",[180,595,596],{},"チャット、共同編集、ライブスコア表示",[162,598,599,602,605],{},[180,600,601],{},"一部の人に向けて公開",[180,603,604],{},"Cloudflare Zero Trust",[180,606,607],{},"社内ツール、限定ベータ公開",[14,609,610],{"id":610},"ビジネス的な要件が色々ある",[46,612,613],{},"Google Cloudのサービスを組み合わせる（Cloud Run / SQL / Memorystore / Tasks / Scheduler / Storage）。具体的には次のような場面で選択肢に上がる。",[18,615,616,619,622,625],{},[21,617,618],{},"既存のGoogle Workspace/GCP資産と統合が必要",[21,620,621],{},"コンプライアンス要件でリージョン・監査ログ等の柔軟な制御が必要",[21,623,624],{},"チームがKubernetes/コンテナベースの運用に慣れている",[21,626,627],{},"Cloudflare/Vercelのマネージドサービスだけでは足りない複雑なワークフロー（バッチ処理、キュー、スケジュールジョブの組み合わせ）がある",[14,629,630],{"id":630},"まとめ",[156,632,633,643],{},[159,634,635],{},[162,636,637,640],{},[165,638,639],{},"疑問",[165,641,642],{},"回答",[175,644,645,653,661,669,677],{},[162,646,647,650],{},[180,648,649],{},"「React + Vite」は「Next + Vite」になり得るか",[180,651,652],{},"ならない。Next.jsは独自バンドラー（Turbopack）を使う別系統のフレームワークで、Viteの上には乗っていない",[162,654,655,658],{},[180,656,657],{},"単純とちょい複雑の違いは何か",[180,659,660],{},"ビルドツール単体（Vite）か、ルーティング・データフェッチ・SEOを規約として持つメタフレームワーク（Nuxt）かの違い",[162,662,663,666],{},[180,664,665],{},"「ちょい複雑＝フロントで複雑な処理をしたいときにNext.js的なものが出てくる」の理解は合っているか",[180,667,668],{},"合っている。Vue版ではその役をNuxtが担う",[162,670,671,674],{},[180,672,673],{},"記事コンテンツ中心はAstroでいいか",[180,675,676],{},"よい。Nuxt/Next.jsは全体をハイドレートする「アプリケーション」前提、Astroは既定JSゼロで一部だけ動かす「コンテンツ」前提という設計思想の違いがある",[162,678,679,682],{},[180,680,681],{},"Workers直接とHonoの違いは何か",[180,683,684],{},"エンドポイントが少なければ生のWorkers、ルーティングやミドルウェアが増えたらHono",{"title":686,"searchDepth":687,"depth":687,"links":688},"",2,[689,690,691,701,702,703,704,705,706,707],{"id":16,"depth":687,"text":16},{"id":51,"depth":687,"text":52},{"id":58,"depth":687,"text":58,"children":692},[693,695,696,697,698,699,700],{"id":62,"depth":694,"text":63},3,{"id":89,"depth":694,"text":90},{"id":124,"depth":694,"text":125},{"id":134,"depth":694,"text":135},{"id":261,"depth":694,"text":262},{"id":268,"depth":694,"text":269},{"id":287,"depth":694,"text":288},{"id":339,"depth":687,"text":339},{"id":372,"depth":687,"text":373},{"id":445,"depth":687,"text":445},{"id":495,"depth":687,"text":495},{"id":548,"depth":687,"text":548},{"id":610,"depth":687,"text":610},{"id":630,"depth":687,"text":630},null,"個人的な技術選定メモをVue.jsベースに統一し、React+ViteとNext+Viteの関係、Vue+ViteとNuxtの分かれ目、Astroとの使い分け、Workers直接とHonoの使い分け、DB・ストレージ・メール配信の規模別実例までを整理する","md",{},true,"/web-tech-stack-2026",false,"2026-07-22T00:00:00.000Z",{"title":5,"description":709},"2026-07/2026-07-22/web-tech-stack-2026",[719,720,721,722,723],"Vue","Nuxt","Astro","Cloudflare","アーキテクチャ","RttrqPFFRnuuQt-M4xCXPZYyJpKwY_Cvyif-VzMjyt8",[],[727,731,735,738,741],{"title":728,"path":729,"publishedAt":730},"cockpit-nuxt-vuetify Nuxt 4 移行計画（新規プロジェクト方式）","/nuxt2-to-nuxt4-migration-plan","2026-01-07T00:00:00.000Z",{"title":732,"path":733,"publishedAt":734},"コーディング規約ビューアのTOC開閉バグ修正","/coding-standards-viewer-toc-reactivity-fix","2025-11-18T00:00:00.000Z",{"title":736,"path":737,"publishedAt":734},"Draw.io動的埋め込み：採用した実装方法","/drawio-embedding-implementation",{"title":739,"path":740,"publishedAt":715},"Cloudflare PagesとWorkers Static Assetsの違い、エッジキャッシュが効く仕組み","/cloudflare-pages-workers-static-assets",{"title":742,"path":743,"publishedAt":744},"英語の図解Artifactを日本語化して単独Vueページで公開するまで - AI導入5ステップの移植記録","/ai-adoption-steps-page","2026-07-17T00:00:00.000Z","https://log.eurekapu.com/og/blog/web-tech-stack-2026.png?v=2026-07-22T00%3A00%3A00.000Z&title=Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E6%8A%80%E8%A1%93%E6%A7%8B%E6%88%90%202026%E5%B9%B4%E7%89%88%20%E2%80%94%20Vue.js%2FNuxt%2FAstro%E3%81%AE%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91%E3%81%A8%E3%81%9D%E3%81%AE%E7%90%86%E7%94%B1&author=Kei%20Komatsu&sig=f92214689e61c0e9",1784705235747]