Upgrading to React 18 on the server

An overview of the

Upgrade the server to React 18 as follows:

  • Install the latest React 18 version
  • willrenderToStringInstead ofpipeToNodeWritableUnlock new features

React 18 improves the SSR architecture to improve performance. As a result of the work of the past few years, these improvements are very useful.

API changes

React hasn’t always supported Suspense on the server side. This changes in React 18, with different apis chosen to support different levels of Suspense:

  • renderToStringSuspense: Can run (limited support)
  • renderToNodeStreamSuspense: Not recommended (fully supported, stream not included)
  • pipeToNodeWritable: The latest recommendedSuspense and Stream are fully supported

Existing API:renderToString(React.Node): string

The API can continue to be used, but it does not support new functionality, so we recommend switching to pipeToNodeWritable. Since it’s not deprecated, we can also continue to use renderToString.

In React 18, renderToString has very limited support for

functionality. Before this, using Suspense> throws an error. Starting with the React 18 version, we mark Suspense as “client-Rendered” and immediately trigger HTML rendered in the Fallback. Then, after the client loads the JS, it rerenders its contents. That is, if used in the outermost layer of the application and suspended during rendering, the application will opt out of server-side rendering.

This change doesn’t affect existing applications because Suspense didn’t work at all on the server before. However, if you render

on the client in conditional hover mode, you may have its content removed from the DOM because the conditions don’t match. On both the server and client, conditions are used to render different content for the first time, which is not supported on React.

Note: This behavior isn’t very useful, but it’s the best we can do because renderToString is synchronous. It can’t “wait” for anything. That’s why we recommend using the new PipetonodeWriteable.

Abandoned API:renderToNodeStream(React.Node): Readable

In React 18, renderToNodeStream is not recommended at all; it emits warnings. This was the first streaming API we added, but it was very underpowered (unable to wait for data). People don’t use it very often. It works in the React 18 version, including the new Suspense feature mentioned below, but it will buffer the entire content until the stream ends. In other words, it does not stream any more. Makes its use confusing, which is why it’s not recommended.

We’re replacing it with pipeToNodeWritable.

Recommend the API:pipeToNodeWritable(React.Node, Writable, Options): Controls

This is our recommended API for the future, which supports all the new features:

  • Full built-in support (integrated data capture functionality)
  • uselazyDo code segmentation, there will be no content “disappeared” flash screen
  • The delayed content in the HTML stream will be displayed later

In the latest Alpha release, it can be used like this:

import { pipeToNodeWritable } from 'react-dom/server';
Copy the code

Unlike renderToString(), pipeToNodeWritable() requires more code configuration. We have prepared an example that shows how to change code from using renderToString() to pipeToNodeWritable(). We will provide more detailed documentation later, and we can use the example above to explore.

If you want to learn more about what the API unlocked, you can readNew SSR Suspense Architecture.

This API is not integrated with data Fetching. Suspense’s commonly used mechanics all work well. However, we currently have no recommendations on how to pre-populate the cache when data is transferred from the server to the client. We hope to be able to provide more guidance in the future.

There are still some questions that you need to try. For example, how to handle the

tag. Because this is a true streaming API, there may not be an “ideal” title when streaming begins. There are plenty of solutions you can try, but we’ll be curious to see if you find the one that works best when you use the API in your application and try different approaches.

Other apis

There are also several related apis for generating static tags. Their functions are as follows:

  • renderToStaticMarkupSuspense: Continue to use (limited support)
  • renderToStaticNodeStreamSuspense: Not recommended (fully supported, stream not included)

The recommended new API corresponding to pipeToNodeWritable has not been added to them.

Search ikoofe on wechat, and the public account “KooFE Front-end team” releases front-end technology articles from time to time.