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-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.

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)

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.