Rendering & Hydration — Chapter Quiz

Question 1

1

What is Nuxt's default rendering mode?

AClient-side rendering (SPA)BUniversal — SSR with client-side hydrationCPure static (SSG)DStreaming only

Nuxt 3 defaults to universal rendering — the server renders the first HTML, then Vue hydrates it on the client.

Question 2

2

Which command produces a fully static site?

Anuxi buildBnuxi generateCnuxi staticDnuxi prerender

nuxi generate crawls every route and writes HTML to dist/. nuxi build produces an SSR-capable server.

Question 3

3

routeRules lets you mix SSR, SSG, ISR, and SPA mode in one app.

TTrueFFalse

routeRules is hybrid rendering — every path can have its own strategy: prerender, swr, isr, ssr false, etc.

Question 4

4

What does swr: 3600 mean as a route rule?

AServe cached HTML for up to 1 hour, revalidate in the backgroundBRefresh the page every 3600msCCache only on the clientDSkip server rendering after 3600 requests

Stale-while-revalidate — the cached response is served until the TTL, after which the next request triggers a background refresh.

Question 5

5

How do you opt a route into SPA mode (no SSR)?

ArouteRules: { "/admin/**": { ssr: false } }BdefinePageMeta({ spa: true })CuseSpa() in setupDRename the file with a .spa.vue suffix

ssr: false in a route rule disables SSR for matching routes — they render only on the client.

Question 6

6

Wrap browser-only code in <________> to skip server rendering.

<ClientOnly> defers rendering until after hydration — for libraries that touch window, localStorage, or document.

Question 7

7

Naming a component Foo.server.vue means it...

ARuns only on the server and ships no client JSBRuns only on the clientCOnly renders in productionDBecomes a server route

Server components render to HTML on the server and stream into the page — no hydration, no JS shipped for them.

Question 8

8

Which can cause a hydration mismatch?

Select all that apply.

AUsing Math.random() or Date.now() directly in the templateBReading localStorage during SSRCConditional rendering based on import.meta.clientDUsing <NuxtLink>

Anything that diverges between the server pass and the client pass will mismatch. <NuxtLink> is fully isomorphic.

Test what you learned.