#Trying to understand React 18 server

1 messages · Page 1 of 1 (latest)

jolly matrix
lofty mesaBOT
#

Hi @jolly matrix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Sorry @jolly matrix, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

jolly matrix
#

I read a bunch of articles and tried to connect things together. So here's a summary of what I think holds truth. I'd appreciate corrections and feedback:

The current generation of meta frameworks (Remix, NextJS) for web development aims to provide a better user experience to end-users with smaller times for FCP (first contentful paint) and TTI (time to interactive), among other things. The first improvement made was moving away from a SPA (single-page application) architecture, which used to send an empty div and then build the UI using JavaScript. Instead, the framework now provides a "First Paint" with the UI, so that the user can see something while waiting for the JS to build the UI. This resulted in an improvement in the FCP.

Now, with React Server Components, the goal is to reduce the TTI. React components (JSX) provide a declarative way to write React code that constructs the VDOM. Rather than building the VDOM on the client, it can now be built on the server. However, this alone does not provide much performance improvement, as it is just moving the processing from the client to the server.

The benefit of React Server Components is that it enables the following optimisations, which ultimately lead to improved performance:

  1. Send only the necessary React components to the client at any given time, rather than all of them at once. This was already possible to some extent with code splitting in pure JS.

  2. Use streaming to send the React components, instead of the traditional "HTTP request-response" approach. Streaming means that the VDOM of a page can be split into small chunks and sent gradually, showing "suspense loading states" in the holes of the VDOM that are waiting to be filled. This provides a better user experience, as the user can start interacting with the page before it is fully loaded.
    These two optimizations are the basics and are 100% React.