fix(avbeat): noStore() on homepage so hero actually re-renders

dynamic='force-dynamic' + revalidate=0 on the page weren't enough because
FeaturedBentoFromDb -> pickAds() -> fetch in src/lib/ads.ts:98 sets
next:{revalidate:30}. Next.js takes the lowest positive revalidate from
the render tree and opts the whole route into 30-second ISR (visible in
.next/prerender-manifest.json: '/' initialRevalidateSeconds: 30), masking
the page-level force-dynamic directive.

unstable_noStore() called at the top of the HomePage component body
forces an unambiguous, child-tree-overriding opt-out so the Telycam
hero swap (and any future DB-driven hero change) renders on every
request. lib/ads.ts caching is left alone — its revalidate is fine for
ad rotation; we just stop it from poisoning the page-level cache.
This commit is contained in:
2026-06-03 13:29:54 +00:00
parent 1977e077f8
commit 0e9d3c570e

View File

@@ -1,5 +1,6 @@
import React, { Suspense } from "react"; import React, { Suspense } from "react";
import type { Metadata } from "next"; import type { Metadata } from "next";
import { unstable_noStore as noStore } from "next/cache";
import Header from "@/components/Header"; import Header from "@/components/Header";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
import FeaturedBentoFromDb from '@/components/FeaturedBentoFromDb'; import FeaturedBentoFromDb from '@/components/FeaturedBentoFromDb';
@@ -137,6 +138,14 @@ function FeedSkeleton() {
} }
export default function HomePage() { export default function HomePage() {
// Hard opt-out of all caching for this route. Without this, a child
// server component (FeaturedBentoFromDb -> pickAds -> fetch in lib/ads.ts
// with `next: { revalidate: 30 }`) pulls the whole page into 30-second
// ISR — Next.js takes the lowest positive revalidate it sees in the tree
// and ignores `dynamic = 'force-dynamic'` at the page level. noStore()
// is the unambiguous, child-tree-overriding opt-out and is what the
// hero swap needs to render fresh on every request.
noStore();
return ( return (
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
{/* Sticky top bar + nav */} {/* Sticky top bar + nav */}