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 SSR client runtime passes noServerCall as callServer when creating server references: during server-side rendering there is no browser request to attach a server-function call to, so invoking a server function while the render pass runs throws and points you at server components for initial data.

Source

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

1. Move server-function calls into event handlers or useEffect
2. Provide initial data from a parent server component via props
3. Guard shared code so action calls only run after hydration in the browser

Example fix

// before
export default function Dashboard() {
  refreshStats(); // fires during SSR render -> Error
  return <Stats />;
}

// after
export default function Dashboard() {
  useEffect(() => { refreshStats(); }, []);
  return <Stats />;
}

function useServerActionAfterHydration(action) {
  const hydrated = useRef(false);
  useEffect(() => { hydrated.current = true; }, []);
  return useCallback((...args) => {
    if (!hydrated.current) {
      throw new Error('Do not call server functions during SSR render');
    }
    return action(...args);
  }, [action]);
}

When it happens

Trigger: Invoking a server action during SSR on Node — in a component body during prerender, in module scope evaluated while rendering, or in a lifecycle path that runs server-side (constructor, render body).

Common situations: Shared components that call actions on import or first render; analytics/telemetry actions fired during SSR; code migrated from client-only rendering without render-phase guards.

Related errors

• Server Functions cannot be called during initial render. Thi
• Server Functions cannot be called during initial render. Thi
• File/Blob fields are not yet supported in progressive forms.
• 417
• Server Functions cannot be called during initial render. Thi

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