Difference between SSR with streaming and new PPR
So today in react (often achieved through nextjs) we can use SSR to stream components onto the page and show a fallback while data is being fetched. I’m referring to the main concept in this explanation by Dan. (https://github.com/reactwg/react-18/discussions/37)
Server components are not even a part of this discussion - react can render a page on the server and use suspense to stream in pieces that may take longer. The alternative to this is just waiting for all of the page to be rendered after data is fetched which could result in a delay.
Now in NextJS, we have the idea of static and dynamic rendering. Static rendering happens at build time (or incrementally), and renders HTML that is served instantly from a CDN. No rendering is required at request time if a page is static. Dynamic rendering happens if any part of a page opts into dynamic behavior. So the page gets rendered every time a request comes in, and the user could be left waiting a while. If we go back to suspense, this helps set boundaries that can stream in when they are ready. Static parts of the dynamic page will still need to be rendered, right?
I’m trying to figure out what’s different about this dynamic rendering with suspense boundaries approach, and the new PPR pattern that will be released in the future.
https://nextjs.org/learn/dashboard-app/partial-prerendering
Any explanation or resources would really help as I’ve been confused on this all day.
GitHub
New Suspense SSR Architecture in React 18 · reactwg react-18 · Disc...
Overview React 18 will include architectural improvements to React server-side rendering (SSR) performance. These improvements are substantial and are the culmination of several years of work. Most...
Learn Next.js: Partial Prerendering | Next.js
An early look into Partial Prerendering and how it works.
4 Replies
Bump
Also linking this tweet for context
Joe Petrillo (@jpetrillo19) on X
@delba_oliveira Thx! So to be clear
1. Suspense around dynamic page: Server displays only fallback until entire page is done rendering?
2. Static + Suspense: We see static content + fallback first, then dynamic content streams in?
PPR is like 2, but does not have to re-render the static part?
Twitter
SSR with streaming, everything is generated at request time and sent to the client
PPR splits static content and dynamic content, serving the static content from a cdn-like layer, and streaming the dynamic content after
all of this is lag. just use https and write your backend in literally anything