fix: ISR cold-start image bug, optimize data fetching and caching

Author: itsatulbox

.github/workflows/fly-deploy.yml

@@ -13,6 +13,19 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: superfly/flyctl-actions/setup-flyctl@master
-      - run: flyctl deploy --remote-only
+      - run: >
+          flyctl deploy --remote-only
+          --build-arg PAYLOAD_SECRET="${PAYLOAD_SECRET}"
+          --build-arg DATABASE_URI="${DATABASE_URI}"
+          --build-arg AWS_BUCKET="${AWS_BUCKET}"
+          --build-arg AWS_REGION="${AWS_REGION}"
+          --build-arg AWS_ACCESS_KEY_ID="${AWS_ACCESS_KEY_ID}"
+          --build-arg AWS_SECRET_ACCESS_KEY="${AWS_SECRET_ACCESS_KEY}"
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+          PAYLOAD_SECRET: ${{ secrets.PAYLOAD_SECRET }}
+          DATABASE_URI: ${{ secrets.DATABASE_URI }}
+          AWS_BUCKET: ${{ secrets.AWS_BUCKET }}
+          AWS_REGION: ${{ secrets.AWS_REGION }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

Dockerfile.prod

@@ -31,7 +31,23 @@ RUN pnpm install --frozen-lockfile --prod=false
 # Copy application code
 COPY . .
 
-# Build application
+# Build-time args so Next.js can pre-render pages with real Payload data
+# and configure remotePatterns for S3 image optimization
+ARG PAYLOAD_SECRET
+ARG DATABASE_URI
+ARG AWS_BUCKET
+ARG AWS_REGION
+ARG AWS_ACCESS_KEY_ID
+ARG AWS_SECRET_ACCESS_KEY
+
+ENV PAYLOAD_SECRET=$PAYLOAD_SECRET
+ENV DATABASE_URI=$DATABASE_URI
+ENV AWS_BUCKET=$AWS_BUCKET
+ENV AWS_REGION=$AWS_REGION
+ENV AWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY_ID
+ENV AWS_SECRET_ACCESS_KEY=$AWS_SECRET_ACCESS_KEY
+
+# Build application (pages pre-render with real data from Payload)
 RUN pnpm run build
 
 # Remove development dependencies

fly.toml

@@ -18,7 +18,19 @@ swap_size_mb = 512
   min_machines_running = 0
   processes = ['app']
 
+  [http_service.concurrency]
+    type = "connections"
+    hard_limit = 25
+    soft_limit = 20
+
+  [[http_service.checks]]
+    grace_period = "15s"
+    interval = "30s"
+    method = "GET"
+    timeout = "5s"
+    path = "/"
+
 [[vm]]
-  memory = '512mb'
+  memory = '1024mb'
   cpu_kind = 'shared'
   cpus = 1

next.config.mjs

@@ -4,7 +4,19 @@ import { withPayload } from '@payloadcms/next/withPayload'
 const AWS_BUCKET = process.env.AWS_BUCKET || ''
 const AWS_REGION = process.env.AWS_REGION || 'ap-southeast-2'
 
-const remotePatterns = []
+const remotePatterns = [
+  // Wildcard fallback for any S3 bucket (safety net)
+  {
+    protocol: 'https',
+    hostname: '*.s3.*.amazonaws.com',
+    pathname: '/media/**',
+  },
+  {
+    protocol: 'https',
+    hostname: '*.s3.amazonaws.com',
+    pathname: '/media/**',
+  },
+]
 
 if (AWS_BUCKET) {
   remotePatterns.push(
@@ -28,7 +40,8 @@ const nextConfig = {
     formats: ['image/avif', 'image/webp'],
     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-    minimumCacheTTL: 60,
+    // Cache optimized images for 1 week — S3 content is immutable (new uploads get new filenames)
+    minimumCacheTTL: 604800,
   },
   eslint: {
     // Warning: This allows production builds to successfully complete even if

src/app/(frontend)/[...notFound]/page.tsx

@@ -1,13 +1,14 @@
 import Footer from '@/components/common/Footer'
 import Header from '@/components/common/Header'
 import '../global.css'
-import feather from '@/assets/big_feather.png'
-import kiwi from '@/assets/kiwiBird.svg'
-import blueKoru from '@/assets/blue_koru.png'
-import koruAndLeaf from '@/assets/koruAndLeaf.png'
-import blueWave from '@/assets/blue_wave.png'
+import feather from '@/assets/big-feather.png'
+import kiwi from '@/assets/kiwi-bird.svg'
+import blueKoru from '@/assets/blue-koru.png'
+import koruAndLeaf from '@/assets/koru-and-leaf.png'
+import blueWave from '@/assets/blue-wave.png'
 import leaf from '@/assets/leaf.svg'
 import Image from 'next/image'
+import Link from 'next/link'
 
 const bgImages = [
   {
@@ -60,8 +61,8 @@ export default async function NotFound() {
 
         {/* Links out of page - currently links back to 404 not found*/}
         <div className="underline font-semibold text-sm mt-5 flex flex-col gap-4 justify-center mt-20 uppercase tracking-wider">
-          <a href="/">Return to Home</a>
-          <a href="/NotFound">Explore our Stories and Events</a>
+          <Link href="/">Return to Home</Link>
+          <Link href="/events">Explore our Stories and Events</Link>
         </div>
 
         {/* All the extras in the background */}

src/app/(frontend)/about/page.tsx

@@ -1,18 +1,17 @@
 import { Suspense } from 'react'
 import Header from '@/components/common/Header'
 import Footer from '@/components/common/Footer'
-import MeetTheTeam from '@/components/AboutUs/MeetTheTeam'
+import MeetTheTeam from '@/components/about/MeetTheTeam'
 import Hero from '@/components/about/Hero'
 import Descriptions from '@/components/about/Descriptions'
 import MeetTheWDCCTeam from '@/components/about/MeetTheWDCCTeam'
 import QuotesSection from '@/components/about/QuotesSection'
-import { getAboutPageImages } from '@/lib/payload/images'
+import { getAllAboutPageImages } from '@/lib/payload/images'
+import { getMembers } from '@/lib/payload/members'
 
-// Use dynamic rendering to avoid build-time fetch errors, but cache for 5 minutes in production
-export const dynamic = 'force-dynamic'
-export const revalidate = 300
+// ISR: Revalidate every 30 minutes — content changes infrequently
+export const revalidate = 1800
 
-// ✅ Loading fallback
 function SectionSkeleton() {
   return (
     <div className="py-12 px-4">
@@ -21,44 +20,42 @@ function SectionSkeleton() {
   )
 }
 
-// ✅ Independent async components
-async function HeroContent() {
-  const heroImage = await getAboutPageImages('hero')
-  return <Hero heroImage={heroImage} />
-}
+async function AboutContent() {
+  // Fetch images in one query + members in parallel (2 DB queries instead of 5)
+  const [allImages, members] = await Promise.all([getAllAboutPageImages(), getMembers()])
+
+  // Filter by placement in memory — instant, no extra DB round-trips
+  const heroImage = allImages.filter((img) => img.placement === 'hero')
+  const descriptionImage1 = allImages.filter((img) => img.placement === 'description-1')
+  const descriptionImage2 = allImages.filter((img) => img.placement === 'description-2')
+  const quoteImage = allImages.filter((img) => img.placement === 'quote')
 
-async function DescriptionsContent() {
-  const [descriptionImage1, descriptionImage2] = await Promise.all([
-    getAboutPageImages('description-1'),
-    getAboutPageImages('description-2'),
-  ])
   return (
-    <Descriptions descriptionImage1={descriptionImage1} descriptionImage2={descriptionImage2} />
+    <>
+      <Hero heroImage={heroImage} />
+      <Descriptions descriptionImage1={descriptionImage1} descriptionImage2={descriptionImage2} />
+      <MeetTheTeam members={members} />
+      <QuotesSection quoteImage={quoteImage} />
+    </>
   )
 }
 
-async function QuotesContent() {
-  const quoteImage = await getAboutPageImages('quote')
-  return <QuotesSection quoteImage={quoteImage} />
-}
-
 export default function AboutPage() {
   return (
     <div className="home">
       <Header />
 
-      <Suspense fallback={<SectionSkeleton />}>
-        <HeroContent />
-      </Suspense>
-
-      <Suspense fallback={<SectionSkeleton />}>
-        <DescriptionsContent />
-      </Suspense>
-
-      <MeetTheTeam />
-
-      <Suspense fallback={<SectionSkeleton />}>
-        <QuotesContent />
+      <Suspense
+        fallback={
+          <>
+            <SectionSkeleton />
+            <SectionSkeleton />
+            <SectionSkeleton />
+            <SectionSkeleton />
+          </>
+        }
+      >
+        <AboutContent />
       </Suspense>
 
       <MeetTheWDCCTeam />

src/app/(frontend)/api/revalidate/route.ts

@@ -0,0 +1,39 @@
+import { revalidatePath } from 'next/cache'
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function POST(request: NextRequest) {
+  const secret = request.headers.get('x-revalidate-secret')
+
+  if (secret !== process.env.REVALIDATE_SECRET) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const body = await request.json()
+  const { collection, slug } = body
+
+  switch (collection) {
+    case 'blogs':
+      revalidatePath('/blogs', 'page')
+      if (slug) {
+        revalidatePath(`/blogs/${slug}`, 'page')
+      }
+      break
+    case 'events':
+      revalidatePath('/events', 'page')
+      revalidatePath('/', 'page')
+      break
+    case 'home-page-images':
+      revalidatePath('/', 'page')
+      break
+    case 'about-page-images':
+      revalidatePath('/about', 'page')
+      break
+    case 'members':
+      revalidatePath('/about', 'page')
+      break
+    default:
+      revalidatePath('/', 'layout')
+  }
+
+  return NextResponse.json({ revalidated: true })
+}

src/app/(frontend)/blogs/[slug]/page.tsx

@@ -4,10 +4,20 @@ import Footer from '@/components/common/Footer'
 import { notFound } from 'next/navigation'
 import { getBlogBySlug } from '@/lib/payload/blogs'
 import { BLOG_TEMPLATES } from '@/lib/blog-templates'
+import { getBlogs } from '@/lib/payload/blogs'
 
-// Use dynamic rendering to avoid build-time fetch errors, but cache for 10 minutes in production
-export const dynamic = 'force-dynamic'
-export const revalidate = 600
+// ISR: Revalidate every 1 hour — individual blog posts rarely change
+export const revalidate = 3600
+
+// Generate static pages for all published blogs at build time
+export async function generateStaticParams() {
+  try {
+    const { docs } = await getBlogs({ limit: 100 })
+    return docs.map((blog) => ({ slug: blog.slug }))
+  } catch {
+    return []
+  }
+}
 
 export default async function BlogPage({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params

src/app/(frontend)/blogs/page.tsx

@@ -1,14 +1,11 @@
 import React from 'react'
 import Header from '@/components/common/Header'
 import Footer from '@/components/common/Footer'
-import BlogCard from '@/components/blogs/BlogCard'
 import Search from '@/components/blogs/Search'
 import { getBlogs } from '@/lib/payload/blogs'
-import type { BlogType } from '@/types/blog'
 
-// Use dynamic rendering to avoid build-time fetch errors, but cache for 5 minutes in production
-export const dynamic = 'force-dynamic'
-export const revalidate = 300
+// ISR: Revalidate every 30 minutes — content changes infrequently
+export const revalidate = 1800
 
 export default async function BlogsPage() {
   const { docs: blogs } = await getBlogs({ page: 1, limit: 10 })