🇨🇿 STRV Frontend Meetup (Oct 2023)

Transcript

1. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! • THE 12TH OF OCTOBER, 2023.
   Ahoj STRV 👋 🫂
   

   View Slide

2. HYDRATION, ISLANDS,
   STREAMING, RESUMABILITY…
   OH MY! 🤯
   MATHEUS ALBUQUERQUE • @ythecombinator
   

   View Slide

3. HYDRATION, ISLANDS,
   STREAMING, RESUMABILITY…
   OH MY! 🤯
   MATHEUS ALBUQUERQUE • @ythecombinator
   LET’S DISCUSS MORE AFTER! 🍻
   

   View Slide

4. This talk presents…
   
   
   ↝ The Past & The Future
   
   
   ↝ Islands Architecture
   
   
   ↝ Resumability
   
   
   ↝ Streaming SSR + Selective Hydration
   
   
   ↝ React Server Components
   
   
   ↝ Closing Thoughts
   

   View Slide

5. #question 🤔
   
   
   How and where do I want to render
   content?
   

   View Slide

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

   View Slide

7. HOW AND WHERE DO I WANT TO RENDER CONTENT?
   web server
   
   
   build server
   
   
   the client
   
   
   the Edge
   all at once
   
   
   partially
   
   
   progressively
   

   View Slide

8. 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?
   

   View Slide

9. #question 🤔
   
   
   How did we get here?
   

   View Slide

10. View Slide

11. The Past
    HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

12. 1995
    

    View Slide

13. View Slide

14. ↝ 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
    

    View Slide

15. ↝ 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
    

    View Slide

16. #eureka 💡
    
    
    JavaScript and browsers got powerful
    = we could do a ton of fun things
    directly on the client.
    

    View Slide

17. ↝ 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)
    

    View Slide

18. #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
    

    View Slide

19. #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! 🏃
    

    View Slide

20. View Slide

21. ↝ 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)
    

    View Slide

22. 🚨 INTERMISSION:
    
    
    Hydration
    HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

23. #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
    

    View Slide

24. ↝ 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
    🤯
    

    View Slide

25. ↝ 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
    🤯
    

    View Slide

26. HYDRATION: ISSUES
    INITIAL
    REQUEST
    HTML
    ARRIVES
    VIEW
    PAINTED
    JAVASCRIPT
    ARRIVES
    JAVASCRIPT
    IS PARSED
    — RESUMABILITY, WTF?, BY RYAN CARNIATO
    0
    100
    

    View Slide

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

    View Slide

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

    View Slide

29. GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS
    🔴 SLOW (DEPENDING ON THE DEVICE
    AND AMOUNT OF JAVASCRIPT)
    HYDRATION: ISSUES
    

    View Slide

30. 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
    

    View Slide

31. View Slide

32. Islands
    
    
    Architecture
    HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    1993 1998 2008 2017 2021 2022
    2020
    

    View Slide

33. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

34. View Slide

35. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

36. #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
    

    View Slide

37. ↝ 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
    

    View Slide

38. ↝ 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
    

    View Slide

39. ISLANDS ARCHITECTURE
    PAGE LAYOUT
    POST TITLE
    POST CONTENT
    COMMENTS SOCIAL CTA
    

    View Slide

40. 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)
    

    View Slide

41. 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)
    

    View Slide

42. ↝ STANDALONE: Astro, Iles, Qwik, Marko, Nano
    JSX, Capri
    
    
    ↝ PREACT: Fresh, preact-island, microsite
    
    
    ↝ SOLIDJS: Solid Start, isolid
    
    
    ↝ SVELTE: Elder.js
    ISLANDS ARCHITECTURE
    

    View Slide

43. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

44. ↝ 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)
    🤯
    

    View Slide

45. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

46. ↝ 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)
    

    View Slide

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

    View Slide

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

    View Slide

49. 🟢 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
    

    View Slide

50. 🟢 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
    

    View Slide

51. Resumability
    HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    1993 1998 2008 2017 2020 2021 2022
    

    View Slide

52. #hotTake 🌶
    
    
    A considerable part of the modern
    isomorphic landscape is built on the
    back of libraries that weren't initially
    created for server rendering.
    

    View Slide

53. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

54. #question 🤔
    
    
    What if frameworks were built on SSR
    in the first place?
    

    View Slide

55. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

56. OPA LANGUAGE
    🤯
    

    View Slide

57. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

58. View Slide

59. #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
    

    View Slide

60. ↝ 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
    

    View Slide

61. ↝ 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
    

    View Slide

62. ↝ 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

66. ↝ 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
    

    View Slide

67. ↝ CLIENT REDOES WORK
    
    
    ↝ ISLAND-LEVEL
    ISLANDS
    ↝ CLIENT DOESN'T REDO WORK
    
    
    ↝ SUB-COMPONENT LEVEL (SMALLER)
    RESUMABILITY
    HYDRATION VS. RESUMABILITY
    🤯
    

    View Slide

68. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

69. 🟢 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
    

    View Slide

70. 🟢 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
    

    View Slide

71. #hotTake 🌶
    
    
    Qwik is an example of the outside of
    the box thinking that is sometimes
    required on the web.
    

    View Slide

72. Streaming SSR +
    Selective Hydration
    HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    1993 1998 2008 2017 2020 2021 2022
    

    View Slide

73. View Slide

74. View Slide

75. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

76. 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
    

    View Slide

77. 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™
    

    View Slide

78. TIME TO FIRST BYTE FIRST CONTENTFUL PAINT TIME TO
    
    
    INTERACTIVE
    […]
    FETCHING DATA (SERVER)
    RENDERING HTML (SERVER) HYDRATING
    LOADING CODE (CLIENT)
    […]
    […]
    […]
    […]
    […]
    […]
    (STREAMING SSR +) SELECTIVE HYDRATION
    

    View Slide

