{"record":{"id":"0eb2b7563884d2d1","repo":"facebook/react","slug":"server-functions-cannot-be-called-during-initial-r-0eb2b7","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-unbundled/src/client/ReactFlightDOMClientEdge.js","lineNumber":55,"sourceCode":"  processBinaryChunk,\n  close,\n} from 'react-client/src/ReactFlightClient';\n\nimport {\n  processReply,\n  createServerReference as createServerReferenceImpl,\n} from 'react-client/src/ReactFlightReplyClient';\n\nexport {registerServerReference} from 'react-client/src/ReactFlightReplyClient';\n\nimport type {TemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';\n\nexport {createTemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';\n\nexport type {TemporaryReferenceSet};\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":37,"sourceCodeEnd":73,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-unbundled/src/client/ReactFlightDOMClientEdge.js#L37-L73","documentation":"In the edge-runtime SSR configuration (ReactFlightDOMClientEdge), server references are created with a callServer of noServerCall, a stub that always throws. Calling a Server Function while the initial Flight payload is still being rendered/streamed would make the server-side render depend on another server round trip (a fetch waterfall), so React makes that mistake loud instead of letting it deadlock or cascade requests.","triggerScenarios":"Invoking a server function (createServerReference result) directly in a component body, at module top level, or in any code path that runs while the edge SSR pass is still consuming the Flight stream; e.g. writing const data = getItems() inside a client component instead of calling it from an event handler.","commonSituations":"Porting data-fetching components to RSC and calling a 'use server' action during render; calling an action in a layout/component that runs during edge SSR (e.g. edge runtime in a meta-framework); accidentally invoking a function passed as a prop instead of forwarding it.","solutions":["Move the Server Function call into an event handler (onClick/onSubmit) or a useEffect so it runs after initial render","Fetch the data in a Server Component and pass it down as props — the exact pattern the message recommends","If the call must happen per-request up front, do it in the server component tree before serialization instead of from the client edge render"],"exampleFix":"// before: server function invoked during initial render\n'use client';\nexport default function List() {\n  const items = getItems(); // throws: fetch waterfall\n  return <ul>{items.map(i => <li key={i.id}>{i.title}</li>)}</ul>;\n}\n\n// after: Server Component fetches, client renders\n// app/list-server.js (no 'use client')\nexport default async function ListServer() {\n  const items = await getItems();\n  return <List items={items} />;\n}","handlingStrategy":"validation","validationCode":"// Static check: server functions may only be referenced in handler/effect positions\n// eslint.config.js\n'no-restricted-syntax': ['error', {\n  selector: 'JSXElement CallExpression',\n  message: 'Do not call functions inside JSX during render - pass results as props from a Server Component.',\n}]}","typeGuard":null,"tryCatchPattern":"try { renderTree(); } catch (e) {\n  if (e.message.includes('cannot be called during initial render')) {\n    // move the call site out of render: this is a code-structure bug, not recoverable state\n    logErrorToTracker(e, {hint: 'server function invoked during edge SSR render'});\n  }\n  throw e;\n}","preventionTips":["Only invoke server functions from event handlers or effects","Keep component bodies pure: no calls with side effects or data fetches","Fetch in Server Components and pass data down as props"],"tags":["react-server-components","server-functions","edge-runtime","ssr","waterfall"],"backgroundTag":"server-function-called-during-render","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}