{"library":"react-server-dom-turbopack","title":"React Server Components for Turbopack","description":"react-server-dom-turbopack provides the foundational bindings for integrating React Server Components (RSC) with Turbopack, a high-performance build system. It is specifically designed as a low-level API for meta-frameworks (e.g., Next.js) to manage the serialization and deserialization of RSC payloads between server and client, enabling features like streaming and Server Actions. This package is not intended for direct consumption by application developers, but rather as an internal dependency within frameworks. The current stable version is 19.2.5, aligning with React's release cycle, which sees frequent updates, often including security hardening and performance improvements related to RSC and Server Actions. Its key differentiator is its tight integration with Turbopack for optimal performance in environments leveraging that build tool.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-server-dom-turbopack"],"cli":null},"imports":["import { createFromReadableStream } from 'react-server-dom-turbopack/client';","import { decodeReply } from 'react-server-dom-turbopack/client';","import { renderToPipeableStream } from 'react-server-dom-turbopack/server';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"/* This quickstart illustrates how a meta-framework *might* conceptually use\n * react-server-dom-turbopack. Application developers should NOT use this directly.\n * Instead, use a framework like Next.js that integrates React Server Components.\n */\n\n// Conceptual server-side rendering setup (framework-level)\nimport { renderToPipeableStream } from 'react-server-dom-turbopack/server';\n\nasync function serveReactServerComponent(req, res) {\n  const Component = () => {\n    // This would be a React Server Component in a real framework setup\n    return <h1>Hello from a Server Component!</h1>;\n  };\n\n  const { pipe } = renderToPipeableStream(<Component />);\n  res.setHeader('Content-Type', 'text/x-component');\n  pipe(res);\n}\n\n// Conceptual client-side hydration (framework-level)\nimport { createFromReadableStream } from 'react-server-dom-turbopack/client';\n\nasync function hydrateClientComponent() {\n  const response = await fetch('/rsc-payload'); // Imagine fetching the RSC payload\n  const stream = response.body;\n\n  if (!stream) {\n    throw new Error('Response body is not a readable stream.');\n  }\n\n  const { default: ServerComponent } = createFromReadableStream(stream);\n  // In a real framework, this 'ServerComponent' would be rendered into the DOM\n  // using ReactDOM.createRoot().render(<ServerComponent />);\n  // For this conceptual example, we'll just log its existence.\n  console.log('Server component received and ready for hydration:', ServerComponent);\n}\n\n// Example usage simulation (not runnable as a standalone app)\n// serveReactServerComponent(mockRequest, mockResponse);\n// hydrateClientComponent();\nconsole.log('This code illustrates framework-level integration and is not for direct use.');","lang":"typescript","description":"Illustrates the conceptual usage of `renderToPipeableStream` on the server and `createFromReadableStream` on the client, as a meta-framework would implement it. This is NOT for direct application use.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}