react-server-dom-webpack

What is react-server-dom-webpack?

The react-server-dom-webpack package is designed to enable Server-Driven Rendering (SDR) with React. It allows you to render React components on the server and send them to the client as a stream, which can then be hydrated on the client side. This approach can improve performance and user experience by allowing the server to handle the initial rendering and the client to take over once the initial HTML is loaded.

What are react-server-dom-webpack's main functionalities?

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 />);

Other packages similar to react-server-dom-webpack

next

Next.js is a popular React framework that provides server-side rendering and static site generation out of the box. It offers a more comprehensive solution compared to react-server-dom-webpack, including routing, API routes, and more.

gatsby

Gatsby is a React-based framework for building static sites. It focuses on performance and offers a rich plugin ecosystem. Unlike react-server-dom-webpack, Gatsby is primarily geared towards static site generation rather than server-driven rendering.

react-snap

React Snap is a pre-rendering solution for React apps that uses headless Chrome to generate static HTML files. It is simpler to set up compared to react-server-dom-webpack but does not offer the same level of server-driven rendering capabilities.

README

react-server-dom-webpack

Experimental React Flight bindings for DOM using Webpack.

Use it at your own risk.