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 コンポーネントではないため、React コンポーネントをクライアントサイドで実行できなくなります。つまり、Next.js は React フレームワークではなく、AMP ページを生成するサーバーサイド テンプレート エンジンになりました。
ハイブリッド 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 キャッシュの高速性が保証されているため、可能な限り AMP を使用することをおすすめします。Next.js のハイブリッド AMP アプローチでは、AMP ページを条件付きで配信する方法が提供されています。ただし、各ページの 2 つのバージョンを維持する必要があるため、メンテナンス コストも高くなります。
まとめ
AMP は、高速化につながるパターンを適用し、低速化につながるパターンを禁止することで、サイトの高速化と高速化の維持を保証します。AMP の高速性が保証される主な方法は、AMP HTML と AMP Cache の 2 つです。ただし、AMP を導入する前に、AMP がサイトのすべての要件をサポートできることを確認する必要があります。