mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
2c7dea7365
During server rendering, a visible Offscreen subtree acts exactly like a fragment: a pure indirection. A hidden Offscreen subtree is not server rendered at all. It's ignored during hydration, too. Prerendering happens only on the client. We considered prerendering hidden trees on the server, too, but our conclusion is that it's a waste of bytes and server computation. We can't think of any compelling cases where it's the right trade off. (If we ever change our mind, though, the way we'll likely model it is to treat it as if it's a Suspense boundary with an empty fallback.)
react-dom
This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as react to npm.
Installation
npm install react react-dom
Usage
In the browser
import { createRoot } from 'react-dom/client';
function App() {
return <div>Hello World</div>;
}
const root = createRoot(document.getElementById('root'));
root.render(<App />);
On the server
import { renderToPipeableStream } from 'react-dom/server';
function App() {
return <div>Hello World</div>;
}
function handleRequest(res) {
// ... in your server handler ...
const stream = renderToPipeableStream(<App />, {
onShellReady() {
res.statusCode = 200;
res.setHeader('Content-type', 'text/html');
stream.pipe(res);
},
// ...
});
}
API
react-dom
See https://reactjs.org/docs/react-dom.html
react-dom/client
See https://reactjs.org/docs/react-dom-client.html