ReactDOMServer

Mit dem ReactDOMServer-Objekt können Komponenten als statisches Markup gerendert werden. Normalerweise wird es auf einem Node-Server verwendet:

// ES modules
import * as ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');

Übersicht

These methods are only available in the environments with Node.js Streams:

renderToPipeableStream()
renderToNodeStream() (Deprecated)
renderToStaticNodeStream()

These methods are only available in the environments with Web Streams (this includes browsers, Deno, and some modern edge runtimes):

renderToReadableStream()

The following methods can be used in the environments that don’t support streams:

renderToString()
renderToStaticMarkup()

Diese zusätzlichen Methoden benötigen ein Package (stream), das nur auf dem Server verfügbar ist und im Browser nicht funktionieren wird:

renderToPipeableStream()
renderToReadableStream()
renderToNodeStream() (Deprecated)
renderToStaticNodeStream()

Referenz

`renderToString()`

ReactDOMServer.renderToString(element)

Rendert ein React-Element initial als HTML. React gibt einen HTML-String zurück. Du kannst diese Methode verwenden, um HTML auf dem Server zu generieren und beim ersten Request das Markup zurückzusenden, damit die Seite schneller lädt und Suchmaschinen zu SEO-Zwecken deine Seiten crawlen können.

Wenn du auf einen Knoten, der bereits dieses server-gerenderte Markup hat, ReactDOM.hydrateRoot() aufrufst, wird React das Markup behalten und nur Eventhandler hinzufügen. Das ermöglicht ein sehr schnelles erstes Laden der Seite.

Referenz

`renderToPipeableStream()`

ReactDOMServer.renderToPipeableStream(element, options)

Render a React element to its initial HTML. Returns a stream with a pipe(res) method to pipe the output and abort() to abort the request. Fully supports Suspense and streaming of HTML with “delayed” content blocks “popping in” via inline <script> tags later. Read more

If you call ReactDOM.hydrateRoot() on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

let didError = false;
const stream = renderToPipeableStream(
  <App />,
  {
    onShellReady() {
      // The content above all Suspense boundaries is ready.
      // If something errored before we started streaming, we set the error code appropriately.
      res.statusCode = didError ? 500 : 200;
      res.setHeader('Content-type', 'text/html');
      stream.pipe(res);
    },
    onShellError(error) {
      // Something errored before we could complete the shell so we emit an alternative shell.
      res.statusCode = 500;
      res.send(
        '<!doctype html><p>Loading...</p><script src="clientrender.js"></script>'
      );
    },
    onAllReady() {
      // If you don't want streaming, use this instead of onShellReady.
      // This will fire after the entire page content is ready.
      // You can use this for crawlers or static generation.

      // res.statusCode = didError ? 500 : 200;
      // res.setHeader('Content-type', 'text/html');
      // stream.pipe(res);
    },
    onError(err) {
      didError = true;
      console.error(err);
    },
  }
);

See the full list of options.

Note:

This is a Node.js-specific API. Environments with Web Streams, like Deno and modern edge runtimes, should use renderToReadableStream instead.

`renderToReadableStream()`

ReactDOMServer.renderToReadableStream(element, options);

Streams a React element to its initial HTML. Returns a Promise that resolves to a Readable Stream. Fully supports Suspense and streaming of HTML. Read more

let controller = new AbortController();
let didError = false;
try {
  let stream = await renderToReadableStream(
    <html>
      <body>Success</body>
    </html>,
    {
      signal: controller.signal,
      onError(error) {
        didError = true;
        console.error(error);
      }
    }
  );

  // This is to wait for all Suspense boundaries to be ready. You can uncomment
  // this line if you want to buffer the entire HTML instead of streaming it.
  // You can use this for crawlers or static generation:

  // await stream.allReady;

  return new Response(stream, {
    status: didError ? 500 : 200,
    headers: {'Content-Type': 'text/html'},
  });
} catch (error) {
  return new Response(
    '<!doctype html><p>Loading...</p><script src="clientrender.js"></script>',
    {
      status: 500,
      headers: {'Content-Type': 'text/html'},
    }
  );
}

See the full list of options.

Note:

This API depends on Web Streams. For Node.js, use renderToPipeableStream instead.

`renderToNodeStream()` (Deprecated)

ReactDOMServer.renderToNodeStream(element)

Rendert ein React-Element initial als HTML. Gibt einen Readable stream zurück, dessen Ausgabe ein HTML-String ist. Die HTML-Ausgabe dieses Streams ist exakt die gleiche wie die von ReactDOMServer.renderToString. Du kannst diese Methode verwenden, um HTML auf dem Server zu generieren und beim ersten Request das Markup zurückzusenden, damit die Seite schneller lädt und Suchmaschinen zu SEO-Zwecken deine Seiten crawlen können.

Hinweis:

Nur für den Server. Diese API ist im Browser nicht verfügbar.

Die Stream-Ausgabe dieser Methode gibt einen utf-8 kodierten Bytestream zurück. Falls du einen anders kodierten Stream benötigst, schau dir z. B. das Projekt iconv-lite an, das Transformationsstreams bereitstellt, um Text umzukodieren.

`renderToStaticNodeStream()`

ReactDOMServer.renderToStaticNodeStream(element)

Ähnlich wie renderToNodeStream, außer dass es keine extra React-internen DOM-Attribute wie z. B. data-reactroot generiert. Das ist nützlich, wenn du React dazu verwenden willst, eine einfache statische Seite zu generieren, denn ohne diese extra Attribute können einige Bytes gespart werden.

Die HTML-Ausgabe dieses Streams ist exakt die gleiche wie die von ReactDOMServer.renderToStaticMarkup.

Falls du planst, auf dem Client React zu benutzten, um das Markup interaktiv zu gestalten, solltest du diese Methode nicht benutzen. Verwende stattdessen renderToNodeStream auf dem Server und ReactDOM.hydrateRoot() auf dem Client.

Hinweis:

Nur für den Server. Diese API ist im Browser nicht verfügbar.

Die Stream-Ausgabe dieser Methode gibt einen utf-8 kodierten Bytestream zurück. Falls du einen anders kodierten Stream benötigst, schau dir z. B. das Projekt iconv-lite an, das Transformationsstreams bereitstellt, um Text umzukodieren.

`renderToString()`

ReactDOMServer.renderToString(element)

Note

This API has limited Suspense support and does not support streaming.

On the server, it is recommended to use either renderToPipeableStream (for Node.js) or renderToReadableStream (for Web Streams) instead.

`renderToStaticMarkup()`

ReactDOMServer.renderToStaticMarkup(element)

Ähnlich wie renderToString, außer dass es keine extra React-internen DOM-Attribute wie z. B. data-reactroot generiert. Das ist nützlich, wenn du React dazu verwenden willst, eine einfache statische Seite zu generieren, denn ohne diese extra Attribute können einige Bytes gespart werden.

Falls du planst, auf dem Client React zu benutzten, um das Markup interaktiv zu gestalten, solltest du diese Methode nicht benutzen. Verwende stattdessen renderToString auf dem Server und ReactDOM.hydrateRoot() auf dem Client.

Ist diese Seite hilfreich?Bearbeite diese Seite

Übersicht

Referenz

renderToString()

Referenz

renderToPipeableStream()

renderToReadableStream()

renderToNodeStream() (Deprecated)

renderToStaticNodeStream()

renderToString()

renderToStaticMarkup()

`renderToString()`

`renderToPipeableStream()`

`renderToReadableStream()`

`renderToNodeStream()` (Deprecated)

`renderToStaticNodeStream()`

`renderToString()`

`renderToStaticMarkup()`