Next.jsとAstroの違いは？レンダリング・JS・用途を比較

ひよこ

Next.jsとAstroは何で選べばいい？

ペンギン先生

読む内容が中心か、アプリ全体で操作や状態を共有するかを起点にするといいよ。Astroはコンテンツ中心のサイト、Next.jsはReactのアプリ開発を軸に考えやすい。ただしどちらも作れるものを二分する境界ではないんだ。

ひよこ

AstroはJavaScriptがゼロなの？

ペンギン先生

AstroコンポーネントはHTMLへ描画され、UIコンポーネントのクライアントJSは必要な島に明示して追加する考え方だよ。自分で書くscriptや解析ツールなどもあるから、サイト全体のJSが必ずゼロという意味ではないんだ。

ひよこ

Next.jsはアプリ全部をブラウザへ送る？

ペンギン先生

App Routerのページやレイアウトは既定でServer Componentsだよ。ブラウザの操作が必要な部分にClient Componentsを使う。境界の置き方でJS量が変わるので、常に全ロジックを配信するという説明は正しくないね。

ひよこ

Astroの島には何を置くの？

ペンギン先生

検索ボックスや画像カルーセルなどの独立した操作部分を置けるよ。client:loadやclient:visibleなどで読み込みのタイミングを指定する。ReactやVueなどの対応するUIフレームワークを利用できるんだ。

ひよこ

静的サイトしか作れないの？

ペンギン先生

Astroは既定で事前生成するけれど、アダプターを使って必要なルートをリクエスト時に描画することもできるよ。Next.jsにも事前生成やサーバー描画の選択肢がある。公開先で対応する機能まで確認しよう。

ひよこ

速度ならAstroの圧勝？

ペンギン先生

設計上JSを減らしやすいけれど、実際の速さは画像、フォント、外部スクリプト、DB、キャッシュでも変わるよ。同じ画面と操作を用意して測らないと、フレームワーク名だけで順位は付けられないんだ。

ひよこ

ブログにログイン機能があったらNext.js？

ペンギン先生

それだけでは決まらないよ。読むページが中心で一部だけ個別表示ならAstroも候補。画面をまたぐ状態やReactコンポーネントを多く共有するならNext.jsを検討しやすい。境界の設計とチームの経験を見よう。

ひよこ

移行前に何を試せばいい？

ペンギン先生

代表ページで静的部分と動く部分を書き分け、ブラウザに届くJSと通信を確認しよう。ログイン、フォーム、更新後のキャッシュも試すといいよ。運営会社の変化だけを性能改善の根拠にはしないことだね。

描画方式とクライアントJSは別の軸

静的生成ならJSがない、SSRならJSが多い、とは限りません。 HTMLをいつ作るかと、ブラウザでどの処理を動かすかを分けます。

1ページで比較してから選ぶ

記事本文と検索ボックスを持つ画面なら、本文はHTML、検索だけを操作部分として設計できます。AstroではUIコンポーネントに必要なclient指示を付け、Next.jsでは検索部分をClient Componentにする構成が候補です。

JSの転送量、初回表示、操作可能になるまでの時間、検索の応答を同じ条件で比較します。動的ページが必要な場合は、認証とDBの実行場所・キャッシュの更新・デプロイ先の対応も確認してください。

参考資料

確認日：2026年9月26日。製品の仕様・料金・対応環境は導入時にも確認してください。

• Next.js: Server and Client Components：既定Server Componentsとクライアント境界、JS削減。
• Astro Islands：静的HTMLと明示的なclient指示。
• Astro on-demand rendering：アダプターとルートごとのSSR。