How to debug Next.js Server Components

Updated 28 October 2026 · 6 min read

Server Components run only on the server, so the browser's DevTools cannot see inside them. Here is how to read their logs, pause them, see the data they fetch, and spot the mistakes that cause most Server Component bugs.

Where Server Component logs go

A console.log in a Server Component prints in the terminal running next dev. Since Next.js 15 it is also replayed in the browser console with a Server label, so you can see it next to client logs. If you see nothing at all, the component may not be rendering: check that the route is the one you think, and that a loading.tsx or an error boundary is not showing instead.

Setting breakpoints

Start the server with the Node.js inspector, attach Chrome or VS Code, and click a line:

NODE_OPTIONS='--inspect' npx next dev

Open chrome://inspect, choose the Next.js target, and find your page.tsx with Cmd/Ctrl + P. Next.js compiles routes on demand, so load the page once before setting the breakpoint, or put a debugger; statement in the component.

With qaisdebugs, run qaisdebugs dev, open the Sources view and click the line number. It connects to the server for you, and a breakpoint on a file that is not compiled yet turns active as soon as it is.

Seeing the data they fetch

Server Components usually exist to fetch data, and those requests never reach the browser's Network tab. Turn on logging.fetches in next.config to list fetch calls, or use qaisdebugs to see every call, axios included, with headers, bodies and the line that made it. More on server-side requests.

The most common Server Component bugs

params and searchParams are Promises

Since Next.js 15, page props are asynchronous. Reading searchParams.page without awaiting gives undefined, and the request goes out with the wrong value:

export default async function Page({ searchParams }: { searchParams: Promise<{ page?: string }> }) {
  const { page = '1' } = await searchParams;
  const products = await getProducts(Number(page));
  return <ProductList products={products} />;
}

Stale data from caching

In Next.js 14, fetch on the server was cached by default, so an API change might not show up. Next.js 15 stopped caching by default. If data looks stale, check the cache result in the fetch log and set cache: 'no-store' or a revalidate time on purpose.

Hooks or browser APIs in a Server Component

useState, useEffect, event handlers and window only work in Client Components. Move the interactive part into a small 'use client' component and keep the data fetching on the server.

Props that cannot cross to the client

Props passed from a Server Component to a Client Component must be serializable. Functions, class instances and some objects fail. Pass plain data, and use Server Actions for functions.

Checklist

1. Is the component rendering at all? Check the terminal.
2. What did it fetch, and what came back? Check the server's requests.
3. Which value is wrong first? Pause and read it.