Data Fetching & Caching

Fetching on the Server

Server Components can be declared async, letting you await data directly in the component body without a separate hook or client-side request.

export default async function Posts() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.map((p: { id: string; title: string }) => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  );
}

Fetch Cache

cachedFetch() supports force-cache, no-store, and isr modes with tag-based revalidation. LRU eviction when cache exceeds max entries (10,000 default). Periodic cleanup of expired entries is built in.

Cache Invalidation

Use revalidateTag() and revalidatePath() to invalidate cached data. PledgeJS supports persistent cache, remote cache, and a cache-invalidation worker.

import { revalidateTag, revalidatePath } from 'pledgestack';

// Invalidate all fetches tagged 'posts'
revalidateTag('posts');

// Invalidate a specific path
revalidatePath('/blog');

Query Memoization

Identical data fetches within the same request are automatically deduplicated, so you don't need to worry about multiple components fetching the same data.

SSRF Protection

Server-side fetch validates URLs against private/internal address ranges before fetching, preventing server-side request forgery attacks.

Server Actions

Use serverAction() and getServerAction() to call server-side code directly from forms or event handlers. CSRF token validation is enforced on all POST/PUT/DELETE/PATCH requests; Server Actions are exempt. The useActionState hook is available for React.

Server Utilities

PledgeJS provides the standard set of server utilities for reading request data and controlling flow.

• cookies() — read and set cookies
• headers() — read request headers
• searchParams() — read URL search params
• params() — read route params
• redirect() — redirect to another route
• notFound() — render the 404 page
• after() — schedule work after the response is sent
• connection() — access the underlying connection
• draftMode() — toggle draft mode