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
summary
Upgrade the server to React 18 The method of version is as follows :
- install React 18 The latest version
- take
renderToString
Change it topipeToNodeWritable
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 newpipetonodewriteable
.
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.
https://en.qdmana.com/2021/08/20210827045628000z.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich