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

🇫🇷 DevFest Nantes 2023

🇫🇷 DevFest Nantes 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.

Matheus Albuquerque

October 19, 2023
Tweet

More Decks by Matheus Albuquerque

Other Decks in Programming

Transcript

  1. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! • THE 19TH OF

    OCTOBER, 2023. Bonjour, Nantes 👋 🇫🇷
  2. This talk presents… ↝ The Past & The Future ↝

    Islands Architecture ↝ Resumability ↝ Streaming SSR + Selective Hydration ↝ React Server Components ↝ Closing Thoughts
  3. HOW AND WHERE DO I WANT TO RENDER CONTENT? web

    server build server the client the Edge
  4. HOW AND WHERE DO I WANT TO RENDER CONTENT? web

    server build server the client the Edge all at once partially progressively
  5. 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?
  6. #research 📚 In the past 10 years, the median size

    for a desktop webpage has gone from 468 KB to 2284 KB, a 388.3% increase. — Web Almanac By HTTP Archive, 2021
  7. #research 📚 For mobile, this jump is even more staggering

    — 145 KB to 2010 KB — a whopping 1288.1% increase. — Web Almanac By HTTP Archive, 2021
  8. ↝ 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 CGI SCRIPTING LANGUAGES
  9. ↝ 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 CGI SCRIPTING LANGUAGES
  10. #eureka 💡 JavaScript and browsers got powerful = we could

    do a ton of fun things directly on the client.
  11. ↝ 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 CLIENT-SIDE RENDERING (CSR)
  12. #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
  13. #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! 🏃
  14. ↝ 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) SERVER-SIDE RENDERING (SSR)
  15. #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
  16. ↝ ASSOCIATE DOM ELEMENTS WITH THEIR CORRESPONDING EVENT HANDLERS ↝

    ONCE A USER EVENT TRIGGERS A HANDLER, WE NEED TO UPDATE THE APP STATE ↝ ONCE THE APP STATE UPDATES, THE FRAMEWORK NEEDS TO RECREATE THE COMPONENT HIERARCHY HYDRATION: CHALLENGES 🤯
  17. ↝ 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? HYDRATION: QUESTIONS 🤯
  18. HYDRATION: ISSUES INITIAL REQUEST HTML ARRIVES VIEW PAINTED JAVASCRIPT ARRIVES

    JAVASCRIPT IS PARSED — RESUMABILITY, WTF?, BY RYAN CARNIATO 0 100
  19. GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE

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

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

    + BIND LISTENERS 🔴 SLOW (DEPENDING ON THE DEVICE AND AMOUNT OF JAVASCRIPT) HYDRATION: ISSUES
  22. 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
  23. #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
  24. ↝ 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
  25. ↝ THE SCRIPT FOR THE ISLANDS CAN BE DELIVERED AND

    HYDRATED INDEPENDENTLY, ALLOWING THE REST OF THE PAGE TO BE JUST STATIC HTML ↝ THE OUTPUT OF ISLANDS IS PROGRESSIVELY ENHANCED HTML ↝ MORE SPECIFICITY AROUND HOW THE ENHANCEMENT OCCURS ISLANDS ARCHITECTURE
  26. 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)
  27. 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)
  28. ↝ STANDALONE: Astro, Iles, Qwik, Marko, Nano JSX, Capri ↝

    PREACT: Fresh, preact-island, microsite ↝ SOLIDJS: Solid Start, isolid ↝ SVELTE: Elder.js ISLANDS ARCHITECTURE
  29. ↝ 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) 🤯
  30. ↝ 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)
  31. - - - import MyReactComponent from ' . . /components/MyReactComponent.jsx';

    - - - <MyReactComponent /> ISLANDS ARCHITECTURE (WITH ASTRO)
  32. - - - import MyReactComponent from ' . . /components/MyReactComponent.jsx';

    - - - <MyComponent client:load /> <MyComponent client:idle /> <MyComponent client:visible /> <MyComponent client:media={string} /> <MyComponent client:only={string} /> ISLANDS ARCHITECTURE (WITH ASTRO)
  33. #case💡 An e-commerce. Product pages have static descriptions and links.

    Interactive components (e.g., image carousels, search bar) are available in different regions.
  34. #case💡 An internet banking app. The account details page contains

    a list of static transactions with filters providing some interactivity.
  35. 🟢 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
  36. 🟢 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
  37. #hotTake 🌶 A considerable part of the modern isomorphic landscape

    is built on the back of libraries that weren't initially created for server rendering.
  38. #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
  39. ↝ 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
  40. ↝ 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
  41. ↝ 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
  42. RESUMABILITY: SERIALIZATION { "handlers": [ … ], "state": { …

    }, "hierarchy": { … }, } DISPLAY HTML RESUME STATE (JSON PARSE) 🟢 INTERACTIVE
  43. RESUMABILITY: SERIALIZATION { "handlers": [ … ], "state": { …

    }, "hierarchy": { … }, } DISPLAY HTML RESUME STATE (JSON PARSE) 🟢 INTERACTIVE
  44. RESUMABILITY: SERIALIZATION { "handlers": [ … ], "state": { …

    }, "hierarchy": { … }, } DISPLAY HTML RESUME STATE (JSON PARSE) 🟢 INTERACTIVE
  45. ↝ 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
  46. ↝ CLIENT REDOES WORK ↝ ISLAND-LEVEL ISLANDS ↝ CLIENT DOESN'T

    REDO WORK ↝ SUB-COMPONENT LEVEL (SMALLER) RESUMABILITY HYDRATION VS. RESUMABILITY 🤯
  47. 🟢 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
  48. 🟢 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
  49. #hotTake 🌶 Qwik is an example of the outside of

    the box thinking that is sometimes required on the web.
  50. ↝ AN EVOLUTION OF THE JAMSTACK ↝ ADDRESSES SOME ISSUES

    OF SSR AND CSR ↝ UPDATE STATIC CONTENT WITHOUT A FULL REBUILD ↝ MADE POPULAR BY NEXT.JS INCREMENTAL STATIC GENERATION
  51. INCREMENTAL STATIC GENERATION — A COMPLETE GUIDE TO INCREMENTAL STATIC

    REGENERATION (ISR) WITH NEXT.JS BY LEE ROBINSON
  52. / / pages/talks/[id].js export async function getStaticProps({ params }) {

    return { props: { talk: await getTalk(params.id) }, revalidate: 60 } } INCREMENTAL STATIC GENERATION (WITH NEXT.JS)
  53. / / pages/talks/[id].js export async function getStaticProps({ params }) {

    return { props: { talk: await getTalk(params.id) }, revalidate: 60 } } INCREMENTAL STATIC GENERATION (WITH NEXT.JS)
  54. #case💡 A growing blog. A new post shouldn't require a

    rebuild for all the existing pages. You don't want to rebuild and redeploy the site just because of a typo in one of the posts either.
  55. #case💡 A huge e-commerce. Is it possible to statically generate

    millions of products with every deployment? Even at 1 page/ms, it would still take hours to rebuild the entire site.
  56. 🟢 EVERYTHING FROM STATIC GENERATION 🟢 DYNAMIC CONTENT GREAT 🟡

    SERVER COSTS NOT GREAT INCREMENTAL STATIC GENERATION
  57. 🟢 EVERYTHING FROM STATIC GENERATION 🟢 DYNAMIC CONTENT GREAT (ON

    DEMAND) INCREMENTAL STATIC GENERATION NOT GREAT
  58. HYDRATION IN REACT: THE BAD PARTS™ ↝ 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
  59. FETCHING DATA (SERVER) RENDERING HTML (SERVER) LOADING CODE (CLIENT) HYDRATING

    TIME TO FIRST BYTE FIRST CONTENTFUL PAINT TIME TO INTERACTIVE HYDRATION IN REACT: THE BAD PARTS™
  60. TIME TO FIRST BYTE FIRST CONTENTFUL PAINT TIME TO INTERACTIVE

    […] FETCHING DATA (SERVER) RENDERING HTML (SERVER) HYDRATING LOADING CODE (CLIENT) […] […] […] […] […] […] (STREAMING SSR +) SELECTIVE HYDRATION
  61. ↝ pipeToNodeStream + createRoot + <Suspense> ↝ 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
  62. ↝ 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
  63. ↝ 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
  64. ↝ 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
  65. ↝ 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
  66. 🟡 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
  67. < ! - - 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)
  68. < ! - - 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)
  69. #definition 🧐 Edge Functions allow you to serve content from

    the CDN server closest to the user. — UNDERSTANDING EDGE FUNCTIONS: THE EDGE AND BEYOND
  70. THE EDGE: FUNCTIONS ↝ SERVERLESS FUNCTIONS ARE DEPLOYED TO A

    SPECIFIC REGION WHERE THEY RUN REGARDLESS OF THE INITIATOR’S ORIGIN. ↝ EDGE FUNCTIONS RUN AS CLOSE TO THE REQUESTOR AS THEY CAN (ON A DISTRIBUTED EDGE SERVER).
  71. THE EDGE ↝ BRINGING COMPUTING CLOSER TO THE SOURCE OF

    THE DATA ↝ FEWER PROCESSES IN THE CLOUD ↝ MINIMIZES THE NEED FOR LONG DISTANCE COMMUNICATIONS BETWEEN CLIENT AND SERVER ↝ REDUCES LATENCY AND BANDWIDTH USAGE
  72. THE EDGE Location Heroku TTFB Frankfurt 339.95ms Amsterdam 382.62ms London

    338.09ms New York 47.55ms Dallas 144.64ms San Francisco 302ms Singapore 944.14ms Sydney 889.85ms Tokyo 672.49ms Bangalore 984.39ms — THE FUTURE OF THE WEB IS ON THE EDGE, BY ANDY JIANG
  73. THE EDGE Location Heroku TTFB Deno TTFB Frankfurt 339.95ms 28.45ms

    Amsterdam 382.62ms 29.72ms London 338.09ms 22.3ms New York 47.55ms 41.29ms Dallas 144.64ms 29.28ms San Francisco 302ms 44.24ms Singapore 944.14ms 528.57ms Sydney 889.85ms 26.46ms Tokyo 672.49ms 19.04ms Bangalore 984.39ms 98.23ms — THE FUTURE OF THE WEB IS ON THE EDGE, BY ANDY JIANG
  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. CODE EXTRACTION import json from "./foo.json" with { type: "json"

    }; / / 🤔 🤔 🤔 import ComponentA from "./A" with { type: "client" } import ComponentB from "./B" with { type: "both" }
  77. THE SOLUTION TO THE PROBLEM ONLY CHANGES THE PROBLEM. #1

    HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
  78. WHILE SEEN AS COMPETITIVE, A LOT OF THESE ARE ACTUALLY

    COMPLEMENTARY! — RYAN CARNIATO #2 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
  79. 🏝 REDUCE JAVASCRIPT FOOTPRINT BY EXPLICITLY DENOTING WHAT GOES TO

    THE CLIENT. 🏝 INCREDIBLY OPTIMAL AT SOLVING FOR CODE AND DATA SERIALIZATION SIZE. 🏝 ISLANDS ⚛ EXTENDS ISLANDS WITH CLIENT-SIDE ROUTING AND PROPER STATE PRESERVATION. ⚛ THE ONLY ISLAND-LIKE SOLUTION THAT PROPERLY ACCOUNTS FOR THE STATE WHILE CLIENT-NAVIGATING. ⚛ SERVER COMPONENTS ▶ 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. ▶ RESUMABILITY — ISLANDS & SERVER COMPONENTS & RESUMABILITY, OH MY!, BY RYAN CARNIATO
  80. 🏝 REDUCE JAVASCRIPT FOOTPRINT BY EXPLICITLY DENOTING WHAT GOES TO

    THE CLIENT. 🏝 INCREDIBLY OPTIMAL AT SOLVING FOR CODE AND DATA SERIALIZATION SIZE. 🏝 ISLANDS ⚛ EXTENDS ISLANDS WITH CLIENT-SIDE ROUTING AND PROPER STATE PRESERVATION. ⚛ THE ONLY ISLAND-LIKE SOLUTION THAT PROPERLY ACCOUNTS FOR THE STATE WHILE CLIENT-NAVIGATING. ⚛ SERVER COMPONENTS ▶ 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. ▶ RESUMABILITY — ISLANDS & SERVER COMPONENTS & RESUMABILITY, OH MY!, BY RYAN CARNIATO
  81. 🏝 REDUCE JAVASCRIPT FOOTPRINT BY EXPLICITLY DENOTING WHAT GOES TO

    THE CLIENT. 🏝 INCREDIBLY OPTIMAL AT SOLVING FOR CODE AND DATA SERIALIZATION SIZE. 🏝 ISLANDS ⚛ EXTENDS ISLANDS WITH CLIENT-SIDE ROUTING AND PROPER STATE PRESERVATION. ⚛ THE ONLY ISLAND-LIKE SOLUTION THAT PROPERLY ACCOUNTS FOR THE STATE WHILE CLIENT-NAVIGATING. ⚛ SERVER COMPONENTS ▶ 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. ▶ RESUMABILITY — ISLANDS & SERVER COMPONENTS & RESUMABILITY, OH MY!, BY RYAN CARNIATO
  82. 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!
  83. 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
  84. 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!
  85. SOFTWARE DEVELOPMENT CONTINUALLY GOES THROUGH CYCLES. WHAT’S DIFFERENT NOW? WHAT’S

    TURNED INTO LOST ART? #5 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
  86. 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!
  87. THIS IS ME, NINE YEARS AGO, PRESENTING ABOUT IONIC AT

    AN IOS DEVELOPERS MEETUP TELLING THEM THAT ANGULAR WOULD BE THE FUTURE OF MOBILE DEVELOPMENT.
  88. A PICTURE IS WORTH A THOUSAND WORDS. DON'T ALWAYS TRUST

    SPECULATIONS AND PREDICTIONS! #7 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
  89. THERE'S NO SILVER BULLET. IDENTIFY YOUR CORE METRICS. ALWAYS TRY

    TO CORRELATE BUSINESS METRICS WITH PERFORMANCE. #8 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
  90. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! ↑ ALL THE LINKS!

    🧑🏫 TECHLABS 🐦 @ythecombinator 👨💻 MEDALLIA ⚡ GDE
  91. THAT’S ALL, FOLKS! MERCI! 👋 🇫🇷 QUESTIONS? ↑ ALL THE

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