Nextjs Data Fetching

# Caching and Revalidation Strategies

## Time-based Revalidation (ISR)

Use time-based revalidation when stale data is acceptable for a bounded period.

```tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: {
      revalidate: 60,
    },
  });
  return res.json();
}
```

Choose the revalidation interval based on how often the data changes.

## On-Demand Revalidation

Use Route Handlers or Server Actions with `revalidateTag()` or `revalidatePath()` when data should refresh immediately after a write.

```tsx
// app/api/revalidate/route.ts
import { revalidateTag } from 'next/cache';
import { NextRequest } from 'next/server';

export async function POST(request: NextRequest) {
  const tag = request.nextUrl.searchParams.get('tag');

  if (tag) {
    revalidateTag(tag);
    return Response.json({ revalidated: true });
  }

  return Response.json({ revalidated: false }, { status: 400 });
}
```

Keep invalidation tags stable and descriptive so read and write paths stay coordinated.

## Tag Cached Data for Selective Invalidation

Attach cache tags when the same data source is read in multiple places.

```tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: {
      tags: ['posts'],
      revalidate: 3600,
    },
  });
  return res.json();
}
```

Use a small set of predictable tags instead of dynamically generating unnecessary tag variants.

## Opt Out of Caching

Disable caching for highly dynamic or user-specific data.

```tsx
async function getRealTimeData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'no-store',
  });
  return res.json();
}

export const dynamic = 'force-dynamic';
```

Use `no-store` intentionally because it trades performance for freshness.

## Cache Selection Checklist

- Use ISR when the page can tolerate bounded staleness.
- Use tags when a mutation needs to refresh multiple consumers.
- Use `no-store` for real-time, user-specific, or security-sensitive responses.
- Avoid sharing cache entries across different user contexts.

## Example: Blog Page with ISR

**Input:** Create a blog page that fetches posts and updates every hour.

```tsx
// app/blog/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 },
  });
  return res.json();
}

export default async function BlogPage() {
  const posts = await getPosts();
  return (
    <main>
      <h1>Blog Posts</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </main>
  );
}
```

**Output:** The page is cached and revalidated every hour.


# Client-Side Data Fetching

Use client-side libraries when the component needs browser-driven refresh, optimistic interactions, or local cache coordination.

## SWR Integration

Choose SWR for lightweight refresh and revalidation behavior.

Install with `npm install swr`.

```tsx
'use client';

import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then((r) => r.json());

export function Posts() {
  const { data, error, isLoading } = useSWR('/api/posts', fetcher, {
    refreshInterval: 5000,
    revalidateOnFocus: true,
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Failed to load posts</div>;

  return (
    <ul>
      {data.map((post: any) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
```

Use SWR when the data model is simple and the main need is background refresh.

## React Query Integration

Choose React Query when you need structured query keys, richer cache invalidation, or advanced mutation flows.

Install with `npm install @tanstack/react-query`.

```tsx
// app/providers.tsx
'use client';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useState } from 'react';

export function Providers({ children }: {