{"record":{"id":"35a9176b6b9d3f59","repo":"facebook/react","slug":"server-functions-cannot-be-called-during-initial-r-35a917","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-parcel/src/client/ReactFlightDOMClientEdge.js","lineNumber":51,"sourceCode":"\nimport type {TemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';\n\nexport {createTemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';\nexport type {TemporaryReferenceSet};\n\nfunction findSourceMapURL(filename: string, environmentName: string) {\n  const devServer = parcelRequire.meta.devServer;\n  if (devServer != null) {\n    const qs = new URLSearchParams();\n    qs.set('filename', filename);\n    qs.set('env', environmentName);\n    return devServer + '/__parcel_source_map?' + qs.toString();\n  }\n  return null;\n}\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: string,\n  exportName: string,\n): (...A) => Promise<T> {\n  return createServerReferenceImpl(\n    id + '#' + exportName,\n    noServerCall,\n    undefined,\n    findSourceMapURL,\n    exportName,\n  );\n}","sourceCodeStart":33,"sourceCodeEnd":69,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js#L33-L69","documentation":"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.","triggerScenarios":"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.","commonSituations":"Rendering the Flight payload on an edge worker (SSR) where components invoke passed-down actions during render; porting fetch-in-render patterns to RSC.","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"],"exampleFix":"// before — action called while rendering on the edge\n'use client';\nexport default function Counter({onUpdate}) {\n  onUpdate(); // server reference invoked during render -> throws\n  return <button>count</button>;\n}\n\n// after — invoke from an event handler\n'use client';\nexport default function Counter({onUpdate}) {\n  return <button onClick={() => onUpdate()}>count</button>;\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// render code: if (isServerReference(fn)) only invoke from event handlers or effects","tryCatchPattern":"try {\n  const root = createFromReadableStream(stream, manifest);\n} catch (e) {\n  if (/fetch waterfall/.test(e.message)) {\n    // move the server-function call out of render into an event handler\n  }\n  throw e;\n}","preventionTips":["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"],"tags":["react-server-components","server-actions","edge","render","fetch-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"}