Next.js アプリで AMP をサポートすることのメリットとトレードオフについて
AMP は、ページの読み込み速度を保証するウェブ コンポーネント フレームワークです。Next.js には、AMP の組み込みサポートが含まれています。
学習内容
このガイドではまず、AMP でページの読み込みが高速になる仕組みを簡単に説明してから、Next.js アプリで AMP をサポートするさまざまな方法について説明し、最適な方法を決定するために役立ちます。
このガイドは、Next.js の使用を決めたものの、AMP に対応するかどうかがわからないウェブ デベロッパーを対象としています。
AMP でページの読み込みが速くなる仕組み
AMP には、高速化を保証するための主に 2 つの戦略があります。
- AMP HTML: 特定の最適化を必須にし、速度低下につながるアーキテクチャ パターンを禁止する、制限された形式の HTML。最適化と制限の概要については、AMP の仕組みをご覧ください。
- AMP キャッシュ: 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 の仕組みをご覧ください。
- AMP で許可される HTML タグと禁止される HTML タグについては、HTML タグをご覧ください。また、一般的なユースケースを解決するために AMP コミュニティが作成したカスタム コンポーネントについては、AMP コンポーネント カタログをご覧ください。また、amp-script では、AMP で現在サポートされていない機能をカスタム JavaScript を使用して実装する方法を確認できます。
AMP のみのアプローチがページでうまくいかない場合でも、可能な限り AMP を使用することをおすすめします。AMP HTML と AMP Cache は高速であることが保証されているためです。Next.js のハイブリッド AMP アプローチは、AMP ページを条件付きで配信する手段を提供します。ただし、各ページの 2 つのバージョンを維持する必要があるため、メンテナンス費用も高くなります。
おわりに
AMP では、高速化につながるパターンを適用し、速度低下につながるパターンを禁止することで、サイトの速度と持続性を保証します。AMP HTML と AMP Cache は、主に AMP が高速性を保証する方法の 2 つです。ただし、AMP を導入する前に、AMP がサイトの要件をすべてサポートできるかどうかを確認してください。