Next.js App Router Builds and Fixes

DATA FETCHING IN NEXT.JS 14+ SERVER COMPONENTS

PATTERN 1: STATIC DATA (default, fastest)
   // app/posts/page.tsx (Server Component)
   export default async function PostsPage() {
     const posts = await fetch("https://api.example.com/posts")
       .then(r => r.json());
     
     return (
       <div>
         {posts.map(post => <PostCard key={post.id} post={post} />)}
       </div>
     );
   }

   Behavior: Builds at deploy time, cached forever
   TTL: 3600s (1 hour default, overrideable)
   Best for: Blog posts, docs, marketing pages

PATTERN 2: DYNAMIC DATA (real-time)
   export const revalidate = 0;
   
   export default async function DashboardPage() {
     const data = await fetch("https://api.example.com/dashboard", {
       cache: "no-store"
     }).then(r => r.json());
     
     return <Dashboard data={data} />;
   }

   Best for: Dashboards, user-specific data, live feeds

PATTERN 3: ISR (Incremental Static Regeneration)
   export const revalidate = 60;
   
   Behavior: Serves cached page, regenerates in background every 60s
   Best for: Product listings, top news (semi-fresh data)

PATTERN 4: ERROR BOUNDARY + LOADING STATE
   // app/posts/loading.tsx (auto-shown while fetching)
   export default function Loading() {
     return <SkeletonList count={5} />;
   }
   
   // app/posts/error.tsx (auto-shown on fetch failure)
   "use client";
   export default function Error({ error }) {
     return <div>Error loading posts: {error.message}</div>;
   }

METADATA FOR SEO
   export const metadata = {
     title: "Posts",
     description: "Our latest posts",
     openGraph: { image: "og-image-url" }
   };

DEPLOYMENT TO VERCEL
   1. Connect GitHub repo
   2. Vercel auto-detects Next.js
   3. Sets environment variables
   4. Deploys on every push to main

COMMON MISTAKE: Fetching in useEffect on client components
   // Wrong (defeats Server Component caching)
   "use client";
   useEffect(() => fetch("/api/posts"), []);
   
   // Right (fetch in server component)
   export default async function Posts() {
     const posts = await fetch(...);
   }

TIMING: ISR (60s) fast path average 20ms, dynamic (0s) path 400-800ms.