Tweet
Tweet

Slide 1

Slide 1 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! • OCTOBER 10, 2024. Hallo, Utrecht! 👋 🇳🇱

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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?

Slide 8

Slide 8 text

HOW AND WHERE DO I WANT TO RENDER CONTENT?

Slide 9

Slide 9 text

WHEN DOES AN APP BECOME INTERACTIVE?

Slide 10

Slide 10 text

WHEN DOES AN APP BECOME INTERACTIVE?

Slide 11

Slide 11 text

#question 🤔 How did we get here?

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

The Past HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /

Slide 15

Slide 15 text

1995

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

#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

Slide 22

Slide 22 text

— 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! 🏃

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Hydration HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /

Slide 27

Slide 27 text

#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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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? 🤯

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

HYDRATION: NON-DETERMINISTIC

Slide 37

Slide 37 text

HYDRATION: NON-DETERMINISTIC

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Islands Architecture 1993 1998 2008 2017 2020 2021 2022 2023 2024 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

#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

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

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.

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

ISLANDS ARCHITECTURE PAGE LAYOUT POST TITLE POST CONTENT COMMENTS SOCIAL CTA

Slide 50

Slide 50 text

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)

Slide 51

Slide 51 text

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)

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

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.

Slide 57

Slide 57 text

ISLANDS ARCHITECTURE: ASTRO - - - import MyReactComponent from ' . . /components/MyReactComponent.jsx'; - - -

Slide 58

Slide 58 text

ISLANDS ARCHITECTURE: ASTRO - - - import MyReactComponent from ' . . /components/MyReactComponent.jsx'; - - -

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Resumability 1993 1998 2008 2017 2020 2021 2022 2023 2024 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

OPA LANGUAGE 🤯

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

#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

Slide 70

Slide 70 text

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.

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

RESUMABILITY

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

RESUMABILITY

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

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.

Slide 84

Slide 84 text

HYDRATION IN REACT: BEFORE FETCHING DATA (SERVER) RENDERING HTML (SERVER) LOADING CODE (CLIENT) HYDRATING TIME TO FIRST BYTE FIRST CONTENTFUL PAINT TIME TO INTERACTIVE

Slide 85

Slide 85 text

HYDRATION IN REACT: AFTER TIME TO FIRST BYTE FIRST CONTENTFUL PAINT TIME TO INTERACTIVE […] FETCHING DATA (SERVER) RENDERING HTML (SERVER) HYDRATING LOADING CODE (CLIENT) […] […] […] […] […] […]

Slide 86

Slide 86 text

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.

Slide 87

Slide 87 text

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.

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

React Server Components 1993 1998 2008 2017 2020 2021 2022 2023 2024 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

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.

Slide 94

Slide 94 text

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.

Slide 95

Slide 95 text

RSC vs. SSR

Slide 96

Slide 96 text

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.

Slide 97

Slide 97 text

RSC: CLIENT COMPONENTS 'use client'; import React from 'react'; function Counter() { const [count, setCount] = React.useState(0); return ( setCount(count + 1)}> Current value: {count} ); } export default Counter;

Slide 98

Slide 98 text

RSC: BOUNDARIES PAGE LAYOUT POST TITLE POST CONTENT COMMENTS SOCIAL CTA

Slide 99

Slide 99 text

APP HEADER PAGE LAYOUT POST POST TITLE POST CONTENT COMMENTS SOCIAL CTA RSC: BOUNDARIES

Slide 100

Slide 100 text

RSC: BOUNDARIES APP HEADER PAGE LAYOUT POST POST TITLE POST CONTENT COMMENTS SOCIAL CTA 'use client' 'use client'

Slide 101

Slide 101 text

RSC: BOUNDARIES APP HEADER PAGE LAYOUT POST POST TITLE POST CONTENT COMMENTS SOCIAL CTA 'use client'

Slide 102

Slide 102 text

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.

Slide 103

Slide 103 text

RSC: BEFORE — RSC FROM SCRATCH. PART 1: SERVER COMPONENTS #5 BY DAN ABRAMOV

Slide 104

Slide 104 text

RSC: AFTER — RSC FROM SCRATCH. PART 1: SERVER COMPONENTS #5 BY DAN ABRAMOV

Slide 105

Slide 105 text

RSC: PAYLOAD — DEVTOOLS FOR REACT SERVER COMPONENTS BY ALVAR LAGERLÖF

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

RSC: USE CASES

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

REACT SERVER COMPONENTS

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

REACT SERVER COMPONENTS

Slide 118

Slide 118 text

Partial Prerendering 1993 1998 2008 2017 2020 2021 2022 2023 2024 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

PARTIAL PRERENDERING: NEXT experimental: { ppr: true } }>

Slide 121

Slide 121 text

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.

Slide 122

Slide 122 text

PARTIAL PRERENDERING PAGE LAYOUT NAVBAR PRODUCT INFORMATION RECOMMENDED PRODUCTS CART

Slide 123

Slide 123 text

PARTIAL PRERENDERING PAGE LAYOUT NAVBAR PRODUCT INFORMATION RECOMMENDED PRODUCTS CART RENDERS ALL THE STATIC CONTENT INSTANTLY FROM THE EDGE