79. ↝ pipeToNodeStream + createRoot +
    
    
    ↝ 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
    

    View Slide

80. ↝ 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
    

    View Slide

81. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

82. React Server
    Components
    HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    1993 1998 2008 2017 2020 2021 2022
    

    View Slide

83. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

84. View Slide

85. View Slide

86. View Slide

87. ↝ 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
    

    View Slide

88. ↝ 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
    

    View Slide

89. ↝ 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
    

    View Slide

90. 🟡 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
    

    View Slide

91. View Slide

92. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

93. <
    !
    -
    -
    Database, file, and socket access from JavaScript
    -
    -
    >
    
    
    <br/><br/><br/>var resultSet<br/>=<br/>Jaxer.DB.execute("SELECT * FROM myTable");<br/><br/><br/>var newPrice<br/>=<br/>resultSet.rows[0].price;<br/><br/><br/>
    
    
    <
    !
    -
    -
    Directly call server-side functions from the browser
    -
    -
    >
    
    
    <br/><br/><br/>function getPriceFromServer() {<br/><br/><br/>return 42;<br/><br/><br/>}<br/><br/><br/>
    
    
    Price
    
    
    <
    !
    -
    -
    Share validation code on the browser and server
    -
    -
    >
    
    
    <br/><br/><br/>function validateCreditCard(number) {}<br/><br/><br/>
    REACT SERVER COMPONENTS (PRIOR ART)
    

    View Slide

94. <
    !
    -
    -
    Database, file, and socket access from JavaScript
    -
    -
    >
    
    
    <br/><br/><br/>var resultSet<br/>=<br/>Jaxer.DB.execute("SELECT * FROM myTable");<br/><br/><br/>var newPrice<br/>=<br/>resultSet.rows[0].price;<br/><br/><br/>
    
    
    <
    !
    -
    -
    Directly call server-side functions from the browser
    -
    -
    >
    
    
    <br/><br/><br/>function getPriceFromServer() {<br/><br/><br/>return 42;<br/><br/><br/>}<br/><br/><br/>
    
    
    Price
    
    
    <
    !
    -
    -
    Share validation code on the browser and server
    -
    -
    >
    
    
    <br/><br/><br/>function validateCreditCard(number) {}<br/><br/><br/>
    REACT SERVER COMPONENTS (PRIOR ART)
    

    View Slide

95. View Slide

96. View Slide

97. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

98. REACT SERVER COMPONENTS
    

    View Slide

99. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
    

    View Slide

100. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     

     View Slide

101. 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
     

     View Slide

102. 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
     

     View Slide

103. The
     
     
     Future 🔮
     HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     

     View Slide

104. — ISLANDS & SERVER COMPONENTS & RESUMABILITY, OH MY!, BY RYAN CARNIATO
     

     View Slide

105. ROUTING (& MPAs vs. SPAs)
     

     View Slide

106. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     

     View Slide

107. HYDRATION
     

     View Slide

108. OKB JAVASCRIPT
     

     View Slide

109. CODE EXTRACTION
     

     View Slide

110. (WHY) IS THE FUTURE
     

     View Slide

111. Closing
     
     
     Thoughts
     HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     

     View Slide

112. THE SOLUTION TO
     THE PROBLEM ONLY
     CHANGES THE
     PROBLEM.
     #1
     HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     

     View Slide

113. WHILE SEEN AS
     COMPETITIVE, A
     LOT OF THESE ARE
     ACTUALLY
     COMPLEMENTARY!
     
     
     — RYAN CARNIATO
     #2
     HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     

     View Slide

114. 🏝 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
     

     View Slide

115. 🏝 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
     

     View Slide

116. 🏝 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
     

     View Slide

117. 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!
     

     View Slide

118. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     

     View Slide

119. View Slide

120. 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
     

     View Slide

121. #4
     HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     

     View Slide

122. 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!
     

     View Slide

123. SOFTWARE
     DEVELOPMENT
     CONTINUALLY GOES
     THROUGH CYCLES.
     
     
     WHAT’S DIFFERENT NOW?
     
     
     WHAT’S TURNED INTO LOST ART?
     #5
     HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     

     View Slide

124. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     

     View Slide

125. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     

     View Slide

126. View Slide

127. 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!
     

     View Slide

128. A PICTURE IS
     WORTH A THOUSAND
     WORDS.
     #7
     HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     

     View Slide

129. THIS IS ME, NINE YEARS
     AGO, PRESENTING ABOUT
     IONIC AT AN IOS DEVELOPERS
     MEETUP TELLING THEM THAT
     ANGULAR WOULD BE THE
     FUTURE.
     

     View Slide

130. A PICTURE IS WORTH A
     THOUSAND WORDS.
     
     
     DON'T ALWAYS
     TRUST
     SPECULATIONS AND
     PREDICTIONS!
     #7
     HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     

     View Slide

131. THERE'S NO
     SILVER BULLET.
     IDENTIFY YOUR
     CORE METRICS.
     
     
     ALWAYS TRY TO CORRELATE BUSINESS
     METRICS WITH PERFORMANCE.
     #8
     HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     

     View Slide

132. HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     ↑ ALL THE LINKS!
     🧑🏫 TECHLABS
     🐦 @ythecombinator
     👨💻 MEDALLIA
     ⚡ PERF GDE
     

     View Slide

133. THAT’S ALL, FOLKS!
     
     
     THANKS! 👋
     QUESTIONS?
     ↑ ALL THE LINKS!
     HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!
     MATHEUS ALBUQUERQUE • @ythecombinator
     

     View Slide