React 18 server upgrade

This article comes from translation Upgrading to React 18 on the server

summary

Upgrade the server to React 18 The method of version is as follows ：

• install React 18 The latest version
• take renderToString Change it to pipeToNodeWritable Unlock new features

React 18 Improved SSR Architecture to improve performance . As a result of these years' work , These improvements are very useful .

API change

all the time ,React The server does not support Suspense. This is in React 18 Change in , Choose different API To support different levels of Suspense：

• renderToString: Be able to run ( Limited support Suspense)
• renderToNodeStream: Not recommended ( Fully support Suspense, barring stream)
• pipeToNodeWritable: The latest recommendation ( Fully support Suspense and stream)

existing API: renderToString(React.Node): string

This API Can continue to be used , But it does not support new features , So we recommend switching to pipeToNodeWritable. Because it has not been abandoned , We can also continue to use renderToString.

stay React 18 in ,renderToString Very limited support <Suspense> function . Before that , Use <Suspense> It throws an error . from React 18 Version start , We will Suspense Boundary marked as "client-rendered", And immediately trigger rendering fallback Medium HTML. then , After loading on the client JS after , Will re render its contents . in other words , If used on the outermost layer of the application And hover in the rendering phase (suspend), This will cause the application to choose to exit the server-side rendering .

This change does not affect existing applications , Because it used to be on the server Suspense It doesn't work at all . however , If so Conditional hover rendering on the client <Suspense>, May occur because the conditions do not match , Cause its content from DOM Delete in . On the server and client , When rendering for the first time, different contents are rendered by conditions , This is in React I don't support it .

Be careful ： This behavior is not very useful , But it's already the best we can do , because renderToString It's synchronous . It can't “ wait for ” Anything . That's why we recommend the new pipetonodewriteable.

abandoned API: renderToNodeStream(React.Node): Readable

stay React 18 in , Not recommended at all renderToNodeStream, Use it to warn . This is the first streaming we added API, But its function is very insufficient （ Unable to wait for data ）. People don't often use it . It's in React 18 The version works , Including the following Suspense new function , But it will buffer the entire content until stream end . let me put it another way , It's not going to stream Processing operations . Makes its use more confusing , That's why it's not recommended .

We are using pipeToNodeWritable Instead of it .

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

This is what we recommend in the future API, It supports all new features ：

• Full built-in support （ Integrated data acquisition function ）
• Use lazy Do code segmentation , There will be no content “ disappear ” Bring the flash screen
• HTML stream The delayed content in will be shown later

In the latest Alpha In the version , You can use it like this ：

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

And renderToString() The difference is ,pipeToNodeWritable() Need more code configuration . We prepared an example , demonstration How to change code from using renderToString() Change to pipeToNodeWritable(). Later we will provide more detailed documentation , We can explore the above example first .

If you want to know more about this API Unlocked content , You can read New SSR Suspense Architecture.

This API No data has been obtained with (data fetching) Integrate .Suspense Common mechanisms can support and work normally . however , About how to pre populate the cache when data is transferred from the server to the client , At present, we have no relevant suggestions . We hope to provide more guidance in the future .

There are still some questions to try . for example , How to deal with it <title> label . Because this is a real streaming API, But at the beginning of stream processing , Maybe not yet “ Ideal ” The title of the . You can try many solutions , But what we're curious about , When you use this in your application API And try different methods , Finally find the most suitable solution .

other API

There are a couple of related ones API Used to generate static tags . Their functions are as follows ：

• renderToStaticMarkup: Continue to use （ Limited support Suspense）
• renderToStaticNodeStream: Not recommended （ Fully support Suspense, barring stream）

They have not been added with pipeToNodeWritable Corresponding recommended new API.

---

WeChat search ikoofe, Official account 「KooFE The front-end team 」 Publish front-end technical articles from time to time .