Server-Side Rendering and Hydration

Quiz: Client or Server?

advanced20 min read

Put Your Knowledge to the Test

You've learned the theory. Now let's see if it sticks.

These scenarios come from real production decisions. Each one tests a different aspect of the server rendering mental model — RSC boundaries, hydration behavior, streaming mechanics, and rendering strategy selection. Some are straightforward. Some are traps.

No skimming allowed. Think before you answer.

Round 1: Server or Client Component?

Quiz
A component renders a blog post's title, author, and publication date. It has no interactive elements — no buttons, no forms, no hover effects. Should it be a Server or Client Component?
Quiz
A component displays a product image carousel with previous/next buttons and swipe gestures on mobile. Server or Client Component?
Quiz
A navigation bar shows the user's avatar and name if logged in, or a 'Sign In' button if not. The auth state comes from a cookie. Server or Client Component?

Round 2: Spot the Hydration Mismatch

Quiz
This component renders in a Server Component context. Will it cause a hydration mismatch?\n\n`tsx\nfunction WelcomeBanner() {\n const hour = new Date().getHours()\n const greeting = hour < 12 ? 'Good morning' : 'Good evening'\n return <h2>{greeting}</h2>\n}\n`
Quiz
This Client Component displays the browser's viewport width. Will it cause a hydration mismatch?\n\n`tsx\n'use client'\n\nimport { useState, useEffect } from 'react'\n\nfunction ViewportWidth() {\n const [width, setWidth] = useState(0)\n\n useEffect(() => {\n setWidth(window.innerWidth)\n }, [])\n\n return <span>{width}px</span>\n}\n`
Quiz
This Client Component uses crypto to generate a unique form ID. Hydration mismatch?\n\n`tsx\n'use client'\n\nfunction ContactForm() {\n const formId = crypto.randomUUID()\n return <form id={formId}>...</form>\n}\n`

Round 3: Streaming Behavior

Quiz
Given this component tree, what does the user see first when the page loads?\n\n`tsx\nexport default async function Page() {\n return (\n <div>\n <h1>Dashboard</h1>\n <Suspense fallback={<p>Loading stats...</p>}>\n <Stats />\n </Suspense>\n <Suspense fallback={<p>Loading chart...</p>}>\n <Chart />\n </Suspense>\n </div>\n )\n}\n`\n\nAssume Stats takes 200ms and Chart takes 2 seconds to resolve.
Quiz
What happens if the Stats component in the previous example throws an error during server rendering?

Round 4: RSC Serialization Boundaries

Quiz
This Server Component passes data to a Client Component. What will happen?\n\n`tsx\nasync function ProductPage() {\n const product = await db.product.findFirst()\n return (\n <ProductCard\n name={product.name}\n price={product.price}\n formatPrice={(p) => `$${p.toFixed(2)}`}\n />\n )\n}\n`\n\nwhere ProductCard is a Client Component with 'use client'.
Quiz
Can you pass a Server Component as a child to a Client Component?

Round 5: Rendering Strategy Selection

Quiz
You're building a SaaS dashboard that shows real-time analytics for the logged-in user. The data updates every 10 seconds. Which rendering strategy is most appropriate?
Quiz
A documentation site has 5,000 pages of technical content that changes once a week. Pages have a search bar and a theme toggle. What's the optimal architecture?
Quiz
An e-commerce checkout page shows the user's cart items, applies a discount code, and processes payment. The cart data is stored in a database. Which approach?

Round 6: Advanced Scenarios

Quiz
You have a Client Component that conditionally renders based on screen size. On the server, there is no screen. What's the correct pattern?
Quiz
A component fetches data from an API that requires an auth token stored in an HTTP-only cookie. The API is in us-east-1. Your users are global. What rendering setup minimizes total latency?
Quiz
You're adding a real-time stock ticker to a financial dashboard. It updates every second via WebSocket. Server or Client Component?

How Did You Do?

If you got 12+ correct, you have a solid grasp of server rendering concepts. If you got 10-11, review the topics where you stumbled — the explanations point you to the right mental model. Below 10, re-read the module from the beginning. These concepts build on each other, and gaps in the foundation show up in production.

The real test is production. Next time you create a component, ask yourself: does this need 'use client'? Can this data be fetched on the server? What's the right Suspense boundary here? Make it a habit, and the decisions become automatic.

Key Rules
  1. 1Default to Server Components. Only add 'use client' when you need hooks, event handlers, or browser APIs.
  2. 2Server Components can safely use Date, Math.random(), and other non-deterministic APIs — they don't hydrate.
  3. 3The donut pattern: Client Component shell (state/events) with Server Component children (data/rendering).
  4. 4Hydration mismatches only occur in Client Components. Server Components run once on the server — no comparison.
  5. 5Streaming Suspense boundaries are independent — a slow boundary never blocks a fast sibling.
  6. 6Choose rendering strategy per route: SSG for static, ISR for semi-static, SSR for dynamic, PPR for mixed, CSR for interactive-only.
Related Topics
11/11