🇳🇱 Frontmania 2024

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! • OCTOBER 10, 2024. Hallo, Utrecht! 👋 🇳🇱
2. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! 🤯 MATHEUS ALBUQUERQUE • @ythecombinator
3. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… MATHEUS ALBUQUERQUE • @ythecombinator LET’S DISCUSS MORE AFTER! OH MY! 🤯
4. #question 🤔 How and where do I want to render content?
5. HOW AND WHERE DO I WANT TO RENDER CONTENT? web server build server the client the Edge
6. HOW AND WHERE DO I WANT TO RENDER CONTENT? web server build server the client the Edge all at once partially progressively
7. HOW AND WHERE DO I WANT TO RENDER CONTENT? web server build server the client the Edge all at once partially progressively Where do you navigate? What is executed on load? When is data fetched? What do you bundle/serialize?
8. HOW AND WHERE DO I WANT TO RENDER CONTENT?
9. WHEN DOES AN APP BECOME INTERACTIVE?
10. WHEN DOES AN APP BECOME INTERACTIVE?
11. #question 🤔 How did we get here?
14. The Past HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
17. 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.
18. 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.
19. #eureka 💡 JavaScript and browsers got powerful = we could do a ton of fun things directly on the client.
20. CSR: CLIENT SIDE RENDERING ↝ 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.
21. #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, BY ANDY JIANG
22. — THE FUTURE (AND THE PAST) OF THE WEB IS SERVER SIDE RENDERING, BY ANDY JIANG #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! 🏃
25. SSR: SERVER SIDE RENDERING ↝ 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).
26. Hydration HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
27. #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
29. 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. 🤯
30. HYDRATION: QUESTIONS ↝ DO WE SEND ALL JS ON EVERY REQUEST? OR DO WE BASE IT ON THE ROUTE? ↝ IS HYDRATION DONE TOP-DOWN? AND HOW EXPENSIVE IS THAT? ↝ HOW DOES THE DEVELOPER ORGANIZE THE CODE BASE? 🤯
31. HYDRATION: ISSUES INITIAL REQUEST HTML ARRIVES VIEW PAINTED JAVASCRIPT ARRIVES JAVASCRIPT IS PARSED — RESUMABILITY, WTF? • RYAN CARNIATO 0
32. HYDRATION: ISSUES GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS 🟢 FAST (USUALLY)
33. HYDRATION: ISSUES GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS 🔴 SLOW (ON BAD NETWORK CONDITIONS)
34. HYDRATION: ISSUES GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS 🔴 SLOW (DEPENDING ON THE DEVICE AND AMOUNT OF JAVASCRIPT)
35. 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) GET HTML DOWNLOAD JS PARSE + EXECUTE JS
36. HYDRATION: NON-DETERMINISTIC
37. HYDRATION: NON-DETERMINISTIC
39. Islands Architecture 1993 1998 2008 2017 2020 2021 2022 2023 2024 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
43. #definition 🧐 Islands are a component-based architecture that suggests a compartmentalized view of the page with static and dynamic islands. — ISLANDS ARCHITECTURE, BY PATTERNS.DEV
44. 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.
45. 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.
46. HYDRATION vs. ISLANDS POST TITLE POST CONTENT COMMENTS SOCIAL CTA POST TITLE POST CONTENT COMMENTS SOCIAL CTA POST TITLE (STATIC HTML) POST CONTENT (STATIC HTML) COMMENTS SOCIAL CTA RENDER ALL COMPONENTS TOGETHER AND HYDRATE. RENDER ALL COMPONENTS, HYDRATE KEY ONES FIRST AND THEN PROGRESSIVELY HYDRATE THE OTHERS. STATIC COMPONENTS ARE SERVER-RENDERED HTML. SCRIPTS ARE REQUIRED ONLY FOR INTERACTIVE ONES. TRADITIONAL HYDRATION PROGRESSIVE HYDRATION ISLANDS
47. HYDRATION vs. ISLANDS POST TITLE POST CONTENT COMMENTS SOCIAL CTA POST TITLE POST CONTENT COMMENTS SOCIAL CTA POST TITLE (STATIC HTML) POST CONTENT (STATIC HTML) COMMENTS SOCIAL CTA RENDER ALL COMPONENTS TOGETHER AND HYDRATE. RENDER ALL COMPONENTS, HYDRATE KEY ONES FIRST AND THEN PROGRESSIVELY HYDRATE THE OTHERS. STATIC COMPONENTS ARE SERVER-RENDERED HTML. SCRIPTS ARE REQUIRED ONLY FOR INTERACTIVE ONES. TRADITIONAL HYDRATION PROGRESSIVE HYDRATION ISLANDS
48. HYDRATION vs. ISLANDS POST TITLE POST CONTENT COMMENTS SOCIAL CTA POST TITLE POST CONTENT COMMENTS SOCIAL CTA POST TITLE (STATIC HTML) POST CONTENT (STATIC HTML) COMMENTS SOCIAL CTA RENDER ALL COMPONENTS TOGETHER AND HYDRATE. RENDER ALL COMPONENTS, HYDRATE KEY ONES FIRST AND THEN PROGRESSIVELY HYDRATE THE OTHERS. STATIC COMPONENTS ARE SERVER-RENDERED HTML. SCRIPTS ARE REQUIRED ONLY FOR INTERACTIVE ONES. TRADITIONAL HYDRATION PROGRESSIVE HYDRATION ISLANDS
49. ISLANDS ARCHITECTURE PAGE LAYOUT POST TITLE POST CONTENT COMMENTS SOCIAL CTA
50. ISLANDS ARCHITECTURE PAGE LAYOUT (SSR’D) POST TITLE (SSR'D) POST CONTENT (SSR’D) COMMENTS PLACEHOLDER (SSR) SOCIAL CTA PLACEHOLDER (SSR) COMMENTS “APP” (SSR’D + HYDRATION SCRIPT) SOCIAL CTA “APP” (SSR’D + HYDRATION SCRIPT)
51. ISLANDS ARCHITECTURE PAGE LAYOUT (SSR’D) POST TITLE (SSR'D) POST CONTENT (SSR’D) COMMENTS PLACEHOLDER (SSR’D) SOCIAL CTA PLACEHOLDER (SSR’D) COMMENTS “APP” (SSR’D + HYDRATION SCRIPT) SOCIAL CTA “APP” (SSR’D + HYDRATION SCRIPT)
52. ISLANDS ARCHITECTURE ↝ STANDALONE: Astro, Qwik, Marko, Iles, Capri. ↝ PREACT: Fresh, preact-island, microsite. ↝ SOLIDJS: Solid Start, isolid. ↝ SVELTE: Elder.js.
54. 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. 🤯
56. 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.
57. ISLANDS ARCHITECTURE: ASTRO - - - import MyReactComponent from ' . . /components/MyReactComponent.jsx'; - - - <MyReactComponent />
58. 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} />
59. 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
60. 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 LOTS OF ISLANDS NOT GREAT
61. Resumability 1993 1998 2008 2017 2020 2021 2022 2023 2024 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
62. #hotTake 🌶 A considerable part of the modern isomorphic landscape is built on the back of libraries that weren't initially created for server rendering.
64. #question 🤔 What if frameworks were built on SSR in the first place?
66. OPA LANGUAGE 🤯
69. #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
70. 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.
71. 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
72. 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
73. ISLANDS VS. RESUMABILITY 🤯 ↝ CLIENT REDOES WORK ↝ ISLAND-LEVEL ISLANDS ↝ CLIENT DOESN'T REDO WORK ↝ SUB-COMPONENT LEVEL (SMALLER) RESUMABILITY
75. 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
76. 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
77. RESUMABILITY
78. #hotTake 🌶 Qwik is an example of the outside of the box thinking that is sometimes required on the web.
79. RESUMABILITY
80. Streaming SSR + Selective Hydration 1993 1998 2008 2017 2020 2021 2022 2023 2024 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
83. 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.
84. HYDRATION IN REACT: BEFORE FETCHING DATA (SERVER) RENDERING HTML (SERVER) LOADING CODE (CLIENT) HYDRATING TIME TO FIRST BYTE FIRST CONTENTFUL PAINT TIME TO INTERACTIVE
85. HYDRATION IN REACT: AFTER TIME TO FIRST BYTE FIRST CONTENTFUL PAINT TIME TO INTERACTIVE […] FETCHING DATA (SERVER) RENDERING HTML (SERVER) HYDRATING LOADING CODE (CLIENT) […] […] […] […] […] […]
86. HYDRATION IN REACT: AFTER ↝ 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.
87. HYDRATION IN REACT: AFTER ↝ 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.
89. React Server Components 1993 1998 2008 2017 2020 2021 2022 2023 2024 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
93. RSC: SERVER COMPONENTS ↝ COMPONENTS THAT RUN EXCLUSIVELY ON THE SERVER. ↝ THEY RENDER ONCE ON THE SERVER TO GENERATE UI. THEY NEVER HYDRATE OR RE-RENDER. ↝ THEIR CODE ISN'T INCLUDED IN THE JS BUNDLE. ↝ THE RENDERED OUTPUT IS SENT TO THE CLIENT AND REMAINS IMMUTABLE.
94. RSC: PARADIGM ↝ THE CLASSIC COMPONENTS WE KNOW ARE NOW CLIENT 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.
95. RSC vs. SSR
96. RSC: PARADIGM ↝ 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.
97. RSC: CLIENT COMPONENTS 'use client'; import React from 'react'; function Counter() { const [count, setCount] = React.useState(0); return ( <button onClick={() = > setCount(count + 1)}> Current value: {count} </button> ); } export default Counter;
98. RSC: BOUNDARIES PAGE LAYOUT POST TITLE POST CONTENT COMMENTS SOCIAL CTA
99. APP HEADER PAGE LAYOUT POST POST TITLE POST CONTENT COMMENTS SOCIAL CTA RSC: BOUNDARIES
100. RSC: BOUNDARIES APP HEADER PAGE LAYOUT POST POST TITLE POST CONTENT COMMENTS SOCIAL CTA 'use client' 'use client'
101. RSC: BOUNDARIES APP HEADER PAGE LAYOUT POST POST TITLE POST CONTENT COMMENTS SOCIAL CTA 'use client'
102. RSC: BENEFITS ↝ 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.
103. RSC: BEFORE — RSC FROM SCRATCH. PART 1: SERVER COMPONENTS #5 BY DAN ABRAMOV
104. RSC: AFTER — RSC FROM SCRATCH. PART 1: SERVER COMPONENTS #5 BY DAN ABRAMOV
105. RSC: PAYLOAD — DEVTOOLS FOR REACT SERVER COMPONENTS BY ALVAR LAGERLÖF
106. REACT SERVER COMPONENTS 🟡 WHILE OUR JS BUNDLES GET SMALLER, THE HTML FILE GETS LARGER 🟡 MUCH MORE ORCHESTRATION NEEDED 🟡 STILL EXPERIMENTAL 🟡 THERE ISN'T MUCH TOOLING YET 🟡 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
107. RSC: USE CASES
110. 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>
111. 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>
114. REACT SERVER COMPONENTS
117. REACT SERVER COMPONENTS
118. Partial Prerendering 1993 1998 2008 2017 2020 2021 2022 2023 2024 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
120. PARTIAL PRERENDERING: NEXT experimental: { ppr: true } <Suspense fallback={<LoadingDots />}> <UserSpecificDetails productId={product.id} /> </Suspense>
121. PARTIAL PRERENDERING ↝ AN EXPERIMENTAL FEATURE IN NEXT.JS. ↝ AIMS TO IMPROVE THE LOADING SPEED FOR PAGES WITH MOSTLY STATIC CONTENT + A FEW DYNAMIC PARTS. ↝ STATIC SHELL SERVED QUICKLY FROM THE EDGE. ↝ PLACEHOLDERS LEFT FOR DYNAMIC CONTENT.
122. PARTIAL PRERENDERING PAGE LAYOUT NAVBAR PRODUCT INFORMATION RECOMMENDED PRODUCTS CART
123. PARTIAL PRERENDERING PAGE LAYOUT NAVBAR PRODUCT INFORMATION RECOMMENDED PRODUCTS CART RENDERS ALL THE STATIC CONTENT INSTANTLY FROM THE EDGE
124. PARTIAL PRERENDERING PAGE LAYOUT NAVBAR PRODUCT INFORMATION RECOMMENDED PRODUCTS CART WHILE THE PAGE LOADS (STYLES, SCRIPTS, ETC) RENDER THE REST FOR EACH USER, DYNAMICALLY
125. PARTIAL PRERENDERING BUILD TIME STATIC SHELL CDN USER REQ EDGE SERVER BROWSER DYNAMIC CONTENT STATIC CONTENT VISIBLE FULLY RENDERED PAGE GENERATE DYNAMIC CONTENT GENERATE STATIC CONTENT DEPLOY ROUTE TO THE NEAREST SERVE STATIC SHELL STREAM
126. PARTIAL PRERENDERING BUILD TIME STATIC SHELL CDN USER REQ EDGE SERVER BROWSER DYNAMIC CONTENT STATIC CONTENT VISIBLE FULLY RENDERED PAGE GENERATE DYNAMIC CONTENT GENERATE STATIC CONTENT DEPLOY ROUTE TO THE NEAREST SERVE STATIC SHELL STREAM
127. PARTIAL PRERENDERING
129. Server Islands 1993 1998 2008 2017 2020 2021 2022 2023 2024 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
131. SERVER ISLANDS: ASTRO experimental: { serverIslands: true } <Avatar server:defer> <GenericUserImage slot="fallback" /> </Avatar>
132. SERVER ISLANDS PAGE LAYOUT NAVBAR PRODUCT INFORMATION RECOMMENDED PRODUCTS CART
133. SERVER ISLANDS
134. SERVER ISLANDS
135. SERVER ISLANDS VS. PPR
137. HYDRATION STREAMING ISLANDS RESUMABILITY SELECTIVE HYDRATION RSC CSR SSR STATIC RENDERING INCREMENTAL STATIC GENERATION PROGRESSIVE HYDRATION VIEW TRANSITIONS EDGE RENDERING SPA MPA PARTIAL HYDRATION
138. HYDRATION STREAMING ISLANDS RESUMABILITY SELECTIVE HYDRATION RSC CSR SSR STATIC RENDERING INCREMENTAL STATIC GENERATION PROGRESSIVE HYDRATION VIEW TRANSITIONS EDGE RENDERING SPA MPA PARTIAL HYDRATION
139. The Future 🔮 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
140. — ISLANDS & SERVER COMPONENTS & RESUMABILITY, OH MY! • RYAN CARNIATO
141. ROUTING & MPAs vs. SPAs
142. ROUTING & MPAs vs. SPAs SERVER FIRST
143. ROUTING & MPAs vs. SPAs WATERFALLS
144. ROUTING & MPAs vs. SPAs HYBRID ROUTING
145. HYDRATION
146. OKB JAVASCRIPT
147. OKB JAVASCRIPT
148. CODE EXTRACTION
149. CODE EXTRACTION
151. CODE EXTRACTION import json from "./foo.json" with { type: "json" }; import ComponentA from "./A" with { type: "client" } import ComponentB from "./B" with { type: "both" }
152. COMPILERS
153. COMPILERS
154. COMPILERS
155. COMPILERS
156. COMPILERS
157. INFRASTRUCTURE
158. WHY SOMETHING IS THE FUTURE ROUTING MPAs vs. SPAs CODE EXTRACTION OKB JAVASCRIPT REACTIVITY HYDRATION COMPILERS
159. WHY SOMETHING IS THE FUTURE
160. Closing Thoughts HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
161. THE SOLUTION TO THE PROBLEM ONLY CHANGES THE PROBLEM. #1 of 8 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
162. WHILE SEEN AS COMPETITIVE, A LOT OF THESE ARE ACTUALLY COMPLEMENTARY! — RYAN CARNIATO #2 of 8 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
163. COMPETITIVE COMPLEMENTARY 🏝 ISLANDS 🏝 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 — ISLANDS & SERVER COMPONENTS & RESUMABILITY, OH MY! • RYAN CARNIATO
164. COMPETITIVE COMPLEMENTARY ⚛ 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 — ISLANDS & SERVER COMPONENTS & RESUMABILITY, OH MY! • RYAN CARNIATO
165. COMPETITIVE COMPLEMENTARY ▶ 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. — ISLANDS & SERVER COMPONENTS & RESUMABILITY, OH MY! • RYAN CARNIATO
166. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! / 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 of 8
168. APPLICATION HOLOTYPES
169. 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
171. APPLICATION HOLOTYPES — THE NATURE OF HYDRATION, BY RYAN CARNIATO
172. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! / #4 of 8
173. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! / 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 of 8
174. THESE DAYS THE BOUNDARIES ARE VERY DIFFERENT!
175. THESE DAYS THE BOUNDARIES ARE VERY DIFFERENT!
176. THESE DAYS THE BOUNDARIES ARE VERY DIFFERENT!
177. THESE DAYS THE BOUNDARIES ARE VERY DIFFERENT!
178. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! / SOFTWARE DEVELOPMENT CONTINUALLY GOES THROUGH CYCLES. WHAT’S DIFFERENT NOW? WHAT’S TURNED INTO LOST ART? #5 of 8
179. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
180. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
181. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
184. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! / 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 of 8
187. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! / #6 of 8 IT ALL SOUNDS INCREDIBLY COMPLEX! YOU DON’T NEED TO KNOW ALL OF THAT TO BE PRODUCTIVE WHEN BUILDING USER INTERFACES.
188. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! / THERE'S NO SILVER BULLET. IDENTIFY YOUR CORE METRICS. ALWAYS TRY TO CORRELATE BUSINESS METRICS WITH PERFORMANCE. #7 of 8
190. A PICTURE IS WORTH A THOUSAND WORDS! #8 of 8 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /
191. This is me, ten years ago, presenting about Ionic at an iOS developers meetup telling them it'd be the future of mobile development!
192. #8 of 8 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! / A PICTURE IS WORTH A THOUSAND WORDS! DON'T ALWAYS TRUST SPECULATIONS AND PREDICTIONS!
193. Matheus Albuquerque ↝ 👨💻 Staff SWE @ Medallia ↝ ⚡ Google Developer Expert ↝ 𝕏 ythecombinator
194. THAT’S ALL, FOLKS! THANKS! 👋 🇳🇱 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ⬆ ALL THE LINKS!