PR TIMESのトップページをNext.jsにリプレイスしました

2024年6月6日

柳龍哉

URLをコピーしました！

こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。

プレスリリース掲載ページ、キーワード検索ページに続き、PR TIMESのトップページを PHP + Smarty + jQuery から Next.js（Pages Router）にリプレイスしました。

本エントリーではトップページをリプレイスするにあたり、使用したライブラリや、キャッシュの設定などについてご紹介します。

SP用ページで使用するカルーセルライブラリの選定

トップページは、プレスリリース掲載ページやキーワード検索ページと同じようにPCとSPで返すHTMLを変えており、SP用ページでは以下のように横にスワイプすることでタブの切り替えを行うことができます。

このスワイプ操作を実装するために以下のカルーセルライブラリを試し、最終的に Embla Carousel を使用することにしました。

はじめはSwiperを使用して実装していましたが、タブをスワイプしていると、タブを新しいDOMとして複製する挙動があり、各タブで保持しているスクロール位置がリセットされてしまうことがありました。

そのため、次はNuka Carouselを使用して実装するように変更しました。前述したスクロール位置の問題は解決しましたが、スワイプの閾値が緩く、少しでも斜めにスワイプしてしまうと、隣のタブが見えてしまう問題が発生しました。

そこで次に、これら2つの問題を解決できるReact Slickを使用して実装しました。React Slickを使用することで2つの問題を解決することができたのですが、Lighthouseのアクセシビリティの項目でReact Slick起因の減点が見られました。

最終的にこれら全ての問題を解決できるライブラリである Embla Carousel にいきつきました。また、Embla Carousel は shadcn/ui や yamada-ui でも使用されており、一定の安心感があります（2024/06/04現在）。

BFCacheを有効化

キーワード検索ページと同様にトップページのBFCacheも有効になるようにしました。

これにより、SP用のトップページではブラウザバック時に元いたタブの場所に戻れたり、新着のタブの無限スクロールで取得したデータを保持することができるようになっています。

詳しい実装方法については以下の記事で紹介しています。

キャッシュの設定

トップページではプレスリリース掲載ページと同じくPages Routerを使用しているため、CDNでServer Side RenderingをしたHTMLでキャッシュする戦略をとっています。

キャッシュのために使用するヘッダーも同じく Surrogate-Control ヘッダーを使用しており、以下のように設定しています。

Surrogate-Control=max-age=5, stale-while-revalidate=10

TTLを短めにしている理由は、長い間キャッシュを返してしまうと、配信の多い時間帯などにトップページの新着プレスリリースに表示されないプレスリリースが出てきてしまうためです。

このように1つのコンテンツによって、HTML全体のキャッシュTTLを短めにしないといけない問題は、Next.jsのApp Routerで提供されている Partial Prerendering を使用することで回避できると思っています。しかし、PR TIMESではキャッシュは全てFastlyに寄せるという方針をとっているため、Partial Prerendering が stable になっても今のところ使う予定はありません。

また、TTLは短めですが、URLが単一（ https://prtimes.jp ）でリクエスト数もそれなりにあるため、キャッシュヒット率は90%前後を保つことができています。