SSR & SSG Basics

Preview — 3 of 10 questions

What is a React Server Component, and how does it differ from a regular React component?

javascript

async function UserProfile({ userId }: { userId: string }) {
  const user = await prisma.user.findUnique({ where: { id: userId } });
  return <h1>{user.name}</h1>;
}

AIt is a component that uses useEffect to fetch data from a server

BIt runs only on the server: it can be async and access databases and server-only packages directly, it sends zero JavaScript to the browser, and it cannot use hooks (useState, useEffect) or browser APIs

CIt is identical to a Client Component but hosted on a CDN

DIt requires "use server" at the top of the file

Which component requires the "use client" directive?

AA component that queries a database with Prisma

BA component that renders a static list from props

CA component that uses useState to track a search input's value

DA component that renders another Server Component

What determines whether an App Router route is rendered statically or dynamically?

ANext.js detects it automatically: a route that uses no request data (no cookies(), headers(), searchParams, or uncached fetches) is prerendered at build time; touching any of those switches it to per-request rendering

BWhether you export getStaticProps or getServerSideProps

CEvery App Router route is always dynamic

DYou must set export const dynamic = 'static' by hand

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