見出し画像

古くなったら「継ぎ足す」だけ。最強のキャッシュ戦略「ISR」を老舗のうなぎ屋に例えてみた

関野泰宏

Webサイトを運営していると、こんなジレンマに陥りませんか？ 「爆速で表示したいから静的サイト（SSG）にしたい。でも、情報は常に新しくしたい……」

そんなワガママを叶えるのが、Next.jsの秘技 「ISR（Incremental Static Regeneration）」 です。 これ、実は 「老舗のうなぎ屋のタレ」 と全く同じ仕組みなんです。

💡 1. ISRは「秘伝のタレ」の継ぎ足し

  • 最初の1杯（SSG）: 開店前（ビルド時）に最高の一杯を用意しておきます。お客さんが来たら、それをご提供。爆速です。

  • 鮮度が落ちてきたら（Revalidate）: 「最後にタレを継ぎ足してから1時間経ったな」と思ったら、裏側でこっそり新しいタレを仕込み始めます。

  • 継ぎ足し完了（Background Update）: 次のお客さんには、新しくなった「最新のタレ」をご提供。これの繰り返しです。

「爆速（静的）」と「最新（動的）」のいいとこ取り。 これがISRの正体です。

💡 2. PM視点で見る「ISRの費用対効果」

プロジェクトマネージャー的な視点で見ると、ISRは「サーバー代の節約」と「UX向上」を同時に達成する、コスパ最強の戦略です。 毎回ゼロから料理を作る（SSR）のはコストがかかります。でも、ISRなら「基本は作り置き、時々更新」で済む。 この「適度な手抜き」こそが、長距離ランナーのように100日完走するためのコツなのです。

📚 「秘伝のレシピ」を体系的に学ぶ

「なんとなく動く」から「意図して動かす」へ。Next.jsの背後にあるアーキテクチャを深く理解すると、GitHubにPushするコードに重みが出てきます。

『Next.jsエンジニア養成読本』 


🐎 走り続けるエンジニアの「足腰」ケア

デスクワークで固まった体を、物理的にリカバリーしましょう。

『マッサージガン（ドクターエア リカバリーガン）』



📝 28日目の課題

  1. 自分のNext.jsプロジェクトで、export const revalidate = 60 を追加して、1分ごとに「タレが継ぎ足される」様子を確認しましょう。

  2. Obsidianに「ISRはうなぎのタレ」とだけデカデカとメモして、GitHubにPush！

  3. 母の日を祝いつつ、自分の「未来の資産」への投資として、新しいガジェットをチェックしましょう。

#Nextjs #React #100DaysOfCode #プログラミング初心者 #Web制作 #エンジニア #GitHub #Obsidian

いいなと思ったら応援しよう！