current position:Home>React 18 server upgrade

React 18 server upgrade

2021-08-27 04:56:31 KooFE

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


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 .

copyright notice
author[KooFE],Please bring the original link to reprint, thank you.

Random recommended