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 Node SSR runtime (react-server-dom-webpack/client.node), server references are registered with a noServerCall callback, so calling a Server Action during the initial server render throws. Invoking an action mid-render would serialize into a server round-trip (a fetch waterfall), which React forbids; fetch data in Server Components and pass it down instead.

Source

Thrown at packages/react-server-dom-webpack/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 data read into a server component and pass results as props to the client component
Call the action in an event handler or useEffect after hydration, never during render
For SSR-time data needs, use direct fetch/db access in the server component instead of an action call

Example fix

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

// after: page.jsx (server component)
export default async function Page() {
  const items = await getItemsDirect();
  return <Items initialItems={items} />;
}

Defensive patterns

Strategy: try-catch

Validate before calling

// Structural guard: restrict action calls to post-hydration code paths.
export function useAfterHydration(fn) {
  const [ready, setReady] = useState(false);
  useEffect(() => setReady(true), []);
  return ready ? fn : () => {};
}

Try / catch

try {
  const data = await getItems();
} catch (e) {
  if (String(e.message).includes('Server Functions cannot be called during initial render')) {
    // Move the call into an event handler or useEffect; fetch initial data in a server component.
    return initialItems;
  }
  throw e;
}

Prevention

Pass server-fetched data into client components as props instead of actions calling at render
Invoke Server Actions only from event handlers and effects
When porting fetch-based components, replace render-time fetches with server component props

When it happens

Trigger: During renderToPipeableStream SSR, a rendered component calls a 'use server' function: const data = await getItems() in the component body, actions invoked in render helpers or module-init code, or an action reference awaited during the initial render pass.

Common situations: Client components self-fetching via actions at render time; effects polyfilled as render-time calls during SSR; code shared between client event handlers and render paths accidentally executing the action during SSR.

Related errors

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