Next.js アプリで AMP をサポートするメリットとトレードオフについて説明します。
AMP は、ページの読み込み時間を短縮するウェブ コンポーネント フレームワークです。Next.js には、AMP のサポートが組み込まれています。
学習内容
このガイドでは、まず AMP がページの読み込みを高速化する仕組みについて簡単に説明し、次に Next.js アプリで AMP をサポートするさまざまな方法について説明します。その後、最適なアプローチを決定するのに役立つ情報を提供します。
このガイドは、Next.js の使用を決定したものの、AMP をサポートするかどうかを迷っているウェブ デベロッパーを対象としています。
AMP でページ読み込みを高速化する方法
AMP には、速度を保証するための 2 つの主な戦略があります。
- AMP HTML: 特定の最適化を必須とし、速度低下につながるアーキテクチャ パターンを禁止する、制限付きの HTML 形式。最適化と制限の概要については、AMP の仕組みをご覧ください。
- AMP Cache: Google や Bing などの一部の検索エンジンで使用されるコンテンツ キャッシュ。事前レンダリングを使用してページ読み込みを高速化します。キャッシュのメリットとトレードオフについて詳しくは、AMP Cache が存在する理由をご覧ください。AMP ページがキャッシュに保存される仕組みについては、AMP ページがキャッシュに保存される仕組みをご覧ください。
Next.js で AMP を使用する方法
Next.js で AMP を使用するには、次の 2 つの方法があります。
- ハイブリッド AMP アプローチでは、Next.js ページの AMP バージョンを作成できます。
- AMP のみのアプローチでは、AMP をページの唯一のオプションにすることができます。
Next.js は通常、React フレームワークと考えられていますが、Next.js を使用して AMP ページを配信する場合、React コンポーネントは有効な AMP コンポーネントではないため、React コンポーネントをクライアントサイドで実行できなくなることを理解しておくことが重要です。つまり、Next.js は React フレームワークではなく、AMP ページを生成するためのサーバーサイド テンプレート エンジンです。
ハイブリッド AMP アプローチと AMP 専用アプローチのどちらを使用するかを決定する方法
読み込みパフォーマンスを重視する場合は、AMP 専用ページを使用すると、ページの読み込みを高速化し、高速な状態を維持できます。ただし、速度を確保するために、AMP では、ページの読み込み速度を低下させる原因となる特定のアーキテクチャ パターンや HTML 要素の使用が禁止されています。たとえば、AMP ではカスタムの同期 JavaScript は許可されていません。レンダリングを妨げるリソースは、ページの読み込みが遅くなる一般的な原因であるためです。
AMP のみのアプローチが適しているかどうかを判断するには、すべてのフロントエンド コードを AMP HTML で表現できるかどうかを把握する必要があります。
- AMP の仕組みを読んで、AMP のアーキテクチャ上の制限と必須の最適化について理解します。
- HTML タグを読んで、AMP で許可されている HTML タグと禁止されている HTML タグを確認します。AMP コンポーネント カタログを参照して、AMP コミュニティが一般的なユースケースを解決するために構築したカスタム コンポーネントを確認します。amp-script を参照して、カスタム JavaScript を使用して AMP で現在サポートされていない機能を実装する方法を確認します。
AMP のみの手法がページで機能しない場合でも、AMP HTML と AMP Cache の速度を考慮すると、可能な限り AMP を使用することをおすすめします。Next.js のハイブリッド AMP アプローチでは、条件付きで AMP ページを配信できます。ただし、各ページの 2 つのバージョンを維持する必要があるため、メンテナンス費用も高くなります。
まとめ
AMP では、速度を向上させるパターンを適用し、速度を低下させるパターンを禁止することで、サイトの高速化と高速性の維持を実現しています。AMP HTML と AMP Cache は、AMP が速度を確保するための 2 つの主な方法です。ただし、AMP を導入する前に、サイトのすべての要件をサポートできることを確認する必要があります。