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
- Move the call into an event handler or useEffect so it runs after render
- Pass the data down from a Server Component as props
- 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
- Never invoke Server Functions from component bodies on the edge
- Push data fetching into Server Components and pass props
- Check props with isServerReference before calling during render paths
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
- Server Functions cannot be called during initial render. Thi
- Server Functions cannot be called during initial render. Thi
- Server actions must be functions
- Server Functions cannot be called during initial render. Thi
- Server Functions cannot be called during initial render. Thi
AI-assisted analysis of facebook/react@eafeac097b (2026-08-21).
Data as JSON: /api/errors/35a9176b6b9d3f59.
Report an issue: GitHub.