この記事は Sebastian Benz による The AMP Blog の記事 "Faster AMP on the origin: AMP + SSR = ⚡ " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。 FCP 指標 がなんと最大 50% も改善されました。しばらくの間、Google AMP Cache がこのテクニックを利用していましたが、今は独自のドメインでも SSR を利用できるようになっています。メインサイトで AMP を使っている場合、この最適化を追加することが特に重要です。AMP ページと非 AMP ページの両方を持つ「ペアード AMP セットアップ」と呼ばれる方法を使っている場合でも、このテクニックを利用すれば、AMP Cache を使えないユーザー（Twitter アプリを使っている場合など）に最適なパフォーマンスを提供できます。SSR は、React や Vue.js など、クライアントサイドでページをレンダリングするフレームワークの first-contentful-paint 時間（FCP）を改善するテクニックです。クライアントサイド レンダリングの欠点は、ページのレンダリングに必要な Javascript をすべて最初にダウンロードしなければならないことです。これにより、ユーザーがページ上の実際のコンテンツを目にするまでの時間が長くなります。この点を改善するため、React と Vue.js はどちらも、ナビゲーション リクエストに応じてサーバー上で DOM を事前レンダリングできるようになっています。その後、クライアントサイドの Javascript がレンダリングを継続します。このプロセスは、（再）ハイドレーションと呼ばれます。その結果、ユーザーははるかに早くコンテンツを見られるようになります。AMP ボイラープレート コード を取り除いてページ レイアウトをレンダリングすることによって動作します。AMP ボイラープレート コードが存在しているのは、ページの読み込み時にコンテンツの位置が突然変化しないようにするためです。AMP フレームワークがダウンロードされてページのレイアウトが確定するまでの間、ページのコンテンツは隠蔽されます。その結果、AMP ページでは他のクライアントサイド フレームワークと同じ問題が発生することになります。つまり、Javascript がダウンロードされるまでレンダリングがブロックされます。AMP SSR は、ボイラープレート コードを取り除くことで FCP 時間を 50% 短縮しています 。SSR を適用したバージョンと適用しないバージョンとの AMP ファイルの差分を次に示します（詳しい説明は、公式ガイド をご覧ください）。<html amp transformed="self;v=1">
補足: AMP キャッシュは固有のフラグを設定します。たとえば、Google AMP Cache は次のフラグを追加します。<html amp transformed="google;v=1">
この属性が設定されていると、検証ツールは SSR を適用した AMP を有効な AMP として扱います。SSR による AMP の最適化を行うと、AMP 仕様のルールが満たされなくなり、ドキュメントは無効になります。そのため、この状況を表す新しいフラグが必要になります。このフラグが存在し、最適化が行われている場合、ドキュメントは有効と見なされ、以降の処理が行えるようになります。AMP チャンネルの説明動画 か AMP SSR ガイド をご覧ください。
AMP に SSR を適用する方法
SSR を適用した AMP を手で記述するのは無意味です。そうではなく、コンパイラのように、SSR を適用したバージョンに AMP ファイルを自動変換するツールを使います。この変換は、ユーザーがドキュメントをリクエストする前にあらかじめ行っておくのが理想的です。しかし、この処理はオンデマンドで実行することもできます（変換が何度も実行されることがないように、結果は確実にキャッシュするようにします）。
AMP Optimizer : 最適化された AMP を生成する NodeJs ライブラリです。サイトで Express を使っている場合、express ミドルウェア も確認してみてください。 AMP Packager : Go のコマンドライン ツールです。Signed Exchange と合わせて利用できます。
補足: これらのツールは SSR を実行するだけでなく、AMP フレームワークのプリロードや head の並び替えなどの他の最適化 も行います。
Next.js サポート
うれしいことに、最新の Next.js 9 リリース は AMP SSR をサポートしています。デフォルトで Next.js 9 は AMP ファーストなページとハイブリッド AMP ページで最適化された AMP をレンダリングします。Next.js は AMP ページの構築に適した選択肢です。
次のステップ
私たちの今後の計画には、2 つの大きなテーマがあります。
time-to-interactive が高速に: AMP フレームワークをダウンロードするために、cdn.ampproject.org に対してもう 1 つの HTTPS 接続を確立する必要がなくなります。QA が簡単に: 新しい AMP リリースへの切り替えタイミングを自由に制御できるようになります。
ただし、次の点に留意することが重要です。AMP キャッシュがキャッシュされた AMP ページを提供する際は、プライバシー上の理由 により、AMP スクリプトの URL をキャッシュのオリジンと一致するように書き換えます。
AMP SSR は誰でも使えます
AMP ページを公開している方は、サーバーサイドでレンダリングした AMP ページを公開するようにしてください。AMP Optimizer や Go 変換ツール の実行は、HTML や CSS の縮小と同じように日常的なビルド / レンダリング チェーンの一部にするとよいでしょう。レンダリング パフォーマンスの向上により、FCP 時間は大きく改善されます。しかし、さらに重要なのは、ユーザー エクスペリエンスが改善されることです。投稿者: Google デベロッパー アドボケート、Sebastian Benz