react-server-dom-webpack

Server-Side Rendering

This feature allows you to render React components on the server side. The code sample demonstrates how to use ReactDOMServer to render a React component to a string.

const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');

const serverRender = () => {
  return ReactDOMServer.renderToString(<App />);
};

console.log(serverRender());

Streaming HTML to Client

This feature allows you to stream HTML content to the client. The code sample demonstrates how to use ReactDOMServer's renderToNodeStream method to stream a React component to the client using an Express server.

const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const stream = ReactDOMServer.renderToNodeStream(<App />);
  res.type('html');
  stream.pipe(res);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Hydration on Client Side

This feature allows the client to take over the server-rendered HTML and make it interactive. The code sample demonstrates how to use the hydrateRoot method from react-dom/client to hydrate a React component on the client side.

import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import App from './App';

hydrateRoot(document.getElementById('root'), <App />);