[{"data":1,"prerenderedAt":315},["ShallowReactive",2],{"content-/astro-vs-nuxt-general-purpose":3,"all-pages-for-dir":294,"related-/astro-vs-nuxt-general-purpose":295,"og-image-/astro-vs-nuxt-general-purpose":314},{"id":4,"title":5,"body":6,"category":280,"concepts":280,"description":281,"extension":282,"meta":283,"navigation":284,"ogImage":280,"path":285,"project_name":280,"published":286,"publishedAt":287,"seo":288,"stem":289,"tags":290,"todo":280,"unpublished":286,"updatedAt":280,"__hash__":293},"pages/2026-07/2026-07-23/astro-vs-nuxt-general-purpose.md","「汎用的にはAstro」は何を指しているのか",{"type":7,"value":8,"toc":269},"minimark",[9,13,17,42,46,55,58,61,64,74,86,93,96,100,107,117,124,131,135,142,149,152,156,159,162,167,170,174,180,186,196,199,202],[10,11,5],"h1",{"id":12},"汎用的にはastroは何を指しているのか",[14,15,16],"h2",{"id":16},"結論",[18,19,20,33,36,39],"ul",{},[21,22,23,24,28,29,32],"li",{},"「汎用的」には二つの軸がある。フレームワーク自体が",[25,26,27],"strong",{},"できることの広さ","と、ある種類のサイトへの",[25,30,31],{},"適合度","である。",[21,34,35],{},"できることの広さで比べれば、Nuxtの方が広い。サーバー、データベース、認証、APIまで一つのフレームワークで持てる。",[21,37,38],{},"静的なコンテンツサイトへの適合度で比べれば、Astroの方が合う。既定でJavaScriptを送らず、ビルド時にHTMLを出力するだけで完結する。",[21,40,41],{},"「静的サイトなら汎用的にはAstro」という助言は、後者の軸の話をしている。前者の軸では、Nuxtの方が汎用的だという直感はそのまま正しい。",[14,43,45],{"id":44},"汎用的が指しているものが二つある","「汎用的」が指しているものが二つある",[47,48,49,50,54],"p",{},"WordPressから移行するeurekapuのアーカイブサイト（",[51,52,53],"code",{},"wordpress-migration","）の技術選定を検討していたときに、次のような助言を受けた。",[47,56,57],{},"「静的サイトとしては、汎用的にはAstroが有力」",[47,59,60],{},"この助言に対して、次の疑問が浮かんだ。",[47,62,63],{},"「汎用的というなら、Nuxtの方が汎用的なのではないか」",[47,65,66,67,70,71,73],{},"この疑問は正しい。Nuxtはサーバーサイドの処理、データベースとの接続、ユーザー認証、外部APIの呼び出しまで一つのフレームワークで扱える。実際に、同じeurekapuブランドの商用プロダクトである",[51,68,69],{},"eurekapu-nuxt4","は、Nuxt 4の上にCloudflare D1（データベース）、Cloudflare R2（画像や音声の配信）、認証機能を組み合わせて構築されている。将来的にはStripeによる決済も載せる計画がある。",[25,72,27],{},"という軸で見れば、Nuxtの方が明らかに汎用的である。",[75,76,77,82],"figure",{},[78,79],"img",{"src":80,"alt":81},"/images/astro-vs-nuxt-general-purpose/figure-01.svg","NuxtとAstroはどちらも汎用的だが、勝っている軸が違う。Nuxtは機能の広さ、Astroは読み物中心サイトへの適合度で優位に立つ",[83,84,85],"figcaption",{},"図1: Nuxtは機能の広さで勝ち、Astroは読み物サイトへの適合で勝つ。「汎用的」という一語が指している軸が違うだけで、優劣ではない",[47,87,88,89,92],{},"一方で、「静的サイトとしては汎用的にはAstroが有力」という助言が指しているのは、別の軸である。ブログ、ドキュメントサイト、アーカイブサイトのように",[25,90,91],{},"大半が読み物で構成されるサイト","という広いカテゴリに対して、どちらのフレームワークがより素直に当てはまるか、という軸である。この軸で見れば、Astroの方が汎用的である。",[47,94,95],{},"両者とも「汎用的」ではある。ただし、その言葉が指している軸が違う。",[14,97,99],{"id":98},"nuxtができることの広さ","Nuxtができることの広さ",[47,101,102,103,106],{},"Nuxtは、Vue 3を土台にしたフルスタックのアプリケーションフレームワークである。ルーティング、データ取得、SEO用のメタタグ管理、画像最適化といった機能を規約として持ち、さらに",[51,104,105],{},"server/api/","ディレクトリにサーバーサイドの処理を書ける。これによって、フロントエンドとバックエンドを同じプロジェクト内で完結させられる。",[47,108,109,110,113,114,116],{},"内部では",[25,111,112],{},"Nitro","というサーバーエンジンがこの仕組みを支えている。NitroはCloudflare Workers、Vercel、Node.jsサーバーなど複数のデプロイ先に対応したプリセットを持ち、どこにデプロイしても同じサーバー機能が動く。",[51,115,69],{},"がCloudflare Workers上でD1データベースと認証機能を動かせているのは、このNitroの機能による。",[47,118,119,120,123],{},"Nuxtはページ全体を、既定でクライアント側にハイドレートする。",[25,121,122],{},"ハイドレート","とは、サーバーから届いた静的なHTMLに対して、ブラウザ側でJavaScriptを実行し、クリックや入力に反応できる状態へ変えることを指す。ボタンを押して状態が変わる、フォームに入力した値がその場でバリデーションされる、複数のコンポーネント間でデータを共有する、といった挙動は、このハイドレートの上に成り立っている。",[47,125,126,127,130],{},"Nuxtには",[51,128,129],{},"nuxt generate","という、サーバーを立てずに静的HTMLとして書き出すモードもある。ただしこのモードでも、書き出されたページはVueのアプリケーションとしてクライアント側で丸ごとハイドレートされる。静的に書き出しているのはあくまで初期表示のHTMLであり、実行モデルそのものは変わらない。",[14,132,134],{"id":133},"astroが読み物サイトに合う理由","Astroが読み物サイトに合う理由",[47,136,137,138,141],{},"Astroは、Nuxtとは異なる前提で設計されている。Astroが既定で送るJavaScriptの量は",[25,139,140],{},"ゼロ","である。ページはビルド時にHTMLへ変換され、そのHTMLがそのままブラウザに届く。ボタンのクリックやフォームの入力といった動きが要らないページであれば、JavaScriptを一切読み込まずに表示が完結する。",[47,143,144,145,148],{},"動きが必要な部分だけ、個別に指定してハイドレートできる。この仕組みは",[25,146,147],{},"アイランドアーキテクチャ","と呼ばれ、ページ全体を一つのアプリケーションとして扱うのではなく、必要な部分だけを独立した「島」として動かす。指定できるコンポーネントはVueに限らない。ReactやSvelteで書いた部品を同じページに混在させることもできる。",[47,150,151],{},"Astroはこの前提のもとで、MarkdownやMDXのファイルをコンテンツとして扱う仕組み（コンテンツコレクション）を標準で持つ。frontmatterのスキーマを定義しておけば、型のついたデータとして記事を扱える。ブログやドキュメントサイトのように、ページの大半が文章と画像で構成され、動く部分がごく一部にとどまるサイトでは、この設計がそのまま強みになる。",[14,153,155],{"id":154},"機能が使われないと広さはコストになる","機能が使われないと、広さはコストになる",[47,157,158],{},"ここまでの説明だけでは、「Nuxtの方が何でもできるなら、Nuxtを選んでおけば損はないのでは」という疑問が残る。",[47,160,161],{},"この疑問には、コストの面から答える必要がある。Nuxtが持つ機能の広さは、無料ではない。ページ全体をクライアント側でハイドレートする以上、Vueの実行環境そのものをブラウザへ送る必要があり、その分だけ初期表示にかかるJavaScriptの量が増える。サーバー機能を使わない場合でも、Nitroというサーバーエンジンの層は構成として残り、依存関係の更新やビルド設定の対象になり続ける。",[47,163,164,166],{},[51,165,53],{},"のアーカイブサイトが実際に必要としている機能を数えると、記事本文の表示、前後の記事への移動、矢印キーでのページ送り、目次のスクロール追従、ギャラリー画像の切り替えである。認証もデータベースも要らない。これらの機能は、素のJavaScriptだけで実装できる範囲にとどまっている。実際、現時点のプレビュー環境はNode.jsスクリプトとVanilla JavaScriptだけで、この機能一式をすでに動かしている。",[47,168,169],{},"Nuxtが持つ「認証、DB、API」という広さは、このサイトにとっては使われないまま残るコストになる。逆に、Astroが前提とする「大半は読み物、動く部分は一部だけ」という設計は、このサイトの実態にそのまま重なる。",[14,171,173],{"id":172},"それでもnuxtを選ぶ理由はあるか","それでもNuxtを選ぶ理由はあるか",[47,175,176,177,179],{},"適合度だけで判断すれば、",[51,178,53],{},"のアーカイブサイトにはAstroが向いている。ただし、これとは別の理由でNuxtを選ぶ判断にも根拠はある。",[47,181,182,183,185],{},"一つは、",[51,184,69],{},"とVueコンポーネントを実際に共有する計画が具体化した場合である。両者が同じNuxtの上に乗っていれば、UIコンポーネントをパッケージとして共有できる。この場合の理由は「静的サイトとしての適合度」ではなく、「別プロジェクトとのコード共有」という、また別の軸に基づく判断になる。",[47,187,188,189,191,192,195],{},"もう一つは、Nuxtをすでに使い慣れているという事情である。",[51,190,69],{},"と",[51,193,194],{},"mdx-playground","はいずれもNuxt 4で構築されており、ファイルベースルーティングやデータ取得の作法にはすでに慣れている。新しいフレームワークを一つ増やす代わりに、慣れた道具で済ませるという判断も、実務上は十分に成立する。",[47,197,198],{},"いずれの理由も、「Nuxtの方がフレームワークとして汎用的だから」という理由とは別のところにある。",[14,200,201],{"id":201},"まとめ",[203,204,205,221],"table",{},[206,207,208],"thead",{},[209,210,211,215,218],"tr",{},[212,213,214],"th",{},"軸",[212,216,217],{},"勝つ方",[212,219,220],{},"理由",[222,223,224,236,247,259],"tbody",{},[209,225,226,230,233],{},[227,228,229],"td",{},"フレームワーク自体ができることの広さ",[227,231,232],{},"Nuxt",[227,234,235],{},"サーバー、DB、認証、APIまで一つで完結する",[209,237,238,241,244],{},[227,239,240],{},"読み物中心のサイトへの適合度",[227,242,243],{},"Astro",[227,245,246],{},"既定でJavaScriptを送らず、必要な部分だけをハイドレートする",[209,248,249,254,256],{},[227,250,251,253],{},[51,252,53],{},"アーカイブサイトでの判断",[227,255,243],{},[227,257,258],{},"認証もDBも使わず、必要な機能はすでにVanilla JavaScriptで足りている",[209,260,261,264,266],{},[227,262,263],{},"別プロジェクトとコンポーネントを共有したい場合",[227,265,232],{},[227,267,268],{},"同じフレームワークの上に乗っていれば、UIコンポーネントを共有できる",{"title":270,"searchDepth":271,"depth":271,"links":272},"",2,[273,274,275,276,277,278,279],{"id":16,"depth":271,"text":16},{"id":44,"depth":271,"text":45},{"id":98,"depth":271,"text":99},{"id":133,"depth":271,"text":134},{"id":154,"depth":271,"text":155},{"id":172,"depth":271,"text":173},{"id":201,"depth":271,"text":201},null,"静的サイトの技術選定でAstroが「汎用的」と評される理由を、Nuxtとの比較で整理する。汎用性には機能の広さと適合度という二つの軸があり、勝つ側が違うだけである","md",{},true,"/astro-vs-nuxt-general-purpose",false,"2026-07-23T00:00:00.000Z",{"title":5,"description":281},"2026-07/2026-07-23/astro-vs-nuxt-general-purpose",[243,232,291,292],"アーキテクチャ","静的サイト","aS1cvLW33iYXujUTHjNkBSFXoUJKugm2KY-0uWz4svc",[],[296,300,304,308,311],{"title":297,"path":298,"publishedAt":299},"Webサービスの技術構成 2026年版 — Vue.js/Nuxt/Astroの使い分けとその理由","/web-tech-stack-2026","2026-07-22T00:00:00.000Z",{"title":301,"path":302,"publishedAt":303},"Cloudflare Pages の 1MB Worker bundle 制限に当たって構成図A〜Dを書きながら設計判断を整理した","/cloudflare-pages-workers-bundle-architecture","2026-06-16T00:00:00.000Z",{"title":305,"path":306,"publishedAt":307},"Draw.io動的埋め込み：採用した実装方法","/drawio-embedding-implementation","2025-11-18T00:00:00.000Z",{"title":309,"path":310,"publishedAt":299},"Cloudflare PagesとWorkers Static Assetsの違い、エッジキャッシュが効く仕組み","/cloudflare-pages-workers-static-assets",{"title":312,"path":313,"publishedAt":299},"eurekapu-nuxt4の積み残し解消：lint・依存脆弱性ゼロ化から語源単語ページ再構成まで","/eurekapu-nuxt4-maintenance-catchup","https://log.eurekapu.com/og/blog/astro-vs-nuxt-general-purpose.png?v=2026-07-23T00%3A00%3A00.000Z&title=%E3%80%8C%E6%B1%8E%E7%94%A8%E7%9A%84%E3%81%AB%E3%81%AFAstro%E3%80%8D%E3%81%AF%E4%BD%95%E3%82%92%E6%8C%87%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%8B&author=Kei%20Komatsu&sig=42dc0be3740e25f9",1784786417139]