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（ページビュー）カウント機能を追加した。表示場所は記事上部のタイトルの右下。リロードするとPVが更新されると思う。本当であればこういった機能はリリース時点で出さないといけない。

kkhys.me

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

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

Redisを使ったPVカウントに切り替える｜Keisuke Hayashi v1.7.0でPVカウント機能を実装した。 https://kkhys.me/blog/posts/b1v9jvx リリースしてから3ヶ月ほど経過したが、以下の問題が気になるようになってきた。

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
};

上記のコードでは、配列の先頭から6件を切り出して、slugをキーにして記事オブジェクトとマッピングしている。

UIは以下のようなシンプルなカード形式。

Data Cacheの特性上、滅多に見られることはないと思うが、スケルトンも実装している。

さいごに

人気記事を出力して初めて分かったこととして、意外とリリースノートは読まれている。メモ書き程度に結構端折って書いているので、あまり参考にならないかもしれないが、読んでくれている人がいる以上ちゃんと書かないとなあと思った次第である。

公式ドキュメントによるとuse cacheが安定版になったら置き換えられるらしい ↩