React Error #426: Switched to client rendering because the server rendering aborted due to:

What causes this error

React's server renderer (renderToPipeableStream / renderToReadableStream) aborts SSR when an error throws past all Suspense boundaries, when a Suspense boundary times out (default 5s in renderToPipeableStream), or when the stream is explicitly aborted. React falls back to client-side rendering, displays the fallback UI on the server, and logs #426 with the inner error.

How to fix it

1. 01

   step 1

   Find the underlying error in the console

   #426 is React's wrapper around the actual SSR error. The real error is logged separately by your server (Next.js, Remix, custom Node). Check server logs, not just the browser console.

   # Next.js dev mode logs the inner error in the terminal
   # Production: check your server's stdout/stderr (Vercel logs, etc.)
   vercel logs
   # Or for self-hosted
   docker logs -f my-app

   Copy
2. 02

   step 2

   Check for Suspense boundaries that never resolve

   If a use(promise) reads a promise that never settles on the server, React's SSR will time out after the default 5 seconds and bail. Common: promises that depend on client-only globals (window) or external services that don't respond.

   // Bad - relies on window during SSR
   const dataPromise = fetch(window.location + '/api')  // window is undefined on server
   function Page() {
     const data = use(dataPromise)
     return <div>{data}</div>
   }
   
   // Good - use absolute URL on server
   const dataPromise = fetch(new URL('/api', process.env.NEXT_PUBLIC_APP_URL))

   Copy
3. 03

   step 3

   Add error boundaries above suspense boundaries

   An error inside a Suspense without an ErrorBoundary will propagate up; if nothing catches it, SSR aborts entirely. Wrap suspense regions with both ErrorBoundary and Suspense.

   <ErrorBoundary fallback={<ErrorMessage />}>
     <Suspense fallback={<Spinner />}>
       <SuspendingComponent />
     </Suspense>
   </ErrorBoundary>

   Copy
4. 04

   step 4

   Look for browser-only code in server components

   Accessing window, document, navigator, or localStorage in a server-rendered component throws. The error propagates and triggers #426. Move to a client component or guard with typeof window check.

   // Server-safe pattern
   function Component() {
     if (typeof window === 'undefined') return null
     return <p>{window.location.href}</p>
   }
   
   // Or mark as client component (Next.js)
   'use client'
   // Component now runs in browser only

   Copy
5. 05

   step 5

   Check SSR timeout settings

   Default SSR timeout is 5s in renderToPipeableStream. If your data dependency takes longer, raise it explicitly via the abortController option, or move the slow data into a client-side fetch.

   import { renderToPipeableStream } from 'react-dom/server'
   
   const controller = new AbortController()
   setTimeout(() => controller.abort(), 10000)  // 10s
   
   renderToPipeableStream(<App />, {
     signal: controller.signal,
   })

   Copy
6. 06

   step 6

   Reproduce locally with production mode

   Dev mode often shows clearer errors but masks production timing. Reproduce with NODE_ENV=production npm run build && npm start to see the real failure mode.

   # Next.js
   npm run build
   npm run start
   # Then trigger the page that fires #426

   Copy