React Server Components (RSC) React Server Components (RSC)

  • Official address: www.youtube.com/watch?v=TQQ…

This document looks at what we can do around the RSC and how we can use the RSC to optimize project performance. Of course, at this stage there is no official release and technical details can change at any time, so it is not recommended to put this into production.

Operation principle

Operation process

  • The service start
  • The runtime

The service start

As you can see from the figure above, the start:dev command executes two commands in parallel:

  • NPM run server:dev: Run api.server.js to start the Express server.
  • NPM run bundler:dev: packages the client code.

The ReactServerWebpackPlugin plugin is also used to package the client code. It iterates through all of the project is the function of XXX. Client. Js | JSX client components (React to form such as XXX. Client. Js | JSX file agreement for client component, XXX. Server js | JSX conventions for server-side components, agreed without the suffix for sharing components), Package the corresponding chunk files, the purpose of these files will be explained later.

Packaged products are as follows:

The runtime

Loading process

The JSON data returned by the interface is essentially a plain string formatted with the newline \n character. Each row is an independent data unit that follows a common data structure:

'${data type}${data unit ID}:${parsed JSON sequence}'Copy the code

The main part here is the data type, and different rendering processes are performed for different data types

The chunk reference information of the M-Client component is returned by the client component when the server component references the client component, which is the result of the server rendering of the extra packaged clientx.main.js mentioned above. Will be the react - server - the dom - webpack resolves to react element and then render the S - Suspense E - service side rendering process of error information, will be the react - server - the dom - webpack parsing out, And display it using the component's FallbackComponent(<Error /> component).Copy the code
Update process

For the server, the request processing process is the same each time, the difference is mainly in the client processing process:

  • When the browser parses jSON-like data, if the bundle of a client component has already been loaded, the browser does not request the bundle again
  • In the interface reconciliation phase, there is a behavior called Reconciles that aims to minimize DOM manipulation while also preserving the UI state of the page, such as the focus state of the input box.

Advantages and disadvantages analysis

Before using RSC, we need to understand its current advantages over other rendering methods such as CSR, SSR, etc., as well as its current problems.

advantage

  • Performance improvement
    • Solve the problem of request waterfall flow, improve rendering efficiency
  • Optimize packing volume, improve packing and loading speed
  • Automatic code segmentation, load on demand
  • Experience ascension
    • Solve the problem of SSR state loss
  • Streaming rendering is the default and can be combined with Suspense to reduce white screen wait time
  • Accessing server Resources
    • Accessing the database
  • Accessing internal services
  • Accessing the file system

disadvantages

  • Development costs
    • Components need to be jointly managed on the client and server, resulting in high coupling and high maintenance cost
  • Debugging is tedious
  • Some client capabilities are not available in this scenario, such as component state, event listeners, and so on
  • When a server component references a client component, props cannot pass function parameters
  • Since the RSC is stateless, there is an additional mental burden on state management.
  • The user experience
    • SEO cannot be optimized, so use scenarios are limited

Conclusion the analysis

Based on the above analysis of the advantages and disadvantages of RSC, it can be found that RSC is obviously optimized for user experience, but to some extent, it also increases the development cost and maintenance cost of developers. According to the above conclusions, except for some scenarios with high performance requirements, RSC at the business level is not recommended to be used on a large scale. Then, how should we use such a technology to ensure maximum benefits?

Sample scenario

The following example is a standalone deployment of server components to explore the possibility of providing server components independently. Official example reference: github.com/reactjs/ser…

Time format processing

  1. The server exposes the interface /formatDate

  1. Write the server component

  1. Client use

  1. Page rendering results

Server data request display

I won’t go into client details here

  1. Server exposed interface /filminfo
  2. Server component

  1. Page rendering results

Image with logo watermark

The server downloads the incoming image, adds the logo, and renders it back

Page rendering results

Application Scenario Analysis

Common component library

The UI component class used in the project can be separated from part of the display class component to use RSC implementation, providing an independent interface open to the outside world

Toolclass component

Taking advantage of RSC’s ability to introduce dependency packages on the server side, we can implement the components of utility classes using RSC to reduce the packaging volume. Examples include a time-format processing class component, a component that parses MD to an HTML string in the official example, and so on

Data presentation class component

List/detail display class components, data requests in the RSC, reduce client TCP connection

The component market

Users can use existing components or custom uploaded components in the market, similar to the NPM hosting model, forming the RSC market ecosystem