{"record":{"id":"2b7b1b340e2df62c","repo":"facebook/react","slug":"server-functions-cannot-be-called-during-initial-r","errorCode":null,"errorMessage":"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.","messagePattern":"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\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js","lineNumber":35,"sourceCode":"\nimport type {Readable} from 'stream';\n\nimport {\n  createResponse,\n  createStreamState,\n  getRoot,\n  reportGlobalError,\n  processStringChunk,\n  processBinaryChunk,\n  close,\n} from 'react-client/src/ReactFlightClient';\n\nimport {createServerReference as createServerReferenceImpl} from 'react-client/src/ReactFlightReplyClient';\n\nexport {registerServerReference} from 'react-client/src/ReactFlightReplyClient';\n\nfunction noServerCall() {\n  throw new Error(\n    'Server Functions cannot be called during initial render. ' +\n      'This would create a fetch waterfall. Try to use a Server Component ' +\n      'to pass data to Client Components instead.',\n  );\n}\n\nexport function createServerReference<A: Iterable<any>, T>(\n  id: any,\n  callServer: any,\n): (...A) => Promise<T> {\n  return createServerReferenceImpl(id, noServerCall);\n}\n\ntype EncodeFormActionCallback = <A>(\n  id: any,\n  args: Promise<A>,\n) => ReactCustomFormAction;\n","sourceCodeStart":17,"sourceCodeEnd":53,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js#L17-L53","documentation":"react-server-dom-esm's Node client (used to consume Flight payloads where no callback transport is wired) creates Server References whose callServer always throws (noServerCall). This is deliberate: calling a Server Function during initial render would serialize into an extra request per component — a fetch waterfall — so React blocks it and points you at Server Components for passing data down instead.","triggerScenarios":"Any invocation of a Server Function reference during render in this client: calling it in a component body, in a layout, during SSR of the Flight payload, or otherwise outside an event handler — createServerReference deliberately drops its callServer argument and installs noServerCall.","commonSituations":"Porting data-fetching components to RSC and calling passed-down actions in render; SSR of client components that invoke actions at render time; tests that render and immediately call actions.","solutions":["Move the call into an event handler or useEffect so it runs after render","Fetch the data in a Server Component and pass it down as props instead","If the work must happen during server-side rendering, run it in the react-server layer and stream the result into the payload"],"exampleFix":"// before — Server Function invoked during render\n'use client';\nexport default function Stats() {\n  const [stats, setStats] = useState(null);\n  getStats().then(setStats); // throws: fetch waterfall\n  return <pre>{JSON.stringify(stats)}</pre>;\n}\n\n// after — data comes from a Server Component\n// StatsPage.server.js: const stats = await getStats(); return <Stats stats={stats}/>;\n'use client';\nexport default function Stats({stats}) {\n  return <pre>{JSON.stringify(stats)}</pre>;\n}","handlingStrategy":"type-guard","validationCode":"const SERVER_REFERENCE = Symbol.for('react.server.reference');\nexport function assertNotServerReferenceCall(fn, phase) {\n  if (phase === 'render' && typeof fn === 'function' && fn.$$typeof === SERVER_REFERENCE) {\n    throw new Error('Refusing to call a Server Function during render');\n  }\n}","typeGuard":"const SERVER_REFERENCE = Symbol.for('react.server.reference');\nexport function isServerReference(fn) {\n  return typeof fn === 'function' && fn.$$typeof === SERVER_REFERENCE;\n}\n// in component bodies: if (isServerReference(fn)) do not invoke — only from handlers/effects","tryCatchPattern":"try {\n  const root = createFromNodeStream(stream, rootPath, baseURL);\n} catch (e) {\n  if (/fetch waterfall/.test(e.message)) {\n    // a component called a server function during render — move the call to an event handler\n  }\n  throw e;\n}","preventionTips":["Treat Server Functions as event-time APIs, never render-time","Pass data down from Server Components as props","Review component bodies for calls to imported action modules"],"tags":["react-server-components","server-actions","render","fetch-waterfall","ssr"],"backgroundTag":"server-function-called-during-render","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}