SSR & SSG Basics — Series 3

Preview — 3 of 10 questions

ServerSidebar is a Server Component and ClientShell is a Client Component. Does this work?

javascript

// app/page.tsx (Server Component)
import ClientShell from './ClientShell';
import ServerSidebar from './ServerSidebar';

export default function Page() {
  return (
    <ClientShell>
      <ServerSidebar />
    </ClientShell>
  );
}

AYes — a Client Component cannot import a Server Component, but it can render one that is passed to it as children (or any prop). Here <ServerSidebar /> is rendered on the server and its output is slotted into ClientShell's {children}

BNo — anything inside a Client Component becomes a Client Component

CYes, but ServerSidebar silently turns into a Client Component

DNo — Server Components can never be nested inside Client Components in any form

Why can a Server Component be an async function like this, while a Client Component cannot?

javascript

async function ProductList() {
  const products = await db.product.findMany();
  return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

AClient Components can also be async — there is no difference

BServer Components render once on the server, so React can await the returned Promise before producing output. Client Components render (and re-render) synchronously in the browser as part of React's reconciliation, so an async component function is not supported there — you fetch with useEffect/a data library or read a Promise with use()

Casync components only work in Route Handlers

DIt works because Next.js transpiles async away at build time

The layout and page both call getConfig() while rendering the same request. How many network requests go out?

javascript

// Both the layout and the page call this during one render:
async function getConfig() {
  const res = await fetch('https://api.example.com/config');
  return res.json();
}

ATwo — one per component

BZero — fetch in Server Components is disabled

COne — during a single server render, Next.js deduplicates fetch calls with the same URL and options, so the layout and page share one response automatically (React's fetch memoization)

DOne, but only if you wrap getConfig in React.cache()

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