Slide 124

Slide 124 text

PARTIAL PRERENDERING PAGE LAYOUT NAVBAR PRODUCT INFORMATION RECOMMENDED PRODUCTS CART WHILE THE PAGE LOADS (STYLES, SCRIPTS, ETC) RENDER THE REST FOR EACH USER, DYNAMICALLY

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

PARTIAL PRERENDERING

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

Server Islands 1993 1998 2008 2017 2020 2021 2022 2023 2024 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

SERVER ISLANDS: ASTRO experimental: { serverIslands: true }

Slide 132

Slide 132 text

SERVER ISLANDS PAGE LAYOUT NAVBAR PRODUCT INFORMATION RECOMMENDED PRODUCTS CART

Slide 133

Slide 133 text

SERVER ISLANDS

Slide 134

Slide 134 text

SERVER ISLANDS

Slide 135

Slide 135 text

SERVER ISLANDS VS. PPR

Slide 136

Slide 136 text

No content

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

— ISLANDS & SERVER COMPONENTS & RESUMABILITY, OH MY! • RYAN CARNIATO

Slide 141

Slide 141 text

ROUTING & MPAs vs. SPAs

Slide 142

Slide 142 text

ROUTING & MPAs vs. SPAs SERVER FIRST

Slide 143

Slide 143 text

ROUTING & MPAs vs. SPAs WATERFALLS

Slide 144

Slide 144 text

ROUTING & MPAs vs. SPAs HYBRID ROUTING

Slide 145

Slide 145 text

HYDRATION

Slide 146

Slide 146 text

OKB JAVASCRIPT

Slide 147

Slide 147 text

OKB JAVASCRIPT

Slide 148

Slide 148 text

CODE EXTRACTION

Slide 149

Slide 149 text

CODE EXTRACTION

Slide 150

Slide 150 text

No content

Slide 151

Slide 151 text

CODE EXTRACTION import json from "./foo.json" with { type: "json" }; import ComponentA from "./A" with { type: "client" } import ComponentB from "./B" with { type: "both" }

Slide 152

Slide 152 text

COMPILERS

Slide 153

Slide 153 text

COMPILERS

Slide 154

Slide 154 text

COMPILERS

Slide 155

Slide 155 text

COMPILERS

Slide 156

Slide 156 text

COMPILERS

Slide 157

Slide 157 text

INFRASTRUCTURE

Slide 158

Slide 158 text

WHY SOMETHING IS THE FUTURE ROUTING MPAs vs. SPAs CODE EXTRACTION OKB JAVASCRIPT REACTIVITY HYDRATION COMPILERS

Slide 159

Slide 159 text

WHY SOMETHING IS THE FUTURE

Slide 160

Slide 160 text

Closing Thoughts HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /

Slide 161

Slide 161 text

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

Slide 162

Slide 162 text

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

Slide 163

Slide 163 text

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

Slide 164

Slide 164 text

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

Slide 165

Slide 165 text

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

Slide 166

Slide 166 text

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

Slide 167

Slide 167 text

No content

Slide 168

Slide 168 text

APPLICATION HOLOTYPES

Slide 169

Slide 169 text

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

Slide 170

Slide 170 text

No content

Slide 171

Slide 171 text

APPLICATION HOLOTYPES — THE NATURE OF HYDRATION, BY RYAN CARNIATO

Slide 172

Slide 172 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! / #4 of 8

Slide 173

Slide 173 text

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

Slide 174

Slide 174 text

THESE DAYS THE BOUNDARIES ARE VERY DIFFERENT!

Slide 175

Slide 175 text

THESE DAYS THE BOUNDARIES ARE VERY DIFFERENT!

Slide 176

Slide 176 text

THESE DAYS THE BOUNDARIES ARE VERY DIFFERENT!

Slide 177

Slide 177 text

THESE DAYS THE BOUNDARIES ARE VERY DIFFERENT!

Slide 178

Slide 178 text

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

Slide 179

Slide 179 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /

Slide 180

Slide 180 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /

Slide 181

Slide 181 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /

Slide 182

Slide 182 text

No content

Slide 183

Slide 183 text

No content

Slide 184

Slide 184 text

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

Slide 185

Slide 185 text

No content

Slide 186

Slide 186 text

No content

Slide 187

Slide 187 text

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.

Slide 188

Slide 188 text

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

Slide 189

Slide 189 text

No content

Slide 190

Slide 190 text

A PICTURE IS WORTH A THOUSAND WORDS! #8 of 8 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! /

Slide 191

Slide 191 text

This is me, ten years ago, presenting about Ionic at an iOS developers meetup telling them it'd be the future of mobile development!

Slide 192

Slide 192 text

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

Slide 193

Slide 193 text

Matheus Albuquerque ↝ 👨💻 Staff SWE @ Medallia ↝ ⚡ Google Developer Expert ↝ 𝕏 ythecombinator

Slide 194

Slide 194 text

THAT’S ALL, FOLKS! THANKS! 👋 🇳🇱 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ⬆ ALL THE LINKS!