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-runtime build of the Parcel client creates Server References whose callServer is a hard throw (noServerCall). There is no wired transport for calling back to the server from this build during render, and React also wants to block the fetch waterfall of invoking server functions mid-render, so the first invocation during initial render throws with guidance to use a Server Component instead.

Source

Thrown at packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js:51

import type {TemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';

export {createTemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
export type {TemporaryReferenceSet};

function findSourceMapURL(filename: string, environmentName: string) {
  const devServer = parcelRequire.meta.devServer;
  if (devServer != null) {
    const qs = new URLSearchParams();
    qs.set('filename', filename);
    qs.set('env', environmentName);
    return devServer + '/__parcel_source_map?' + qs.toString();
  }
  return null;
}

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: string,
  exportName: string,
): (...A) => Promise<T> {
  return createServerReferenceImpl(
    id + '#' + exportName,
    noServerCall,
    undefined,
    findSourceMapURL,
    exportName,
  );
}

View on GitHub (pinned to eafeac097b)

Solutions

  1. Move the call into an event handler or useEffect so it runs after render
  2. Pass the data down from a Server Component as props
  3. If the work must happen during server render, run it in the react-server layer and stream results into the payload

Example fix

// before — action called while rendering on the edge
'use client';
export default function Counter({onUpdate}) {
  onUpdate(); // server reference invoked during render -> throws
  return <button>count</button>;
}

// after — invoke from an event handler
'use client';
export default function Counter({onUpdate}) {
  return <button onClick={() => onUpdate()}>count</button>;
}
Defensive patterns

Strategy: type-guard

Validate before calling

const SERVER_REFERENCE = Symbol.for('react.server.reference');
export function assertNotServerReferenceCall(fn, phase) {
  if (phase === 'render' && typeof fn === 'function' && fn.$$typeof === SERVER_REFERENCE) {
    throw new Error('Refusing to call a Server Function during render');
  }
}

Type guard

const SERVER_REFERENCE = Symbol.for('react.server.reference');
export function isServerReference(fn) {
  return typeof fn === 'function' && fn.$$typeof === SERVER_REFERENCE;
}
// render code: if (isServerReference(fn)) only invoke from event handlers or effects

Try / catch

try {
  const root = createFromReadableStream(stream, manifest);
} catch (e) {
  if (/fetch waterfall/.test(e.message)) {
    // move the server-function call out of render into an event handler
  }
  throw e;
}

Prevention

When it happens

Trigger: Invoking a server function during render in the edge client: in a component body, at module-evaluation time, or during an SSR pass — createServerReference installs noServerCall for every reference decoded from the payload.

Common situations: Rendering the Flight payload on an edge worker (SSR) where components invoke passed-down actions during render; porting fetch-in-render patterns to RSC.

Related errors


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