🇬🇧 React Advanced London 2023

ℹ️ 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… There are many approaches 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.

Transcript

1. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! • THE 20TH OF OCTOBER, 2023. Hello, London 👋 🇬🇧
2. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! 🤯 MATHEUS ALBUQUERQUE • @ythecombinator
3. This talk presents… ↝ The Past & The Future ↝ Islands Architecture ↝ Resumability ↝ Streaming SSR + Selective Hydration ↝ React Server Components ↝ Closing Thoughts
4. INTERMISSION: Hydration HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
5. #definition 🧐 Hydration is the process of attaching behavior to declarative content to make it interactive. — WHY PROGRESSIVE HYDRATION IS HARDER THAN YOU THINK, BY MIŠKO HEVERY
6. ↝ 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 HYDRATION: CHALLENGES 🤯
7. HYDRATION: ISSUES INITIAL REQUEST HTML ARRIVES VIEW PAINTED JAVASCRIPT ARRIVES JAVASCRIPT IS PARSED — RESUMABILITY, WTF?, BY RYAN CARNIATO 0 100
8. GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS 🟢 FAST (USUALLY) HYDRATION: ISSUES
9. GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS 🔴 SLOW (ON BAD NETWORK CONDITIONS) HYDRATION: ISSUES
10. GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS 🔴 SLOW (DEPENDING ON THE DEVICE AND AMOUNT OF JAVASCRIPT) HYDRATION: ISSUES
11. GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS 🔴 SLOW (DEPENDING ON THE AMOUNT OF DOM NODES TO BE TRAVERSED AND REFERENCES TO BE RE-BOUND TO LISTENERS) HYDRATION: ISSUES
13. Islands Architecture HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! 1993 1998 2008 2017 2021 2022 2020
14. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
15. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
17. ↝ 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 ISLANDS ARCHITECTURE
18. ↝ 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 ISLANDS ARCHITECTURE
19. ↝ STANDALONE: Astro, Iles, Qwik, Marko, Nano JSX, Capri ↝ PREACT: Fresh, preact-island, microsite ↝ SOLIDJS: Solid Start, isolid ↝ SVELTE: Elder.js ISLANDS ARCHITECTURE
20. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
21. ↝ STREAMING RENDERING + AUTOMATIC PARTIAL HYDRATION + COMPILER ↝ AUTOMATIC PARTIAL HYDRATION ALLOWS INTERACTIVE COMPONENTS TO HYDRATE THEMSELVES ↝ HYDRATION CODE IS ONLY SHIPPED FOR INTERACTIVE COMPONENTS ISLANDS ARCHITECTURE (WITH MARKO) 🤯
22. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
23. ↝ 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 ISLANDS ARCHITECTURE (WITH ASTRO)
24. 🟢 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 ISLANDS ARCHITECTURE
25. 🟢 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 ISLANDS ARCHITECTURE
26. Resumability HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! 1993 1998 2008 2017 2020 2021 2022
27. #hotTake 🌶 A considerable part of the modern isomorphic landscape is built on the back of libraries that weren't initially created for server rendering.
28. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
29. #question 🤔 What if frameworks were built on SSR in the first place?
30. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
31. OPA LANGUAGE 🤯
32. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
34. #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
35. ↝ 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 RESUMABILITY
36. ↝ 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 HYDRATION VS. RESUMABILITY
37. ↝ 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 HYDRATION VS. RESUMABILITY
38. ↝ CLIENT REDOES WORK ↝ ISLAND-LEVEL ISLANDS ↝ CLIENT DOESN'T REDO WORK ↝ SUB-COMPONENT LEVEL (SMALLER) RESUMABILITY HYDRATION VS. RESUMABILITY 🤯
39. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
40. 🟢 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 RESUMABILITY
41. 🟢 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 RESUMABILITY
42. #hotTake 🌶 Qwik is an example of the outside of the box thinking that is sometimes required on the web.
43. Streaming SSR + Selective Hydration HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! 1993 1998 2008 2017 2020 2021 2022
45. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
46. 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
47. FETCHING DATA (SERVER) RENDERING HTML (SERVER) LOADING CODE (CLIENT) HYDRATING TIME TO FIRST BYTE FIRST CONTENTFUL PAINT TIME TO INTERACTIVE HYDRATION IN REACT: BEFORE
48. TIME TO FIRST BYTE FIRST CONTENTFUL PAINT TIME TO INTERACTIVE […] FETCHING DATA (SERVER) RENDERING HTML (SERVER) HYDRATING LOADING CODE (CLIENT) […] […] […] […] […] […] STREAMING SSR + SELECTIVE HYDRATION
49. ↝ 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 STREAMING SSR + SELECTIVE HYDRATION
50. ↝ 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 STREAMING SSR + SELECTIVE HYDRATION
51. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
52. React Server Components HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! 1993 1998 2008 2017 2020 2021 2022
53. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
57. ↝ 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 REACT SERVER COMPONENTS
58. ↝ 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 REACT SERVER COMPONENTS
59. ↝ 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 REACT SERVER COMPONENTS
60. REACT SERVER COMPONENTS: BEFORE — RSC FROM SCRATCH. PART 1: SERVER COMPONENTS #5 BY DAN ABRAMOV
61. REACT SERVER COMPONENTS: AFTER — RSC FROM SCRATCH. PART 1: SERVER COMPONENTS #5 BY DAN ABRAMOV
62. 🟡 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 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 GREAT
64. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
65. < ! - - 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> REACT SERVER COMPONENTS (PRIOR ART)
66. < ! - - 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> REACT SERVER COMPONENTS (PRIOR ART)
70. REACT SERVER COMPONENTS
71. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
72. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
73. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
74. 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
75. 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
76. The Future 🔮 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
77. — ISLANDS & SERVER COMPONENTS & RESUMABILITY, OH MY!, BY RYAN CARNIATO
78. ROUTING (& MPAs vs. SPAs)
79. HYDRATION
80. OKB JAVASCRIPT
81. CODE EXTRACTION
82. (WHY) <SOMETHING> IS THE FUTURE
83. Closing Thoughts HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
84. THE SOLUTION TO THE PROBLEM ONLY CHANGES THE PROBLEM. #1 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
85. WHILE SEEN AS COMPETITIVE, A LOT OF THESE ARE ACTUALLY COMPLEMENTARY! — RYAN CARNIATO #2 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
86. 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. #3 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
87. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
89. 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, BY RYAN CARNIATO
90. #4 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
91. IT'S EASY TO THINK WE'RE JUST GOING BACK TO RENDERING HTML ON THE SERVER BUT THESE DAYS THE BOUNDARIES ARE VERY DIFFERENT. #4 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
92. SOFTWARE DEVELOPMENT CONTINUALLY GOES THROUGH CYCLES. WHAT’S DIFFERENT NOW? WHAT’S TURNED INTO LOST ART? #5 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
93. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
94. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
96. 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. #6 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
97. A PICTURE IS WORTH A THOUSAND WORDS. #7 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
98. THIS IS ME, NINE YEARS AGO, PRESENTING ABOUT IONIC AT AN IOS DEVELOPERS MEETUP TELLING THEM THAT ANGULAR WOULD BE THE FUTURE.
99. A PICTURE IS WORTH A THOUSAND WORDS. DON'T ALWAYS TRUST SPECULATIONS AND PREDICTIONS! #7 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
100. THERE'S NO SILVER BULLET. IDENTIFY YOUR CORE METRICS. ALWAYS TRY TO CORRELATE BUSINESS METRICS WITH PERFORMANCE. #8 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
101. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! ↑ ALL THE LINKS! 🧑🏫 TECHLABS 🐦 @ythecombinator 👨💻 MEDALLIA ⚡ GDE
102. THAT’S ALL, FOLKS! THANKS! 👋 🇬🇧 QUESTIONS? ↑ ALL THE LINKS! HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! MATHEUS ALBUQUERQUE • @ythecombinator