What Is Streaming In The App Router?

Question: What is streaming in the App Router

Answer: Streaming is a feature that doesn't get a lot of attention, but is most likely the #1 reason you want to use the App Router to serve your pages.

We can think of data on a web page in one of two categories; critical and non-critical. Critical data is the the data that has to be on the page before the customer sees the page. Non-critical data is stuff that we can load later once it's available.

Take a product detail page in an e-Commerce appliation. The critical data is information about the product itself, the price, description, product image URLs, shipping details, etc. Non-critical data might be the customer reviews or the content of the navigation bar that drops down from the main or side navigation.

With the Pages Router we had no choice between critical and non-critical data, we had to get all the data on the server before we could render the page at all. Or we had to load that data from the client. So in this e-Commerce example we might get all the product data on the server so that it was rendered during Server Side Rendering. And we would get the reviews data in a client side request.

This has a couple of big disadvantages. First, the reviews data should be in the Server Side Rendered output so that it can be seen in search engines. Second, it's possible the reviews data might come back quickly, in which case we are doing extra API work from the client even if we don't need to.

The App Router takes a different model. With React Server Components each component requests it's own data. So the product detail components will request the product data and the reviews component will request it's own data seperately.

If a component is wrapped in a Suspense then it might be streamed to the client if the request is taking a while. If the request comes back quickly then it will just go out to the client as part of the initial page render. If a component is not wrapped in a Suspense then rendering will block on that component and the response won't start until the request completes.

In our e-Commerce example the product detail components would not be wrapped in a Suspense. The reviews component would be wrapped in a Suspense so that it could be streamed if the API is slow to respond.

It's important to understand how streaming works to fully appreciate its value. Streaming works by holding the connection open between the server and the client until all requests are resolved. So the server sends the initial page with all of the resolved data, then it holds the connection open while it waits for the Suspense sections to complete. On the client we see the fallback UI on these suspended sections. Then once the suspensed sections complete addition HTML and JavaScript is sent to the client to fill in these sections. Finally when all requests are resolved the connection is closed.

For SEO this means that, even when the response is streamed, all the HTML will be sent to the crawler in one response.

In the end streaming means a faster feeling site for the customer. If all of the data driven portions of the pages are streamed then the customer will be able to immediately navigate between pages and they will be presented with data as those requests complete.

If there are some critical sections of the page which are not streamed they will get the page once those critical requests are resolved, which is probably going to be faster than they would have gotten with the Pages Router where all the requests need to be resolved before the page is rendered.