xyz-log v3.0 リリースノート

2023年最後のアップデートとして、v3.0をリリースしました。

今回はパフォーマンスの大幅改善と読者エンゲージメント機能の追加がメインです。

アップデートの背景

Next.jsは素晴らしいフレームワークですが、ブログというユースケースにはオーバースペックな面がありました。

• 記事ページに不要なJavaScriptが多い
• Hydrationのオーバーヘッド
• シンプルなブログにはApp Routerが複雑すぎる

そこで、コンテンツ中心のサイトに最適化されたAstroへの移行を決めました。

v3.0 の新機能

Astro への移行

Astroの「アイランドアーキテクチャ」により、必要な箇所だけにJavaScriptを配置できるようになりました。

パフォーマンス改善

• Lighthouse Performance: 72 → 98
• First Contentful Paint: 1.8s → 0.6s
• Total Blocking Time: 320ms → 10ms

記事ページはほぼ静的HTMLとして配信されるため、表示が劇的に高速化しました。

いいね機能

記事への「いいね」ができるようになりました。

• Upstash Redisでいいね数を永続化
• 連打防止（1記事につき1いいね）
• リアルタイムでカウント更新

読者の反応が見えるようになり、執筆のモチベーションにつながります。

ブックマーク機能

気になる記事を保存して、後から読み返せるようにしました。

• ローカルストレージに保存（ログイン不要）
• ブックマーク一覧ページ
• 保存日時の表示

関連記事レコメンド

記事を読み終えた後に、関連性の高い記事を表示するようにしました。

• タグの一致度でスコアリング
• 最大4件を表示
• 回遊率の向上を期待

シェアボタン

SNSへのシェアを簡単にできるようにしました。

• X（Twitter）
• Facebook
• LINE
• URLコピー

技術スタック

• フレームワーク: Astro 3
• UIコンポーネント: React（必要な箇所のみ）
• スタイリング: Tailwind CSS
• ホスティング: Cloudflare Pages（Vercelから移行）
• データストア: Upstash Redis

移行の振り返り

AstroはReactコンポーネントをそのまま使えるため、移行コストは想定より低かったです。ただし、クライアントサイドの状態管理が必要な箇所（いいねボタンなど）は client:load ディレクティブの理解が必要でした。

次のステップ

• ダークモード対応（v4.0で予定）
• 読書進捗バー
• 閲覧履歴

2024年も xyz-log をよろしくお願いします。