AstroとNext.jsの比較：あなたのサイトに合うのは
ホーム AstroとNext.jsの比較：アイランドとServer Components | We.Inc
Astroはインタラクティブなアイランド付きの静的HTMLを出力し、Next.jsはServer ComponentsでReactアプリを構築します。出力方式、インタラクティブ性、ホスティングを比較し、要件で判定できます。
Astroはページを HTMLにレンダリングし、clientディレクティブ付きのアイランドを追加しない限りクライアントJavaScriptを含めません。そのためコンテンツサイトに非常に適しています。Next.jsはReactフレームワークで、ページはデフォルトでServer Componentsになり、インタラクティブな部分だけを'use client'で切り替えます。ログインや多くの状態を持つアプリ的なプロダクトに向いています。
AstroとNext.jsの比較
デフォルトの出力 ビルド時にプリレンダリングされる静的HTML サーバーレンダリングされるReact。静的エクスポートも可能 デフォルトのクライアントJavaScript Astroコンポーネントにはなし Reactランタイムに加えてClient Components 一部をインタラクティブにする方法 client:load、client:idle、client:visible、client:media、client:only ファイル先頭に'use client' UIフレームワーク React、Preact、Svelte、Vue、SolidJS React リクエストごとのレンダリング アダプターを追加し、prerender = falseまたはoutput: 'server'を設定 next startで実行すれば標準で対応 遅延されるサーバー部分 server:deferによるサーバーアイランド サーバーレンダリングをクライアントへストリーミング ホスティングの選択肢 任意の静的ホスト、またはNode.js、Netlify、Vercel、Cloudflareのアダプター Node.jsサーバー、Docker、静的エクスポート、アダプター プロジェクトに当てはまる要件にチェックを入れてください。それぞれ理由とともにAstroかNext.jsのどちらかに傾き、下の集計が出発点となるおすすめを示します。最終的な結論ではありません。
プロジェクトに当てはまる項目をすべて選択します。 選択した各要件の下に表示される理由を読みます。 下部の集計とおすすめを確認します。 さらに下のコード例で、それぞれのフレームワークがインタラクティブな部分をどう追加するかを確認します。 ウィジェットがいくつかあるだけのコンテンツサイトこそ、Astroが真価を発揮する場面です。指定したアイランド以外、すべてのページが素のHTMLのままです。 スクロールしないと見えない位置のウィジェットにはclient:visibleを選びましょう。Astroはアイランドが画面に入るまでJavaScriptの読み込みを待ちます。 Next.jsでは、'use client'をできるだけ深い階層に置きましょう。レイアウト全体ではなく検索ボックスだけを指定すれば、クライアントバンドルを小さく保てます。 Reactコンポーネントがすでにありますか？どちらのフレームワークでも使えます。Astroではnpx astro add reactでReactインテグレーションをインストールします。 よくある質問
AstroでReactコンポーネントを使えますか？
使えます。npx astro add reactを実行すれば、.astroページにReactコンポーネントをインポートできます。clientディレクティブがなければ静的HTMLとしてレンダリングされるだけなので、インタラクティブにするにはclient:loadなどのディレクティブを追加します。
Astroは静的サイト専用ですか？
いいえ。サーバーアダプターをインストールすれば、export const prerender = falseで任意のページをプリレンダリングから外せます。またはoutput: 'server'を設定してすべてのページをリクエストごとにレンダリングし、選んだページだけをプリレンダリングすることもできます。
AstroのアイランドとReact Server Componentsは同じものですか？
似た問題を逆方向から解決しています。AstroはJavaScriptゼロから始めて、インタラクティブなアイランドを追加します。Next.jsはサーバーレンダリングされたReactから始めて、クライアント部分を指定します。React Server Components自体のコードがブラウザーに送られることはありません。
ブログにはどちらが向いていますか？
たいていはAstroです。ブログの大部分はJavaScript不要のテキストと画像だからです。Next.jsでもブログは十分に扱え、ブログが大きなReactアプリの中にあるならNext.jsのほうが選びやすいでしょう。
ダッシュボードやSaaSアプリにはどちらが向いていますか？
たいていはNext.jsです。フォーム、リアルタイムデータ、共有されたクライアント状態を持つログイン後の画面はReactの得意分野で、Route Handlersも同じプロジェクト内に置けます。
Astroのアイランドの仕組み
Astroコンポーネントには、先頭にサーバー上でのみ実行されるスクリプト部分があり、その下にテンプレートがあります。クライアントでレンダリングされることはなく、結果はビルド時またはリクエスト時に生成されるHTMLです。 ページの一部をクリックに反応させたいときは、React、Svelte、Vueなど対応フレームワークのコンポーネントを配置し、clientディレクティブを付けます。JavaScriptを読み込むのはそのアイランドだけで、タイミングはディレクティブで決まります。すぐに、ブラウザーがアイドル状態のとき、画面に入ったとき、メディアクエリが一致したとき、のいずれかです。 Next.jsのServer Componentsの仕組み
Next.jsのApp Routerでは、特に指定しない限りレイアウトとページはServer Componentsです。データベースやシークレットに直接アクセスでき、そのコードはブラウザーに送られません。 ファイルに'use client'を追加すると、そこが境界になります。そのファイル、そのインポート、そこでレンダリングされるコンポーネントはクライアントバンドルに含まれてハイドレーションされるため、状態、エフェクト、イベントハンドラーが動作します。 どちらを選ぶか
ほとんどのページが「使う」より「読む」ものなら、Astroから始めましょう。ほとんどのページが「読む」より「使う」ものなら、またはチームがReact中心なら、Next.jsから始めましょう。混在するサイトでは、マーケティングサイトをAstroで、アプリをサブドメインのNext.jsで運用することもよくあります。 それぞれでインタラクティブな部分を1つ追加する
Reactアイランドを含むAstroページ
見出しと段落は素のHTMLとして配信されます。JavaScriptを読み込むのはLikeButtonだけで、それも画面に入ったときだけです。
Client Componentを含むNext.jsページ
ページはServer Componentです。ブラウザーでハイドレーションされるのは'use client'のファイルだけです。
Astroでリクエストごとにレンダリングする
Node.jsアダプターを使ったサーバー出力
先にnpx astro add nodeを実行します。outputを'server'に設定すると、prerender = trueをエクスポートしたページ以外はすべてリクエストごとにレンダリングされます。
ほとんどのページが記事、ドキュメント、マーケティング文章
AstroコンポーネントはクライアントJavaScriptなしでHTMLにレンダリングされ、読むためのページにはそれで十分です。
React と一緒にSvelteやVueのコンポーネントも使いたい
Astroは同じページでReact、Preact、Svelte、Vue、SolidJSに対応しています。
インタラクティブな要素は一部のウィジェットだけ
clientディレクティブは、そのアイランドのJavaScriptだけを、必要なときにだけ読み込みます。
シンプルな静的ファイルホスティングで公開したい
Astroの出力はデフォルトで静的です。Next.jsの静的エクスポートも使えますが、サーバーが必要な機能は使えなくなります。
ほとんどの画面がログイン後にある
データの多いログイン後の画面には、Server Componentsがサーバーでデータを取得するReactの状態管理が向いています。
多くのコンポーネントがクライアント状態を共有する
コンテキストプロバイダーとClient Componentsを使うReactアプリなら、共有状態を直接扱えます。
同じプロジェクトにAPIエンドポイントを置きたい
Route Handlersはページと並べて置け、サイトがNode.jsサーバーで動いていればいつでも実行されます。
チームがすでにすべてをReactで作っている
Next.jsは上から下までReactなので、2つ目のコンポーネントモデルを学ぶ必要がありません。
あなたのプロジェクトに合うのは？
プロジェクトの要件
Astro：{a}、Next.js：{n}
プロジェクトに当てはまる要件を選択してください。
Astroがおすすめです。
Next.jsがおすすめです。
同点です。どちらでも問題ないので、チームが慣れているほうを選びましょう。
選択をクリア
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る