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 Node build of the Parcel client creates Server References whose callServer always throws (noServerCall). This build consumes Flight payloads (for example during SSR in Node) without a call-back transport, and React deliberately blocks Server Function invocation during initial render to prevent a fetch waterfall, so the first render-time invocation throws.

Source

Thrown at packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js:38

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

export * from './ReactFlightDOMClientEdge';

function findSourceMapURL(filename: string, environmentName: string) {
  const devServer = parcelRequire.meta.devServer;
  if (devServer != null) {
    const qs = new URLSearchParams();
    qs.set('filename', filename);
    qs.set('env', environmentName);
    return devServer + '/__parcel_source_map?' + qs.toString();
  }
  return null;
}

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,
  replayConsoleLogs?: boolean,
  environmentName?: string,
  startTime?: number,

View on GitHub (pinned to eafeac097b)

Solutions

Move the call into an event handler or useEffect
Pass data from a Server Component as props instead of fetching during render
Do render-time work in the react-server layer and stream the result down

Example fix

// before — fetching during SSR render
'use client';
export default function User({id}) {
  const [user, setUser] = useState(null);
  getUser(id).then(setUser); // server reference during render -> throws
  return <div>{user?.name}</div>;
}

// after — Server Component fetches and passes props
// UserPage.server.js: const user = await getUser(id); return <User user={user}/>;
'use client';
export default function User({user}) {
  return <div>{user.name}</div>;
}

Defensive patterns

Strategy: type-guard

Validate before calling

const SERVER_REFERENCE = Symbol.for('react.server.reference');
export function assertNotServerReferenceCall(fn, phase) {
  if (phase === 'render' && typeof fn === 'function' && fn.$$typeof === SERVER_REFERENCE) {
    throw new Error('Refusing to call a Server Function during render');
  }
}

Type guard

const SERVER_REFERENCE = Symbol.for('react.server.reference');
export function isServerReference(fn) {
  return typeof fn === 'function' && fn.$$typeof === SERVER_REFERENCE;
}
// during SSR: if (isServerReference(fn)) fetch the data in the server layer instead

Try / catch

try {
  const root = createFromNodeStream(stream, manifest);
} catch (e) {
  if (/fetch waterfall/.test(e.message)) {
    // a component invoked an action during render — restructure to props from a Server Component
  }
  throw e;
}

Prevention

Invoke Server Functions only from event handlers or effects
Fetch during SSR in the react-server layer, then pass props
Lint against calling imported action modules inside component bodies

When it happens

Trigger: Invoking a server function during render in the Node client: component body, module-eval time, or the SSR pass of a Flight payload — every reference created via createServerReference gets noServerCall.

Common situations: SSR in Node of client components that call passed-down actions during render; porting components that fetched inside render; tests rendering and immediately invoking actions.

Related errors

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