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 Edge SSR client runtime wires noServerCall in as callServer for every server reference: during edge streaming/prerender there is no request context to loop back to the server, so invoking a server function during render throws and directs you to fetch initial data via server components instead.

Source

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

Call server functions only from event handlers or inside useEffect
Fetch initial data in a server component and pass it down as props
When code must run on both sides, gate the call so it never executes during SSR

Example fix

// before
export default function Page() {
  getUser(); // called during render -> Error on edge SSR
}

// after
export default function Page() {
  useEffect(() => {
    getUser();
  }, []);
  return <Profile />;
}

Defensive patterns

Strategy: validation

Validate before calling

function useServerActionWhenInteractive(action) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  return useCallback((...args) => {
    if (!mounted) {
      throw new Error('Server functions cannot run during render/SSR');
    }
    return action(...args);
  }, [action, mounted]);
}

Prevention

Only call server functions from event handlers or useEffect
Fetch initial data in server components and pass as props
Audit shared hooks for action calls that run during SSR

When it happens

Trigger: Invoking a server action during render on the edge runtime — in a component body, top-level module scope executed during SSR, or a shared hook that fires the action on mount without an effect guard.

Common situations: Client hooks shared with SSR that call actions eagerly; prerendering pages that trigger actions during render; porting data fetching to actions instead of server components.

Related errors

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