Server-side data fetching in Nuxt 3?

WHY IT EXISTS: Nuxt pages often need data from an API before they render (e.g., a product page needs product details). Fetching client-side means a blank page until the request completes (slow, bad UX). Nuxt lets you fetch server-side during SSR, serialize the data, and inject it into the page. The browser hydrates with populated state, no loading flicker.

THE MENTAL MODEL: Call useFetch or useAsyncData in your page component. On the server, Nuxt executes the composable, waits for the async operation, and serializes the result into the HTML (as a script tag, typically). The browser receives HTML with data already present, hydrates, and the component reads it as if it were client-side state. No round-trip needed.

HOW IT WORKS: In a Nuxt page, define data like const { data: product } = useFetch(/api/products/${route.params.id}). On server render, Nuxt runs this, fetches the product, waits for the result. The result is serialized into the HTML payload. Browser loads HTML, sees <script type="application/json" data-nuxt-component-uid="...">{ "product": { ... } }</script>, hydrates, and the component accesses this.product or product.value as if the fetch completed locally. For selective server fetching, use the server composable; useFetch always runs on server unless disabled.

WHEN IT MATTERS: Any page that requires data to render should fetch server-side. Blogs, product pages, profile pages all benefit. Client-only fetches are fine for secondary data (infinite scrolls, filters, recommendations).

ONE CONCRETE EXAMPLE: A Nuxt product page at /products/[id]. Page code: const { data: product } = useFetch(/api/products/${id}). Server render: Nuxt fetches the product (e.g., { id: 1, name: "Widget", price: 9.99 }), embeds it in the HTML. Browser loads <h1>Widget</h1> Price: 9.99 instantly; JavaScript boots, hydrates, and interactive features (add to cart button, reviews) attach without re-rendering. If you skipped server-side fetching and only fetched client-side, the page would show a loading spinner until the request completes, slowing first contentful paint.