Upgrade to Pro — share decks privately, control downloads, hide ads and more …

🇺🇸 iJS San Diego 2024 (Keynote)

🇺🇸 iJS San Diego 2024 (Keynote)

Hydration, Islands, Streaming, Resumability… Oh My!

Our ecosystem can be overwhelming! First, we had the rise of SSR and SSG—and each had its own gigantic pile of frameworks and tools. Then partial hydration enabled us to hydrate only some of our components on the client, which we've seen in React Server Components.

But what about islands? Do they relate at all to Streaming SSR? Moreover, what is resumability, and why do I keep hearing about it? Oh, did anyone say rendering on the Edge?

Well… Many approaches are out there, and all of them argue that their philosophy is best. In this session, we’ll go over these architecture/rendering patterns, to help shed some light on how some are implemented and the concepts behind them.

Matheus Albuquerque

May 22, 2024
Tweet

More Decks by Matheus Albuquerque

Other Decks in Programming

Transcript

  1. This talk presents… ↝ The Past & The Future ↝

    Islands Architecture ↝ Resumability ↝ Streaming SSR + Selective Hydration ↝ React Server Components ↝ Closing Thoughts
  2. CGI SCRIPTING LANGUAGES ↝ LANGUAGES LIKE PERL AND PHP ALLOWED

    DEVELOPERS TO RENDER BACKEND DATA SOURCES INTO HTML ↝ DEVELOPERS WERE NOW ABLE TO BUILD DYNAMIC SITES AND SERVE REAL-TIME DATA, OR DATA FROM A DATABASE TO AN END USER
  3. CGI SCRIPTING LANGUAGES ↝ THESE WORKED ON THE SERVER BECAUSE

    SERVERS WERE THE POWERFUL PART OF THE NETWORK ↝ THE BROWSER'S JOB WAS LIMITED: INTERPRETING THE DOCUMENT AND SHOWING THE PAGE ↝ THIS SOLUTION WAS ALL ABOUT SHOWING INFORMATION, NOT INTERACTING WITH IT
  4. #eureka 💡 JavaScript and browsers got powerful = we could

    do a ton of fun things directly on the client.
  5. CLIENT - SIDE RENDERING • CSR ↝ YOU DON’T HAVE

    TO GO BACK TO THE SERVER FOR MORE REQUESTS ↝ YOU CAN CACHE THE CORE HTML AND JS BUNDLES ON A CDN ↝ AS THE WEB GOT MORE INTERACTIVE, CSR AND SPAS BECAME DEFAULT
  6. #gotcha 🥸 We now had to be mindful of how

    our apps would render on a phone on a bus in the city center. — THE FUTURE (AND THE PAST) OF THE WEB IS SERVER SIDE RENDERING • ANDY JIANG
  7. #eureka 💡 We now had to be mindful of how

    our apps would render on a phone on a bus in the city center. Back to the server! 🏃
  8. SERVER - SIDE RENDERING • SSR ↝ HTML IS READY

    TO BE DISPLAYED WHEN THE PAGE IS LOADED = HIGHER PERFORMANCE ↝ HTML IS NOT DEPENDENT ON THE END BROWSER = HIGHER COMPATIBILITY ↝ FOR INTERACTIVE WEBSITES, WE STILL NEED TO SEND JS (HYDRATION)
  9. #definition 🧐 Hydration is the process of attaching behavior to

    declarative content to make it interactive. — WHY PROGRESSIVE HYDRATION IS HARDER THAN YOU THINK • MIŠKO HEVERY
  10. HYDRATION: CHALLENGES ↝ ASSOCIATE DOM ELEMENTS WITH THEIR CORRESPONDING EVENT

    HANDLERS ↝ ONCE A USER EVENT TRIGGERS A HANDLER, WE NEED TO UPDATE THE STATE ↝ ONCE THE STATE UPDATES, THE FRAMEWORK NEEDS TO RECREATE THE COMPONENT HIERARCHY
  11. HYDRATION: ISSUES INITIAL REQUEST HTML ARRIVES VIEW PAINTED JAVASCRIPT ARRIVES

    JAVASCRIPT IS PARSED — RESUMABILITY, WTF? • RYAN CARNIATO 0
  12. HYDRATION: ISSUES GET HTML DOWNLOAD JS PARSE + EXECUTE JS

    RECOVER STATE + BIND LISTENERS 🟢 FAST (USUALLY)
  13. HYDRATION: ISSUES GET HTML DOWNLOAD JS PARSE + EXECUTE JS

    RECOVER STATE + BIND LISTENERS 🔴 SLOW (ON BAD NETWORK CONDITIONS)
  14. HYDRATION: ISSUES GET HTML DOWNLOAD JS PARSE + EXECUTE JS

    RECOVER STATE + BIND LISTENERS 🔴 SLOW (DEPENDING ON THE DEVICE AND AMOUNT OF JAVASCRIPT)
  15. HYDRATION: ISSUES RECOVER STATE + BIND LISTENERS 🔴 SLOW (DEPENDING

    ON THE AMOUNT OF DOM NODES TO BE TRAVERSED AND REFERENCES TO BE RE-BOUND TO LISTENERS)
  16. ISLANDS ARCHITECTURE ↝ SELECTIVELY, PROGRESSIVELY ENHANCING BITS OF SERVER-RENDERED HTML

    WITH CLIENT-SIDE JS ↝ SMALL, FOCUSED, CHUNKS OF INTERACTIVITY WITHIN SERVER-RENDERED WEB PAGES ↝ SINGLE APPLICATION IN CONTROL OF FULL-PAGE RENDERING → MULTIPLE ENTRY POINTS
  17. ISLANDS ARCHITECTURE ↝ THE SCRIPT FOR THE ISLANDS CAN BE

    DELIVERED AND HYDRATED INDEPENDENTLY, ALLOWING THE REST OF THE PAGE TO BE JUST STATIC HTML ↝ MORE SPECIFICITY AROUND HOW THE ENHANCEMENT OCCURS
  18. ISLANDS ARCHITECTURE ↝ STANDALONE: Astro, Iles, Qwik, Marko, Nano JSX,

    Capri ↝ PREACT: Fresh, preact-island, microsite ↝ SOLIDJS: Solid Start, isolid ↝ SVELTE: Elder.js
  19. ISLANDS ARCHITECTURE • MARKO ↝ STREAMING RENDERING + AUTOMATIC PARTIAL

    HYDRATION + COMPILER ↝ AUTOMATIC PARTIAL HYDRATION ALLOWS INTERACTIVE COMPONENTS TO HYDRATE THEMSELVES ↝ HYDRATION CODE IS ONLY SHIPPED FOR INTERACTIVE COMPONENTS
  20. ISLANDS ARCHITECTURE • ASTRO ↝ BY DEFAULT, SHIPS ZERO JAVASCRIPT

    ↝ EVERY ISLAND IS LOADED IN PARALLEL ↝ MULTI-FRAMEWORK: BUILD ISLANDS WITH REACT, PREACT, SVELTE, VUE, AND OTHERS ↝ YOU CAN SPECIFY THE LOADING STRATEGY FOR EACH ISLAND INDIVIDUALLY
  21. ISLANDS ARCHITECTURE • ASTRO - - - import MyReactComponent from

    ' . . /components/MyReactComponent.jsx'; - - - <MyReactComponent />
  22. ISLANDS ARCHITECTURE • ASTRO - - - import MyReactComponent from

    ' . . /components/MyReactComponent.jsx'; - - - <MyComponent client:load /> <MyComponent client:idle /> <MyComponent client:visible /> <MyComponent client:media={string} /> <MyComponent client:only={string} />
  23. ISLANDS ARCHITECTURE 🟢 REDUCES THE AMOUNT OF JAVASCRIPT CODE SHIPPED

    TO THE CLIENT 🟢 FASTER PAGE LOADS AND TIME TO INTERACTIVE (TTI) 🟢 KEY CONTENT IS AVAILABLE ALMOST IMMEDIATELY TO THE USER 🟢 STATIC CONTENT IS RENDERED ON THE SERVER = PAGES ARE SEO-FRIENDLY GREAT 🟡 HIGHLY INTERACTIVE PAGES WOULD PROBABLY REQUIRE THOUSANDS OF ISLANDS NOT GREAT
  24. ISLANDS ARCHITECTURE 🟢 REDUCES THE AMOUNT OF JAVASCRIPT CODE SHIPPED

    TO THE CLIENT 🟢 FASTER PAGE LOADS AND TIME TO INTERACTIVE (TTI) 🟢 KEY CONTENT IS AVAILABLE ALMOST IMMEDIATELY TO THE USER 🟢 STATIC CONTENT IS RENDERED ON THE SERVER = PAGES ARE SEO-FRIENDLY GREAT 🟡 HIGHLY INTERACTIVE PAGES WOULD PROBABLY REQUIRE THOUSANDS OF ISLANDS NOT GREAT
  25. #hotTake 🌶 A considerable part of the modern isomorphic landscape

    is built on the back of libraries that weren't initially created for server rendering.
  26. #definition 📖 Resumability is about pausing execution in the server

    and resuming execution in the client without having to replay and download all of the application logic. — RESUMABLE VS. HYDRATION, QWIK
  27. RESUMABILITY ↝ SOME WORK → PAUSE → RESUME ↝ USE

    WHAT HAPPENED DURING THE EXECUTION ON THE SERVER AND AVOID EXTRA WORK WHEN THE APPLICATION STARTS IN THE BROWSER ↝ ATTACHES GLOBAL EVENT HANDLERS AT STARTUP AND THEN ONLY RUNS THE NECESSARY CODE ON INTERACTION
  28. HYDRATION vs. RESUMABILITY ↝ EVENT HANDLER CREATION HAPPENS BEFORE THE

    EVENT IS TRIGGERED (EAGER) ↝ ALL POSSIBLE EVENT HANDLERS ARE CREATED AND REGISTERED (SPECULATIVE) ↝ CLIENT REDOES WORK ↝ REQUIRES THE FRAMEWORK TO DOWNLOAD AND EXECUTE THE COMPONENTS TO FIGURE OUT HIERARCHY HYDRATION ↝ EVENT HANDLER CREATION HAPPENS AFTER THE EVENT IS TRIGGERED (LAZY) ↝ ONLY TRIGGERED EVENTS ARE CREATED AND REGISTERED (AS-NEEDED) ↝ CLIENT DOESN'T REDO WORK (VIA DESERIALIZATION) ↝ REQUIRES ALL THE INFORMATION TO BE SERIALIZED IN THE HTML RESUMABILITY
  29. HYDRATION vs. RESUMABILITY ↝ EVENT HANDLER CREATION HAPPENS BEFORE THE

    EVENT IS TRIGGERED (EAGER) ↝ ALL POSSIBLE EVENT HANDLERS ARE CREATED AND REGISTERED (SPECULATIVE) ↝ CLIENT REDOES WORK ↝ REQUIRES THE FRAMEWORK TO DOWNLOAD AND EXECUTE THE COMPONENTS TO FIGURE OUT HIERARCHY HYDRATION ↝ EVENT HANDLER CREATION HAPPENS AFTER THE EVENT IS TRIGGERED (LAZY) ↝ ONLY TRIGGERED EVENTS ARE CREATED AND REGISTERED (AS-NEEDED) ↝ CLIENT DOESN'T REDO WORK (VIA DESERIALIZATION) ↝ REQUIRES ALL THE INFORMATION TO BE SERIALIZED IN THE HTML RESUMABILITY
  30. RESUMABILITY 🟢 STARTUP PERFORMANCE 🟢 RENDERING PERFORMANCE (ONLY CHANGED COMPONENTS

    NEED TO BE RE-RENDERED) 🟢 FINE-GRAINED LAZY-LOADING 🟢 PROGRESSIVE INTERACTIVITY GREAT 🟡 *PRELOAD CRITICAL PAGE INTERACTIONS 🟡 THE ONLY OPTION FOR DEVELOPERS TO LEVERAGE RESUMABILITY IS TO USE QWIK 🟡 TOO LITTLE DISCUSSION AVAILABLE ON THE IDEA NOT GREAT
  31. RESUMABILITY 🟢 STARTUP PERFORMANCE 🟢 RENDERING PERFORMANCE (ONLY CHANGED COMPONENTS

    NEED TO BE RE-RENDERED) 🟢 FINE-GRAINED LAZY-LOADING 🟢 PROGRESSIVE INTERACTIVITY GREAT 🟡 *PRELOAD CRITICAL PAGE INTERACTIONS 🟡 THE ONLY OPTION FOR DEVELOPERS TO LEVERAGE RESUMABILITY IS TO USE QWIK 🟡 TOO LITTLE DISCUSSION AVAILABLE ON THE IDEA NOT GREAT
  32. #hotTake 🌶 Qwik is an example of the outside of

    the box thinking that is sometimes required on the web.
  33. HYDRATION IN REACT: BEFORE ↝ HYDRATION COULD ONLY BEGIN AFTER

    THE ENTIRE DATA WAS FETCHED AND RENDERED ↝ USERS COULDN’T INTERACT WITH THE PAGE UNTIL HYDRATION WAS COMPLETE FOR THE WHOLE PAGE ↝ PARTS OF YOUR APP THAT LOAD FAST WOULD ALWAYS HAVE TO WAIT FOR THE SLOW ONES
  34. HYDRATION IN REACT: BEFORE FETCHING DATA (SERVER) RENDERING HTML (SERVER)

    LOADING CODE (CLIENT) HYDRATING TIME TO FIRST BYTE FIRST CONTENTFUL PAINT TIME TO INTERACTIVE
  35. STREAMING SSR + SELECTIVE HYDRATION TIME TO FIRST BYTE FIRST

    CONTENTFUL PAINT TIME TO INTERACTIVE […] FETCHING DATA (SERVER) RENDERING HTML (SERVER) HYDRATING LOADING CODE (CLIENT) […] […] […] […] […] […]
  36. STREAMING SSR + SELECTIVE HYDRATION ↝ REACT PRIORITIZES HYDRATING THE

    PARTS THAT THE USER INTERACTED WITH BEFORE THE REST ↝ COMPONENTS CAN BECOME INTERACTIVE FASTER BY ALLOWING THE BROWSER TO DO OTHER WORK AT THE SAME TIME AS HYDRATION
  37. STREAMING SSR + SELECTIVE HYDRATION ↝ REACT WON'T WAIT FOR

    HUGE COMPONENTS TO LOAD TO CONTINUE STREAMING HTML FOR THE REST OF THE PAGE ↝ WHEN THE HTML BECOMES AVAILABLE ON THE SERVER, IT WILL BE ADDED TO THE SAME STREAM ALONG WITH A SCRIPT TAG AND INSERTED IN THE RIGHT PLACE
  38. REACT SERVER COMPONENTS ↝ AHEAD-OF-TIME REACT RENDERING (DURING THE BUILD

    OR ON THE SERVER) ↝ A ROUTING PARADIGM INTEGRATED WITH DATA FETCHING AND BUNDLING ↝ UNRELATED TO SSR/HYDRATION
  39. REACT SERVER COMPONENTS ↝ ALMOST IDENTICAL TO HOW ISLANDS WORK

    ↝ “use client” MARKS A BOUNDARY BETWEEN TWO MODULE GRAPHS ↝ EACH COMPONENT DECIDES WHETHER TO BE A SERVER COMPONENT OR TO STICK WITH BEING A SERVER + CLIENT COMPONENT
  40. REACT SERVER COMPONENTS ↝ THE CODE FOR SERVER COMPONENTS IS

    NEVER DELIVERED TO THE CLIENT ↝ ACCESS TO THE BACK-END FROM THE TREE ↝ MAY BE REFETCHED WHILE MAINTAINING CLIENT-SIDE STATE INSIDE OF THE TREE
  41. REACT SERVER COMPONENTS 🟡 A LOT OF DATA TO SEND

    ALONG THE WIRE EVERY SERVER RE-RENDER 🟡 MUCH MORE ORCHESTRATION NEEDED 🟡 STILL EXPERIMENTAL 🟡 ONLY FEW OPTIONS FOR DEVELOPERS TO LEVERAGE RSC NOT GREAT 🟢 THE CODE FOR SERVER COMPONENTS IS NEVER DELIVERED TO THE CLIENT 🟢 ACCESS TO THE BACK-END FROM THE TREE 🟢 MAY BE REFETCHED WHILE MAINTAINING CLIENT-SIDE STATE INSIDE OF THE TREE GREAT
  42. CODE EXTRACTION: PRIOR ART < ! - - Database, file,

    and socket access from JavaScript - - > <script runat="server"> var resultSet = Jaxer.DB.execute("SELECT * FROM myTable"); var newPrice = resultSet.rows[0].price; </script> < ! - - Directly call server-side functions from the browser - - > <script runat="server-proxy"> function getPriceFromServer() { return 42; } </script> <button onclick="alert(getPriceFromServer())">Price</button> < ! - - Share validation code on the browser and server - - > <script runat="both"> function validateCreditCard(number) {} </script>
  43. CODE EXTRACTION: PRIOR ART < ! - - Database, file,

    and socket access from JavaScript - - > <script runat="server"> var resultSet = Jaxer.DB.execute("SELECT * FROM myTable"); var newPrice = resultSet.rows[0].price; </script> < ! - - Directly call server-side functions from the browser - - > <script runat="server-proxy"> function getPriceFromServer() { return 42; } </script> <button onclick="alert(getPriceFromServer())">Price</button> < ! - - Share validation code on the browser and server - - > <script runat="both"> function validateCreditCard(number) {} </script>
  44. HYDRATION STREAMING SSR ISLANDS RESUMABILITY SELECTIVE HYDRATION RSC CSR SSR

    STATIC RENDERING INCREMENTAL STATIC GENERATION PROGRESSIVE HYDRATION VIEW TRANSITIONS EDGE RENDERING SPA MPA PARTIAL HYDRATION
  45. HYDRATION STREAMING SSR ISLANDS RESUMABILITY SELECTIVE HYDRATION RSC CSR SSR

    STATIC RENDERING INCREMENTAL STATIC GENERATION PROGRESSIVE HYDRATION VIEW TRANSITIONS EDGE RENDERING SPA MPA PARTIAL HYDRATION
  46. CODE EXTRACTION import json from "./foo.json" with { type: "json"

    }; import ComponentA from "./A" with { type: "client" } import ComponentB from "./B" with { type: "both" }
  47. THE SOLUTION TO THE PROBLEM ONLY CHANGES THE PROBLEM. HYDRATION,

    ISLANDS, STREAMING, RESUMABILITY… OH MY! #1 of 8
  48. WHILE SEEN AS COMPETITIVE, A LOT OF THESE ARE ACTUALLY

    COMPLEMENTARY! — RYAN CARNIATO HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! #2 of 8
  49. 🏝 ISLANDS COMPETITIVE vs. COMPLEMENTARY 🏝 REDUCE JAVASCRIPT FOOTPRINT BY

    EXPLICITLY DENOTING WHAT GOES TO THE CLIENT. 🏝 INCREDIBLY OPTIMAL AT SOLVING FOR CODE AND DATA SERIALIZATION SIZE. ⚛ EXTE PROP ⚛ THE ACCO
  50. ⚛ SERVER COMPONENTS ⚛ EXTEND ISLANDS WITH CLIENT-SIDE ROUTING AND

    PROPER STATE PRESERVATION. ⚛ THE ONLY ISLAND-LIKE SOLUTION THAT PROPERLY ACCOUNTS FOR THE STATE WHILE CLIENT-NAVIGATING. ▶ INST LOOK ▶ THE HYDR COMPETITIVE vs. COMPLEMENTARY
  51. ▶ RESUMABILITY ▶ INSTEAD OF REDUCING THE AMOUNT THAT IS

    HYDRATED, LOOKS TO REMOVE THE EXECUTION COST OF HYDRATION. ▶ THE ONLY APPROACH THAT REDUCES THE COST OF THE HYDRATION THAT REMAINS. COMPETITIVE vs. COMPLEMENTARY
  52. THE SAME PATTERN CAN BE BENEFICIAL AND DETRIMENTAL IT IS

    ALSO QUITE LIKELY THAT DIFFERENT TYPES OF PAGES REQUIRE DIFFERENT RENDERING PATTERNS ON THE SAME WEBSITE. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! #3 of 8
  53. APPLICATION HOLOTYPES Portfolio Content Storefront Social Network I m m

    ersive Holotype Personal Blog CNN Amazon Facebook Figma Interactivity Minimal Linked Articles Purchase Multi-Point, Real-time Everything Session Depth Shallow Shallow Shallow - Medium Extended Deep Values Simplicity Discover-ability Load Performance Dynamicism I m m ersiveness Routing Server Server, HTML Swap HTML Swap, Hybrid Hybrid, Client Client Rendering Static Static, SSR Static, SSR SSR CSR Hydration None Progressive, Partial Partial, Resumable Any None (CSR) Frameworks 11ty Astro, Elder Marko, Qwik, Hydrogen Next, Remix Create React App — PATTERNS FOR BUILDING JAVASCRIPT WEBSITES IN 2022 • RYAN CARNIATO
  54. IT'S EASY TO THINK WE'RE JUST GOING BACK TO RENDERING

    HTML ON THE SERVER BUT THESE DAYS THE BOUNDARIES ARE VERY DIFFERENT. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! #4 of 8
  55. SOFTWARE DEVELOPMENT CONTINUALLY GOES THROUGH CYCLES. WHAT’S DIFFERENT NOW? WHAT’S

    TURNED INTO LOST ART? HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! #5 of 8
  56. IT ALL SOUNDS INCREDIBLY COMPLEX! WE'RE ADDRESSING THE UNCERTAINTIES OF

    THE MODERN WEB WHEN IT COMES TO CONNECTION QUALITY AND CLIENT DEVICE COMPUTATIONAL CAPABILITY. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! #6 of 8
  57. THIS IS ME, TEN YEARS AGO, SHOWCASING IONIC AT AN

    iOS DEVELOPERS MEETUP TELLING THEM THAT ANGULAR WOULD BE THE FUTURE OF MOBILE DEVELOPMENT.
  58. THERE'S NO SILVER BULLET. IDENTIFY YOUR CORE METRICS. ALWAYS TRY

    TO CORRELATE BUSINESS METRICS WITH PERFORMANCE. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! #8 of 8
  59. Matheus Albuquerque ↝ 𝕏 ythecombinator ↝ 👨💻 Sr. SWE @

    Medallia ↝ ⚡ Google Developer Expert ↝ ⚛ PC @ React Su m m it NYC
  60. THAT’S ALL, FOLKS! THANKS! 👋 🇺🇸 QUESTIONS? ⬆ ALL THE

    LINKS! HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! MATHEUS ALBUQUERQUE • @ythecombinator