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 キャッシュが存在する理由をご覧ください。また、AMP ページがキャッシュに入る仕組みについては、AMP ページがキャッシュに保存される仕組みをご覧ください。
Next.js で AMP を使用する方法
Next.js で AMP を使用するには、次の 2 つの方法があります。
- ハイブリッド AMP アプローチでは、任意の Next.js ページに付属する AMP バージョンを作成できます。
- AMP のみのアプローチでは、AMP をページの唯一の選択肢にすることができます。
Next.js は通常は React フレームワークと考えられていますが、Next.js を使用して AMP ページを配信する場合、React コンポーネントは有効な AMP コンポーネントではないため、クライアントサイドでは実行できなくなりました。つまり、Next.js はもはや React フレームワークではなく、AMP ページを生成するためのサーバーサイド テンプレート エンジンになっています。
ハイブリッド AMP と AMP のみのどちらのアプローチを使用するかを決定する方法
読み込みのパフォーマンスを重視している場合は、AMP のみのページを使用すると、ページの読み込みが速くなり、常に高速で動作します。ただし、AMP では、読み込み速度を保証するために、ページの表示速度を低下させがちな特定のアーキテクチャ パターンや HTML 要素を禁止しています。たとえば AMP では、カスタムの同期 JavaScript は使用できません。これは、レンダリング ブロック リソースがページの読み込み速度が低下する一般的な原因であるためです。
AMP のみのアプローチが適しているかどうかを見極めるには、すべてのフロントエンド コードを AMP HTML で表現できるかどうかを確認する必要があります。
- AMP のアーキテクチャ上の制限と必須の最適化については、AMP の仕組みをご覧ください。
- AMP で許可されている HTML タグと禁止される HTML タグについては、HTML タグをご覧ください。また、一般的なユースケースを解決するために AMP コミュニティが作成したカスタム コンポーネントについては、AMP コンポーネントのカタログをご覧ください。また、カスタム JavaScript を使用して AMP で現在サポートされていない機能を実装する方法については、amp-script をご覧ください。
AMP のみのアプローチが自分のページでうまくいかないとしても、AMP HTML と AMP キャッシュの高速性が保証されているため、可能な限り AMP を使用することをおすすめします。Next.js のハイブリッド AMP アプローチでは、条件付きで AMP ページを提供できます。ただし、各ページの 2 つのバージョンを維持する必要があるため、メンテナンス費用も高くなります。
まとめ
AMP は、高速化につながるパターンを適用し、速度低下につながるパターンを排除することで、サイトの読み込みを高速化し、常に高速で動作するようにします。AMP で高速性が保証される主な方法は、AMP HTML と AMP Cache の 2 つです。ただし、AMP を導入する前に、サイトの要件をすべてサポートできることを確認する必要があります。