facebook/react · error · Error

Server Functions cannot be called during initial render. Thi

Error message

Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.

What it means

In the edge SSR runtime (react-server-dom-webpack/client.edge), server references are created with a noServerCall callback: while server-rendering the initial HTML you may hold or forward a Server Action, but calling it would require a server round-trip in the middle of rendering — a fetch waterfall. React blocks the call and points you at fetching data in Server Components instead.

Source

Thrown at packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js:55

  processBinaryChunk,
  close,
} from 'react-client/src/ReactFlightClient';

import {
  processReply,
  createServerReference as createServerReferenceImpl,
} from 'react-client/src/ReactFlightReplyClient';

export {registerServerReference} from 'react-client/src/ReactFlightReplyClient';

import type {TemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';

export {createTemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';

export type {TemporaryReferenceSet};

function noServerCall() {
  throw new Error(
    'Server Functions cannot be called during initial render. ' +
      'This would create a fetch waterfall. Try to use a Server Component ' +
      'to pass data to Client Components instead.',
  );
}

export function createServerReference<A: Iterable<any>, T>(
  id: any,
  callServer: any,
): (...A) => Promise<T> {
  return createServerReferenceImpl(id, noServerCall);
}

type EncodeFormActionCallback = <A>(
  id: any,
  args: Promise<A>,
) => ReactCustomFormAction;

View on GitHub (pinned to eafeac097b)

Solutions

Fetch the data in a server component and pass it down as props
Call the action only from an event handler (onClick/onSubmit) or a useEffect that runs after hydration
If data is needed during SSR, read it directly (db call, fetch) inside the server component rather than invoking an action

Example fix

// before ('use client')
export default function Items() {
  const [items, setItems] = useState(null);
  getItems().then(setItems); // Server Action called during render/SSR -> throws
  return <ul>{items ?? '...'}</ul>;
}

// after: page.jsx (server component)
export default async function Page() {
  const items = await db.items(); // direct server-side read
  return <Items initialItems={items} />; // client component gets props
}

Defensive patterns

Strategy: try-catch

Validate before calling

// Structural guard: only invoke actions after hydration, never during render.
export function useAfterHydration(fn) {
  const [ready, setReady] = useState(false);
  useEffect(() => setReady(true), []);
  return ready ? fn : () => {};
}
// const get = useAfterHydration(getItems); // called in handlers/effects only

Try / catch

try {
  setItems(await getItems()); // Server Action
} catch (e) {
  if (String(e.message).includes('Server Functions cannot be called during initial render')) {
    // Defer the call to an event handler or post-hydration effect.
    return;
  }
  throw e;
}

Prevention

Fetch data in server components and pass it as props — actions belong in event handlers and effects
Never call 'use server' functions in component bodies or render helpers
Review components that self-fetch; they are the usual source of SSR waterfall errors

When it happens

Trigger: A component rendered during SSR (via renderToReadableStream on the edge runtime) invokes a Server Action: calling getItems() (a 'use server' function) in the component body, in a render-time promise chain, or in module-init code; awaiting an action reference during the initial render.

Common situations: Client components that self-fetch by calling actions at render time instead of receiving props; porting REST-fetch components to actions while keeping the call in the render path; effects that fire during SSR in third-party libraries.

Related errors

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/f73f21d02bf5c21a. Report an issue: GitHub.