One list of blog posts, rendered six different ways, so you can see how each rendering strategy behaves instead of reading about it.
This is the live demo for my case study on web rendering strategies. Every page shows the same five posts. What changes is where and when the HTML gets made: on the server or in your browser, at build time or at request time.
There is no framework here. The server runs on Node's built-in http
module with zero npm dependencies, so each strategy is a short file you can read
from top to bottom.
Every page has a colored badge naming its strategy and an HTML generated at timestamp written into the HTML. That timestamp tells you when the server made the page. Whether it changes on refresh, and when, is the clearest difference between the strategies.
Refresh as often as you like. The timestamp never moves. The HTML was written once, when the site was last deployed, and the server just reads the file.
Refresh. A new timestamp every time. The server builds the page from scratch for each request.
Open View Source. The post list isn't in the HTML at all. Your browser runs a script, fetches /api/posts and builds the list itself.
Refresh a few times over about 20 seconds. The timestamp holds for 10 seconds. The first refresh after that still gets the old page but starts a rebuild in the background; the next one gets the new page. The X-ISR-Status response header tells you which case you hit.
Refresh and watch the Trending box. The page appears at once with a frozen timestamp. Two seconds later the box fills in with a time that changes on every request. Both parts come down in one response.
Open it next to PPR and refresh both. Same delivery as PPR, but here both timestamps change, because the server renders the shell for each request instead of reading it from disk.
The PPR and streaming pages send their HTML in two chunks over one connection.
A browser hides that, but curl shows it: the page prints, pauses
for two seconds, then the rest arrives.
curl -N https://rendering.atharvdange.com/ppr
X-Accel-Buffering: no so nginx passes each chunk through as it comes.