ISR & Revalidation

Preview — 3 of 10 questions

How does streaming work with React Suspense in the App Router?

javascript

export default async function Dashboard() {
  return (
    <div>
      <StaticHeader />
      <Suspense fallback={<Skeleton />}><SlowDataComponent /></Suspense>
      <Suspense fallback={<Skeleton />}><AnotherSlowComponent /></Suspense>
    </div>
  );
}

AStreaming waits for every component before sending anything

BThe server sends the static shell (the non-suspended HTML) immediately, then progressively streams each Suspense boundary's content as its data resolves — each boundary is an independent chunk in one response

CSuspense boundaries only work in Client Components

DStreaming requires WebSockets

How do Server Actions provide progressive enhancement with HTML forms?

javascript

async function createChallenge(formData: FormData) { 'use server'; /* ... */ }
export default function Page() { return <form action={createChallenge}>…</form>; }

AThe action attribute only accepts URL strings

BServer Actions require JavaScript to submit

CYou must wrap the form in a Client Component

DNext.js extends <form action={…}> to accept a Server Action function; before hydration (or with JS disabled) the form does a real HTML POST to the action's endpoint, and after hydration React intercepts the submit and calls it via fetch with no full reload

What does useActionState (formerly useFormState) give you?

javascript

'use client';
const [state, action, isPending] = useActionState(createPost, initialState);

AIt wraps a Server Action to provide: the current state (the action's last return value, starting from initialState), a wrapped action to pass to <form action>, and an isPending boolean — enabling accessible, progressively-enhanced forms with loading and error feedback

BIt makes Server Actions synchronous

CIt replaces Server Actions with client-side mutations

DIt only works with the Pages Router

Answer all 10 questions (7 more), see explanations for every answer, and track your score.