記事詳細だけを事前生成する：CSRとSSGの中間案

クライアントサイドレンダリング（CSR）は、ページ遷移が速く、構成も単純だ。ただし最初にHTMLを受け取った時点では本文が空で、JavaScriptの実行後に記事が表示される。

本誌の研究「中価格帯Android端末における記事ページの表示性能」では、CSRのみの構成と比べて、事前生成したHTMLでは最大コンテンツの表示時間が大きく短くなった。

何を事前生成するか

本誌では、検索から直接訪問されることが多い「記事詳細」「特集詳細」「研究詳細」だけをHTMLとして書き出している。一覧ページや検索結果は、表示のたびにAPIから取得する。

書き出す内容

タイトル、説明文、canonical、OGPなどのメタ情報

ArticleとBreadcrumbListの構造化データ

本文のHTML

最初の描画に使うJSONデータ

JavaScriptが読み込まれたあとは、埋め込んだJSONを使って同じ画面を描画するので、同じ記事を二重に取得しない。

更新時の再生成

WordPress側のプラグインで、記事の公開・更新時にビルド用のWebhookを呼び出す。Webhookを設定しない場合でも、表示側はAPIから最新の記事を取得して描画するので、内容が古いまま表示され続けることはない。

この構成の限界

一覧ページは事前生成していないため、JavaScriptを無効にした環境では記事一覧が表示されない。サイトマップに全記事のURLを載せることで、検索エンジンが記事を見つけられるようにしている。