Next.js から Astro への変換

エンジニアリング

React コミュニティに強く関わっている場合、静的でサーバーサイドのウェブアプリケーションを構築するために使用されるフレームワークがあることを知っているかもしれません。これは、JavaScript の React クライアントサイドアプリケーションをサーバーレベルのアプリケーションに変換して、ユーザーのために HTML/コンテンツを構築するなど、いくつかの利点があります。つまり、コードが出荷され、データまたは HTML 構造を構築するために、ユーザーがクライアントサイドコードを実行する必要はなくなります。

作成済みの HTML、CSS、JavaScript、その他のファイルから、ブラウザの要求に応えるウェブサーバーに移動します。 — コードがサーバーに転送され、ブラウザに必要なファイルが移動される例。 ( MDN の画像)

まずはフレームワークから

JavaScript ツールの見知らぬ世界を旅した後、Astro は静的サイトの生成 (SSG) を提供する意味で、 Next.js と非常に似ていることがわかりました。これは、パフォーマンスが向上し、他にも多くの利点があるためです。ただし、両者の主な違いは、Astro が使用する言語に関心を持たず、ビルドステップ中にサーバーで生成できるすべての HTML を構築するためのツールであることです。その結果、サーバー上で実行された HTML の未使用の JavaScript は削除されます。

Next.js も同様に可能ですか？

まあ、はいと言えば Yes ですが、その場合、ページで実行される余分な JavaScript とバンドルを含める必要があります。これらがサーバーからコンテンツを調達し、アニメーションやイベントなどのクライアントサイドに必要な JavaScript と相互作用可能にします。ページには、相互作用に関係なく機能を可能にする余分なコードが含まれており、ペイロードが大きくなります。対照的に、Astro では、特定のライブラリや言語に制約を受けることなく、ページを相互作用可能にするために必要な JavaScript とアプリを起動するためのコードが必要です。基本的な SPA ウェブサイトでは、Next.js は約 704ms かかり、Astro はわずか 107ms でロードされます。</0>

Next.js は 16 のリクエストを処理し、基本的なウェブサイトを 704 ms で読み込みます。一方、Astro は 7 つのリクエストを処理し、107ms で読み込みます。 — 左側に Next.js、右側に Astro の例示

Jeff Mendez の個人的なウェブサイトには、3 つのナビゲーションアイテム、ジェフ・メンデスが釣りをしている写真、紹介文があります。こんにちは、私の名前は Jeff Mendez です。私は A11yWatch のソフトウェアエンジニアであり、ウェブアクセシビリティ改善スイートの創設者でもあります。 A11yWatch をチェックして、ウェブインクルージョンを強化し、ウェブサイトアクセシビリティチェッカーを無料で使用してください。これが私の個人的なコードへの Github リンクです。</0> — テストされたウェブサイトの例

未来に向けて！

私たちは Astro にとても興奮しており、いくつかのコンテンツを Astro に移行することを楽しみにしています。開発者が生産性を保ち、小さなバンドルを出荷できる新しいツールに関する別のコンテンツを投稿するので、乞うご期待ください。シンプルなページを移動するために必要な作業量を把握するために、こちらの例示を移行しました。ドキュメントを最初に読むからアプリケーション全体を移行するまでに約 20 分かかりました。Next.js から Astro への移行に関するウェブサイトの TypeScript 設定の提供も取得できます。