facebook/react · error · Error

Server Functions cannot be called during initial render…

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-runtime SSR configuration (ReactFlightDOMClientEdge), server references are created with a callServer of noServerCall, a stub that always throws. Calling a Server Function while the initial Flight payload is still being rendered/streamed would make the server-side render depend on another server round trip (a fetch waterfall), so React makes that mistake loud instead of letting it deadlock or cascade requests.

Solutions

Move the Server Function call into an event handler (onClick/onSubmit) or a useEffect so it runs after initial render
Fetch the data in a Server Component and pass it down as props — the exact pattern the message recommends
If the call must happen per-request up front, do it in the server component tree before serialization instead of from the client edge render

Example fix

// before: server function invoked during initial render
'use client';
export default function List() {
  const items = getItems(); // throws: fetch waterfall
  return <ul>{items.map(i => <li key={i.id}>{i.title}</li>)}</ul>;
}

// after: Server Component fetches, client renders
// app/list-server.js (no 'use client')
export default async function ListServer() {
  const items = await getItems();
  return <List items={items} />;
}

Defensive patterns

Strategy: validation

Validate before calling

// Static check: server functions may only be referenced in handler/effect positions
// eslint.config.js
'no-restricted-syntax': ['error', {
  selector: 'JSXElement CallExpression',
  message: 'Do not call functions inside JSX during render - pass results as props from a Server Component.',
}]}

Try / catch

try { renderTree(); } catch (e) {
  if (e.message.includes('cannot be called during initial render')) {
    // move the call site out of render: this is a code-structure bug, not recoverable state
    logErrorToTracker(e, {hint: 'server function invoked during edge SSR render'});
  }
  throw e;
}

Prevention

Only invoke server functions from event handlers or effects
Keep component bodies pure: no calls with side effects or data fetches
Fetch in Server Components and pass data down as props

When it happens

Trigger: Invoking a server function (createServerReference result) directly in a component body, at module top level, or in any code path that runs while the edge SSR pass is still consuming the Flight stream; e.g. writing const data = getItems() inside a client component instead of calling it from an event handler.

Common situations: Porting data-fetching components to RSC and calling a 'use server' action during render; calling an action in a layout/component that runs during edge SSR (e.g. edge runtime in a meta-framework); accidentally invoking a function passed as a prop instead of forwarding it.

Related errors

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

Appendix: source

Thrown at packages/react-server-dom-unbundled/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)