X (formerly Twitter) ·
This demo is named "how is this not illegal" after Dan Abramov's reaction to Server Components bringing a PHP-like simplicity to React. I turned on the `ppr` flag and I was able to simplify things further: ◆ No more `runtime` junk ◆ No more `dynamic` github.com/rauchg/how-is-…
Notice I added `headers()` specifically such that every single request gets fresh (random) Pokémon. This simulates user personalization, like rendering a logged-in profile pic, cart, recommendations. So… why is the TTFB so fast? Because the edge serves the shell of the page.
That "shell" got extracted automatically at build time, for each route. Upon a request, at the edge we flush that static prelude. Until now this is like typical CDN caching. The magic is that at the same time of flushing the static parts, we stitch a dynamic stream from origin
This solves a huge number of problems 🤯 ◆ Better DX: no thinking about runtimes ◆ Computing close the database ◆ No client data-fetching waterfalls ◆ Tiny client JS bundles ◆ Amortization of the "boot up" of dynamic parts ◆ PHP-style, secure server-side data fetching
Many moons ago, as we were designing ISR to try to preserve the "good parts" of static, I borrowed from compiler lingo to explain it as "static hoisting" Compilers *hoist* static parts out of hot paths, in a technique called loop-invariant code motion.
ISR, however, was still static… Just like `cache-control` The DX hurt. You needed to mix "data loaders" (`getServerSideProps`/`getStaticProps`) with `useFetch/SWR/Query`. But your business hurt more. Your users had to download lots of JS, fighting physics with data waterfalls.
This is without a doubt our largest framework *and* infrastructure breakthrough in many years. Thankful to the team especially
@sebmarkbageand
@cramforcefor getting in a significant pre-AGI human win in the books. Read more:
