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

The unbundled Node SSR client configuration (ReactFlightDOMClientNode, which re-exports the edge config) wires createServerReference to a noServerCall stub. Any attempt to invoke a Server Function while the initial Flight render/stream is in progress on the Node SSR pass throws immediately, because such a call would require a nested server request (fetch waterfall) in the middle of producing the initial payload.

Source

Thrown at packages/react-server-dom-unbundled/src/client/ReactFlightDOMClientNode.js:45

  serverModuleMap: null | ServerManifest,
};

import type {Readable} from 'stream';

import {
  createResponse,
  createStreamState,
  getRoot,
  reportGlobalError,
  processStringChunk,
  processBinaryChunk,
  close,
} from 'react-client/src/ReactFlightClient';

export * from './ReactFlightDOMClientEdge';

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.',
  );
}

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

export type Options = {
  nonce?: string,
  encodeFormAction?: EncodeFormActionCallback,
  unstable_allowPartialStream?: boolean,
  findSourceMapURL?: FindSourceMapURLCallback,
  replayConsoleLogs?: boolean,
  environmentName?: string,

View on GitHub (pinned to eafeac097b)

Solutions

Move the invocation to an event handler or effect — never the component body
Lift the data need into a Server Component and pass results as props
Audit wrappers/HOCs that call functions passed to them instead of forwarding them

Example fix

// before
function Search({query}) {
  const results = search(query); // server function called during render
  return <Results results={results} />;
}

// after: trigger from an event handler
function Search() {
  const [results, setResults] = useState(null);
  return (
    <>
      <button onClick={async () => setResults(await search(query))}>Go</button>
      {results ? <Results results={results} /> : null}
    </>
  );
}

Defensive patterns

Strategy: validation

Try / catch

try {
  const root = getRootFromCreate(createFromNodeStream(payload, {serverConsumerManifest}));
  renderToPipeableStream(root);
} catch (e) {
  if (e.message.includes('cannot be called during initial render')) {
    // deterministic misuse: surface with the component stack and fix the call site
    throw new Error('Server Function called during Node SSR render: ' + e.stack);
  }
  throw e;
}

Prevention

Never call actions in component bodies, class constructors, or module scope
Treat any function crossing the server->client boundary as data to pass, not to invoke
Use React strict dev warnings and review render-phase effects when porting to RSC

When it happens

Trigger: Calling a server function during SSR of the Flight response in a Node unbundled setup — directly in a component body, in a getter that render touches, or via code that runs while createFromNodeStream is still resolving the tree.

Common situations: Custom RSC Node servers using react-server-dom-unbundled/client node-edge configs; components that call actions during render; refactors that moved a call from an event handler into the render path; middleware or wrapper components that eagerly invoke passed functions.

Related errors

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