Server-side rendering (abbreviated to “SSR” in this article) lets you generate HTML from the React component on the server and send that HTML to your users. SSR allows your users to see the content of a page before your JavaScript package loads and runs.

SSR in React always occurs in several steps:

  • On the server, get the data for the entire application.
  • Then, on the server, render the entire application as HTML and send it to the response.
  • Then, on the client side, load the JavaScript code for the entire application.
  • Then, on the client side, the JavaScript logic is connected to the server-generated HTML of the entire application (this is “Chocolate”).

The key part is that every step of the entire application must be completed immediately before the next step can begin. If some parts of your application are slower than others, this is inefficient, as is almost every non-trivial application.

In Suspense 18, you can use Suspense> to break your application into smaller, independent units that will complete these steps independently of each other without blocking the rest of the application. As a result, users of your application will see the content faster and be able to start interacting with it faster. The slowest part of the application does not drag down the fast part. These improvements are automatic, and you don’t need to write any special coordination code for them to work.

What is SSR?

When a user loads your application, you want to display a fully interactive page as soon as possible:

The illustration uses green to indicate that these parts of the page are interactive. In other words, all of their JavaScript event handlers are attached, buttons can be clicked to update status, and so on.

However, the page cannot interact until the JavaScript code is fully loaded. This includes React itself and your application code. For non-trivial applications, most of the load time will be spent downloading your application code.

If you don’t use SSR, the user will only see a blank page when the JavaScript loads:

That’s not very good, that’s why we recommend using SSR. SSR allows you to render the React component on the server as HTML and send it to the user. HTML is not very interactive (except for simple built-in Web interactions such as links and form entry). However, it lets the user see something while the JavaScript is still loading:

Here, gray indicates that these parts of the screen have not yet fully interacted. The JavaScript code for your application has not yet loaded, so clicking the button does nothing. But especially for sites with a lot of content, SSR is useful because it allows users with poor connections to start reading or viewing content while JavaScript loads.

When React and your application code both load, you want the HTML to interact. You tell React: “This is the component where the App generates this HTML on the server. Attach an event handler to the HTML!” React will render your component tree in memory, but instead of generating DOM nodes for it, it will append all the logic to the existing HTML.

The process of rendering components and attaching event handlers is called hydration. This is like drenching “dry” HTML with the “water” of interactivity and event handlers. (Or at least, that’s how I explain the term to myself.)

After hydration, it is “reactive as usual” : your component can be set to state, respond to clicks and so on:

You can see that SSR is a kind of “magic”. It won’t make your applications fully interactive any faster. Instead, it lets you display the non-interactive version of your application faster so that users can view static content while waiting for JS to load. However, the trick had a huge impact on people with poor Internet connections and improved overall perceptual performance. It can also help you with search engine rankings due to easier indexing and faster speeds.

Note: Do not confuse SSR with server components. The server component is a more experimental feature that is still being researched and may not be part of the original React 18 release. You canHere,Learn about server components. Server components are complementary to SSR and will be part of the recommended data acquisition method, but they are irrelevant in this article.

React 18: Streaming HTML and selective hydration

Suspense unlocked React 18 has two main SSR features:

  • **** on the serverStreaming HTML up. To opt in, you need torenderToStringFrom the newpipeToNodeWritableMethod switches to the new method, like thisDescribed in the.
  • **** to the customerSelective waterCooperation with. To opt in to it, you need to be on the clientSwitch to thecreateRoot“And start using it<Suspense>.

To see what these features do and how they solve the above problems, let’s return to our example.

Stream the HTML before fetching all the data

Using today’s SSR, rendering HTML and hydration is “all or nothing”. First render all HTML:

<nav> <! --NavBar --> <a href="/">Home</a> </nav> <aside> <! -- Sidebar --> <a href="/profile">Profile</a> </aside> <article> <! -- Post --> <p>Hello world</p> </article> <section> <! -- Comments --> <p>First comment</p> <p>Second comment</p> </section> </main>Copy the code

The client finally receives it:

Then load all the code and water the entire application:

But React 18 gives you a new possibility. You can use part of the wrap page to

.

For example, let’s wrap the comment block and tell React that React should display the
component before it’s ready:

  <NavBar />
  <Sidebar />
  <RightPane>
    <Post />
    <Suspense fallback={<Spinner />}>
      <Comments />
    </Suspense>
  </RightPane>
</Layout>

Copy the code

The client finally receives it:

Then load all the code and water the entire application:

But React 18 gives you a new possibility. You can use part of the wrap page to

.

For example, let’s wrap the comment block and tell React that React should display the
component before it’s ready:

  <NavBar />
  <Sidebar />
  <RightPane>
    <Post />
    <Suspense fallback={<Spinner />}>
      <Comments />
    </Suspense>
  </RightPane>
</Layout>

Copy the code

By wrapping

into Suspense>, we tell React that it doesn’t need to wait for Comments to start streaming HTML for the rest of the page. Instead, React will send placeholders (a spinner) instead of comments:

Comments are now not found in the original HTML:

<nav> <! --NavBar --> <a href="/">Home</a> </nav> <aside> <! -- Sidebar --> <a href="/profile">Profile</a> </aside> <article> <! -- Post --> <p>Hello world</p> </article> <section id="comments-spinner"> <! -- Spinner --> <img width=400 src="spinner.gif" alt="Loading..." /> </section> </main>Copy the code

The story doesn’t end there. When the comment data is ready on the server, React sends additional HTML to the same stream with a minimal inline 

<! -- Comments --> <p>First comment</p> <p>Second comment</p> </div> <script> // This implementation is slightly simplified  document.getElementById('sections-spinner').replaceChildren( document.getElementById('comments') ); </script>Copy the code

From github.com/reactwg/rea…