Streaming & Suspense

Preview — 3 of 10 questions

What happens at the infrastructure level when PPR serves a request?

javascript

export const experimental_ppr = true;

export default function ProductPage({ params }) {
  return (
    <div>
      <ProductDetails id={params.id} />               {/* static */}
      <Suspense fallback={<PriceSkeleton />}>
        <LivePrice id={params.id} />                   {/* dynamic */}
      </Suspense>
      <Suspense fallback={<ReviewsSkeleton />}>
        <PersonalisedReviews id={params.id} />         {/* dynamic */}
      </Suspense>
    </div>
  );
}

AAll parts render on every request — PPR is only a visual optimisation

BAt build time Next.js prerenders the static parts (<ProductDetails />) plus the Suspense fallbacks into a CDN-cacheable shell. At request time the shell is served instantly from the edge while the dynamic holes (<LivePrice />, <PersonalisedReviews />) render on the origin and stream into the same HTTP response

CPPR issues two separate HTTP requests, one for static and one for dynamic content

DPPR only works for authenticated routes

What do taintObjectReference and taintUniqueValue do (with experimental.taint on)?

javascript

const user = await getUserWithSecrets(userId);
experimental_taintObjectReference('Do not pass the full user to the client', user);
experimental_taintUniqueValue('Do not expose the API key', process, apiKey);

AThey encrypt the data before it goes to the client

BThey are database encryption utilities

CThey register the object reference / specific value as "tainted", so if it is ever passed as a prop from a Server Component to a Client Component, React throws at render time — a defence-in-depth guard against leaking server data into the browser

DThey prevent the object from being mutated

A page renders both. How many times is /api/users/123 fetched?

javascript

async function UserAvatar({ userId }) {
  const user = await fetch(`/api/users/${userId}`).then(r => r.json());
  return <img src={user.avatar} />;
}
async function UserStats({ userId }) {
  const user = await fetch(`/api/users/${userId}`).then(r => r.json()); // same URL
  return <p>{user.postCount}</p>;
}

AOnce — during a single server render, Next.js deduplicates fetch calls with an identical URL and options, so the request goes out once and both components share the result

BTwice — once per component

CZero — Next.js always returns data from the previous request

DIt depends on whether you add cache: 'force-cache'

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