{"record":{"id":"0162f42f0ce16f7b","repo":"facebook/react","slug":"server-functions-cannot-be-called-during-initial-r-0162f4","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-webpack/src/client/ReactFlightDOMClientNode.js","lineNumber":45,"sourceCode":"  serverModuleMap: null | ServerManifest,\n};\n\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\nexport * from './ReactFlightDOMClientEdge';\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\ntype EncodeFormActionCallback = <A>(\n  id: any,\n  args: Promise<A>,\n) => ReactCustomFormAction;\n\nexport type Options = {\n  nonce?: string,\n  encodeFormAction?: EncodeFormActionCallback,\n  unstable_allowPartialStream?: boolean,\n  findSourceMapURL?: FindSourceMapURLCallback,\n  replayConsoleLogs?: boolean,\n  environmentName?: string,","sourceCodeStart":27,"sourceCodeEnd":63,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js#L27-L63","documentation":"In the Node SSR runtime (react-server-dom-webpack/client.node), server references are registered with a noServerCall callback, so calling a Server Action during the initial server render throws. Invoking an action mid-render would serialize into a server round-trip (a fetch waterfall), which React forbids; fetch data in Server Components and pass it down instead.","triggerScenarios":"During renderToPipeableStream SSR, a rendered component calls a 'use server' function: const data = await getItems() in the component body, actions invoked in render helpers or module-init code, or an action reference awaited during the initial render pass.","commonSituations":"Client components self-fetching via actions at render time; effects polyfilled as render-time calls during SSR; code shared between client event handlers and render paths accidentally executing the action during SSR.","solutions":["Move the data read into a server component and pass results as props to the client component","Call the action in an event handler or useEffect after hydration, never during render","For SSR-time data needs, use direct fetch/db access in the server component instead of an action call"],"exampleFix":"// before ('use client')\nexport default function Items() {\n  const [items, setItems] = useState(null);\n  getItems().then(setItems); // action during render/SSR -> throws\n}\n\n// after: page.jsx (server component)\nexport default async function Page() {\n  const items = await getItemsDirect();\n  return <Items initialItems={items} />;\n}","handlingStrategy":"try-catch","validationCode":"// Structural guard: restrict action calls to post-hydration code paths.\nexport function useAfterHydration(fn) {\n  const [ready, setReady] = useState(false);\n  useEffect(() => setReady(true), []);\n  return ready ? fn : () => {};\n}","typeGuard":null,"tryCatchPattern":"try {\n  const data = await getItems();\n} catch (e) {\n  if (String(e.message).includes('Server Functions cannot be called during initial render')) {\n    // Move the call into an event handler or useEffect; fetch initial data in a server component.\n    return initialItems;\n  }\n  throw e;\n}","preventionTips":["Pass server-fetched data into client components as props instead of actions calling at render","Invoke Server Actions only from event handlers and effects","When porting fetch-based components, replace render-time fetches with server component props"],"tags":["server-actions","ssr","node","fetch-waterfall","react-server-components"],"backgroundTag":"server-action-called-during-render","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}