React Flashcards
Where are Server Components and Client Components rendered?
Server Components render exclusively on the server and never re-render on the client. Client Components render on both the server (during SSR/SSG) and client (during hydration).
What directive marks a component as a Client Component?
The ‘use client’ directive at the top of a file signals a Client Component, enabling client-side interactivity and hooks like useState.
Why can’t Server Components use React hooks like useState?
Server Components lack access to browser APIs and client-side state, making hooks reliant on client runtime incompatible.
How do Server Components improve bundle size?
They exclude server-only code (e.g., large libraries like marked) from client bundles, reducing JavaScript payloads.
What is the primary advantage of Server Components over SSR?
Server Components enable granular, component-level server rendering without requiring full-page reloads or hydration.
How do you nest a Server Component inside a Client Component?
Use the children prop in the Client Component as a placeholder, then pass the Server Component as a child in the parent.
What is the role of Suspense in Server Components?
Suspense streams Server Component outputs incrementally, allowing placeholders (e.g., loading spinners) while content loads.
How do Server Components handle data fetching?
They fetch data directly on the server during rendering, eliminating client-server waterfalls and enabling parallel data+UI streaming.
Can Server Components import Client Components?
Yes, but Client Components cannot import Server Components due to runtime environment incompatibilities.
What is the difference between Server Components and SSR?
SSR generates full-page HTML on the server, while Server Components render specific UI parts on the server and integrate with client-side React.
How do Server Components interact with browser APIs like localStorage?
They cannot—Server Components run on the server, so browser APIs must be used in Client Components or via server-side abstractions.
What is “hydration” in the context of Client Components?
Hydration attaches client-side JavaScript to server-rendered HTML, enabling interactivity and state management.
Why are Server Components not hydrated?
They produce static HTML without client-side interactivity, eliminating hydration costs and JavaScript overhead.
How do Server Components impact SEO?
They improve SEO by default, as search engines receive fully rendered HTML without requiring client-side JavaScript execution.
What is a “shared component” in RSC architecture?
A component that runs on both server and client, often used as a starting point before specialization into Server/Client Components.
How do Server Actions work in React 19?
Server Actions are functions annotated with ‘use server’ that run on the server, invoked from Client Components via form submissions or events.
What is the renderToPipeableStream API used for?
It serializes Server Component outputs into a streamable format, enabling progressive HTML delivery to the client.
How does RSC handle dynamic data updates?
By revalidating server-rendered content via Server Actions or revalidatePath, triggering server re-renders without full-page reloads.
Why are keys important when rendering lists in RSC?
Keys help React track dynamic list items across server/client renders, ensuring stable updates and minimizing unnecessary re-renders.
What is the main criticism of React Server Components?
Critics argue RSC blurs server/client boundaries, risking tightly coupled architectures reminiscent of early PHP-like spaghetti code.
