Skip to content
Latchkey

Next.js vs Astro: アプリフレームワークかコンテンツサイトか?

Next.jsは動的アプリ向けのフルスタックReactフレームワーク。Astroはデフォルトでゼロのjsを出荷し、インタラクティブ性のためにislandsを使うコンテンツ優先のフレームワークです。

Next.jsはサーバーレンダリングと豊富なランタイムを備えた、動的でインタラクティブなReactアプリケーションを対象とします。Astroはコンテンツ - ブログ、ドキュメント、マーケティング - のために作られ、islandが必要としない限りJavaScriptなしの静的HTMLを出荷し、1ページ上でReact、Vue、Svelteなどを混在させられます。

Next.jsAstro
主な用途動的アプリコンテンツ / マーケティングサイト
デフォルトのJSハイドレートされたアプリゼロJS、islandsはopt-in
UIフレームワークReactReact, Vue, Svelte など
出力SSR / SSG / edgeStatic-first、SSRは任意
最適な用途アプリ中心のプロダクト高速なコンテンツサイト

CIでは

Astroの静的ビルドは高速で、ほとんどHTMLを生成するため、CIは軽くcacheに優しいです。Next.jsのビルドはReactランタイムとルーティングのため重くなります。コンテンツ主体のサイトにはAstro、ページの大部分が動的アプリケーションの場合はNext.jsを選びましょう。

高速化する

依存関係とビルド出力ディレクトリを実行間でcacheします。両方ともCI runner上でビルドされます。高速なmanaged runnerは静的生成とbundlingのステップを短縮します。

結論

動的でインタラクティブなアプリを構築する: Next.js。最小限のjsを出荷すべき高速なコンテンツ、ドキュメント、マーケティングサイトを構築する: Astro。多くのチームはマーケティングサイトにAstro、プロダクトにNext.jsを使います。

関連ガイド