编程知识 cdmana.com

"Heavyweight" react server components

background

2020.12.21 Number , Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbåge Co released a React new function :

React Server Components

And organized a keynote speech :

Introducing Zero-Bundle-Size React Server Components.

https://www.youtube.com/watch?v=TQQPAU21ZUw

Interested students can go to see .

What needs to be stated in advance is :

  • React Server Components It's still under development .
  • In the spirit of transparency , Share the work , And expect to learn from React Initial feedback from the community .
  • There will be a lot of time to learn about this technology in the future , Now it's just a preliminary understanding , There's no need to dive into learning immediately .

If you want to learn this technology systematically , Suggested learning path :

  1. Watch the speech video
  2. Clone demo demo, It's convenient for you to explore React Server Components .
  3. read RFC( With... At the end FAQ) To get deeper technical failures and provide feedback .

OK, I don't say much nonsense , Let's go and uncover RSC The mysterious veil of .

Main contents of this paper :

  • RSC: Motivation and problem solving
  • RSC: What is it?
  • RSC: 0 Packing volume
  • RSC: Automatic code segmentation
  • RSC: Nature is close to the back end
  • Q & A

Text

First , Why do it RSC Well ?

There must be a reason for the appearance of a new thing .

Dan Abramov There are some explanations about this

Let's look at a few principles in software development :

  • Good
  • Cheap
  • Fast

Every vertex , It's all constrained by other highlights .

such as , We want low cost , I want to finish the development quickly , That may sacrifice the quality of the product to some extent .

So if we all want , So what should we do ?

That is to achieve the ideal appearance :

such as , We have a page like this :

Every page needs to use artistId To make some requests .

without doubt , This will generate a lot of requests ( Waterfall requests ), It increases the maintenance cost to a certain extent .

Well, at the expense of maintenance costs , Is there a solution ?

Of course there are , It is Relay + GraphQL.

### Relay + GraphQL

However , This combination doesn't apply to all situations , For example, some large companies or projects , Not to allow or use .

Looking back at our question again

Our problem is , If the component makes a request at the same time , There will be waterfall requests , Impact on user experience .

 Problems faced

Then if , These requests are processed before they are returned to the client , It's like using GraphQL The effect is the same .

In this way, the problem will be solved easily ?

 The ideal solution

Components with this capability , It's our main character today : React Server Components.

Can run on the server side React Components .

RSC Example

Pictured , App You need to show a NoteList:

List code :

But there is a sentence that needs attention :

import NoteList from './NoteList.client';

Client Component It's just plain React Components , It's just that .client ending .

The purpose is to tell React: This component Render only on the client side .

The code is as follows :

If you want to put the sideBar Make it RSC Components , Just write the corresponding client The code can be :

Full code address :

http://github.com/reactjs/ser...

If you are interested, you can download it and play with it .

0 Packing volume

such as , We're going to develop an editor application , Compared to some of the larger volumes of external code :

however , If this part is made of RSC Components , You can do that 0 Volume packing

Why? ?

Because this part is server Code for , It's not packaged in .

But the premise is , You need to plan out those are server Components , Which are the client components .

Automatic code segmentation

By using React.lazy Dynamic components can be implemented import.

Before , This requires us to switch components / Routing is performed manually . stay ServerComponent in , It's all done automatically .

In the diagram above , The list on the left is ServerComponent, When you click on one of the cards , The corresponding data of components will be loaded dynamically .

Nature is close to the back end

Here's one react-fetch, Not only can the client run , The server can also run !

So it can be called shared component.

Container components and interaction components

before , Our components are all client components .

According to the present division , That's in the future React In component tree , It must contain a lot of Client component and Server components , Pictured :

such , It is easy to execute the rendering logic of container components on the server side , Execute the rendering logic of the interactive component on the client side .

such as :

Render on the server ul The content in , and SearchInput Is responsible for the interaction in the client .

How many? React IO library

More progress

Q & A

See this , We have answers to a few questions :

  1. Q: Server Components What is it? :

    A: Can run on the server side React Components .

  2. Q: Server Components What problems have been solved ?

    A: Water Fall Requests.

  3. Q: Server Components Good news ?

    A: 0 Packing volume , Nature is close to the back end , Automatic code segmentation .

  4. Q: This and server rendering (SSR) What's the difference? ?

    A: comparison SSR Render the component to fill in the content on the server side HTML character string , And on the client side hydrate After use .

    Server Components More like our common components written on the client side , It's just that his operating environment is the server side .

  5. Q: Need to get started now ?

    A: Play by yourself demo Let's go first ~

Okay , That's all there is to it , It's one o'clock in the night , Good night, .

The data link

  1. https://www.youtube.com/watch...
  2. https://github.com/reactjs/se...
  3. https://github.com/reactjs/rf...

Pay attention to me

If you think it's enlightening , Then pay attention to me ~

 picture

More exciting :

Chat ESM、Bundleless 、Vite 、Snowpack

Remember a 「 Infinite list 」 Rolling optimization

「 Interview three board axe 」 And The code segment ( On )

「 Interview three board axe 」 Cache ( On )

「 Interview three board axe 」 Cache ( Next )

「 Interview three board axe 」 And HTTP ( On )

「 Interview three board axe 」 And HTTP ( Next )

「 Interview three board axe 」 And  this

版权声明
本文为[Pipiens]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224102527397e.html

Scroll to Top