v2.4.0 リリースノート: 人気記事一覧を作成

この記事は Next.js 版の内容です。現在は Astro で構築し直したため、情報が古い可能性があります。当時のリポジトリはこちらにあるので参考にしてください。

記事数が増えてきたため、トップページに人気記事一覧を追加した。実装自体はシンプルだが、いくつかポイントがあるので整理しておく。

最近はホームページに充てられる自由時間が限られていることもあり、タスクを 2 ~ 3 時間で完了できる単位に細分化し、気が向いたときに進めるようにしている。そのおかげもあって、良い感覚で継続的にリリースできている。

Release v2.4.0 · kkhys/me.v2 2.4.0 (2025-02-09) Features post: add popular posts component and integrate into homepage (6c7bce0)

github.com

PV の集計方法をざっくり振り返る

PV 機能を最初に実装したのは v1.7.0。

そのときは RDBMS を使って PV を管理していた。詳しくはこの記事に書いてある。

v1.7.0 リリースノート: PV カウント｜Keisuke Hayashi ブログに PV カウント機能を追加した。データベースに Neon、ORM に Drizzle、API に tRPC を使用。PlanetScale や Supabase との比較検討から最終的な技術選択まで実装過程を詳しく解説している。

kkhys.me

v1.7.0 リリースノート: PV カウント｜Keisuke Hayashiのカバー画像

しかし、運用していく中でいくつか気になる点があったため、より適した方法として Redis を導入。

Redis を使った PV カウントに切り替える｜Keisuke Hayashi PV カウント機能の初期表示遅延と重複計測問題を解決するため、Upstash の Redis を導入した。レイテンシ改善とデバウンス機能により正確な PV 計測を実現する実装方法を解説している。

kkhys.me

Redis を使った PV カウントに切り替える｜Keisuke Hayashiのカバー画像

現在は Redis ベースで PV を管理している。

Redis の実装では以下がポイント。

pageviews:${NODE_ENV}:${slug} の形式でキーを保存している
インクリメント時は IP アドレスをハッシュ化して保存し、n 秒間重複して計測されないようにチェックしている
n 秒経過すると、そのキーバリューは消滅する

キーに環境変数を含めることで、ローカル環境やプレビュー環境、本番環境の PV がごっちゃにならないというメリットがある。

PV の多い順に取得する方法

人気記事を取得する方法はシンプル。

キーに紐づくデータを全て取得（mget）する
sort で昇順に並び替える

これだけ。

1
const getAllPageViewsSorted = async () => {
2
  const prefix = `pageviews:${env.NODE_ENV}:`;
3
  const keys = postMetadataForEdge.map(({ slug }) => `${prefix}${slug}`);
4

5
  if (keys.length === 0) {
6
    return [];
7
  }
8

9
  const values = await redis.mget<number[]>(...keys);
10

11
  const pageViews = keys.map((key, index) => ({
12
    slug: key.replace(prefix, ""),
13
    views: values[index] ?? 0,
14
  }));
15

16
  pageViews.sort((a, b) => b.views - a.views);
17

18
  return pageViews;
19
};

当初は scan コマンドを使って、特定のプレフィックスを持つキーを全取得する方法を検討していた。しかし、記事のスラッグはあらかじめ分かっているため、キーのリストを作成し、それを mget に渡す方式に変更。

PV は頻繁に更新されるため、今回のシステム構成では採用しなかったが、Redis の Sorted Set を使うことで、ランキング機能をシンプルに実装することも可能。

Redis sorted sets Introduction to Redis sorted sets

redis.io

毎回 API が走らないようにする

PV は日々更新されるとはいえ、記事のランキングが頻繁に変動するほど活発なサイトではない。そのため、毎回 API リクエストを発生させず、キャッシュを活用することにした。

1
import { unstable_cache } from "next/cache";
2

3
export const getCachedAllPageViewsSorted = unstable_cache(
4
  async () => getAllPageViewsSorted(),
5
  undefined,
6
  {
7
    revalidate: 60 * 60,
8
  },
9
);

キャッシュには Next.js の unstable_cache を使用した。 unstable（不安定）とあるように、この関数は将来的に変更が予定されている¹。

unstable_cache を使う際の注意点として、Next.js の 4 つのキャッシュのうち、Data Cache にあたるという点である。つまり、サーバサイドに保存され、ユーザのリクエストやデプロイメント全体でデータが共有される。

キャッシュされたデータは、リクエストしたユーザだけでなく他のユーザにも共有される。今回みたいに PV のような公共性の高いデータなら問題ないが、個人情報などをキャッシュしないよう注意が必要。

話は少し逸れたが、これで 1 時間ごとのキャッシュが適用され、API の無駄な呼び出しを抑えることができる。

記事一覧を表示

PV が多い順に並んだ配列を取得できたら、あとは表示させるだけ。

1
const popularPostCount = 6;
2

3
export const PopularPosts = async ({ className }: { className?: string }) => {
4
  const allPageViewsSorted = await getCachedAllPageViewsSorted();
5
  const popularPosts = allPageViewsSorted
6
    .slice(0, popularPostCount)
7
    .map(({ slug }) => getPostBySlug(slug) as Post);
8

9
  return (
10
    <div
11
      className={cn(
12
        "grid grid-cols-2 gap-3 sm:grid-cols-3 xl:gap-4",
13
        className,
14
      )}
15
    >
16
      {popularPosts.map((post, index) => (
17
        <div key={post._id} className="relative">
18
          <ArticleCard post={post} />
19
          <RankNumber rank={index + 1} />
20
        </div>
21
      ))}
22
    </div>
23
  );
24
};