Meta tags:
description= React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.;
Headings (most frequently used words):
server, components, understanding, react, and, to, client, simplifying, faq, comments, introduction, using, as, library, for, rsc, responses, serialization, manifest, qna, side, benefits, of, check, out, more, articles, videos, workshops, on, related, topic, subscribe, the, top, dev, conferences, available, in, other, languages,
Text of the page (most frequently used words):
the (377), server (228), and (216), that (189), react (176), components (164), you (125), this (115), for (92), #client (83), with (76), what (55), are (51), how (48), side (48), have (44), but (43), from (42), can (41), like (40), #component (40), rendering (40), going (40), rsc (38), here (38), just (37), code (34), about (32), our (32), into (32), now (28), more (26), get (25), think (25), work (25), use (24), was (24), your (23), they (23), real (23), because (23), them (21), ssr (21), render (21), html (21), elements (21), some (20), there (20), got (20), not (19), performance (19), workshop (19), simple (19), where (19), development (18), next (18), also (18), which (18), talk (18), tree (18), 2026 (17), all (17), when (17), learn (16), app (16), application (16), using (16), again (16), want (15), top (15), web (15), people (15), one (15), content (15), building (15), well (15), working (15), way (15), new (14), model (14), need (14), these (14), something (14), very (14), over (14), summit (13), min (13), framework (13), why (13), really (13), data (13), network (13), then (13), would (13), even (13), course (13), jsx (13), counter (13), function (13), had (12), should (12), world (12), mental (12), developer (11), first (11), understand (11), sense (11), create (11), back (11), stream (11), interactivity (11), whether (11), being (11), question (11), time (11), serialized (11), mark (11), element (11), will (10), 2023 (10), experience (10), out (10), only (10), debugging (10), run (10), point (10), might (10), were (10), interesting (10), could (10), props (10), day (9), advanced (9), deal (9), javascript (9), build (9), full (9), fetching (9), static (9), tools (9), benefits (9), different (9), while (9), manifest (9), much (9), thing (9), send (9), dom (9), basic (9), means (9), terms (8), 2027 (8), has (8), those (8), space (8), applications (8), problem (8), things (8), lot (8), short (8), description (8), kind (8), big (8), its (8), used (8), today (8), before (8), virtual (8), call (8), product (7), berlin (7), frameworks (7), moving (7), makes (7), actually (7), come (7), see (7), without (7), process (7), good (7), questions (7), markup (7), having (7), been (7), progressive (7), enhancement (7), dalglish (7), may (6), london (6), library (6), best (6), nextjs (6), such (6), say (6), rscs (6), understanding (6), both (6), deployment (6), within (6), strategies (6), api (6), production (6), don (6), challenges (6), who (6), introduces (6), still (6), load (6), serialization (6), simplifying (6), perspective (6), example (6), fact (6), doing (6), early (6), any (6), mean (6), complexity (6), know (6), serialize (6), getting (6), serializable (6), reference (6), object (6), initial (6), level (6), same (6), take (6), functions (6), dev (5), design (5), tags (5), their (5), technologies (5), nested (5), actions (5), around (5), explore (5), help (5), off (5), guide (5), stack (5), dynamic (5), trade (5), capabilities (5), hydration (5), directly (5), developers (5), user (5), interactive (5), between (5), apps (5), handling (5), context (5), module (5), screen (5), maybe (5), end (5), ask (5), whole (5), make (5), trying (5), children (5), complicated (5), concept (5), put (5), needs (5), click (5), maps (5), dynamically (5), coming (5), string (5), found (5), express (5), answer (5), support (4), sign (4), updates (4), state (4), node (4), frontend (4), effectively (4), through (4), cover (4), hands (4), fast (4), year (4), too (4), power (4), behind (4), offs (4), exploring (4), logic (4), allow (4), pre (4), later (4), provide (4), case (4), live (4), certain (4), definitely (4), saying (4), seo (4), said (4), many (4), sure (4), guess (4), find (4), beyond (4), let (4), two (4), plain (4), instructions (4), able (4), saw (4), map (4), placeholders (4), done (4), basically (4), value (4), slash (4), name (4), download (4), keep (4), does (4), calls (4), response (4), job (4), pure (4), shopify (4), gitnation (3), faq (3), tech (3), conferences (3), coding (3), oct (3), york (3), nov (3), events (3), workshops (3), systems (3), css (3), typescript (3), articles (3), discover (3), further (3), layouts (3), always (3), offer (3), own (3), technology (3), finally (3), show (3), patterns (3), life (3), creating (3), system (3), implementing (3), project (3), fundamentals (3), topic (3), calling (3), deep (3), modern (3), renders (3), streaming (3), diving (3), traditional (3), practical (3), passing (3), 2024 (3), rendered (3), reducing (3), hard (3), helps (3), years (3), explores (3), discusses (3), improved (3), webpack (3), happens (3), faster (3), query (3), version (3), migrating (3), enabling (3), dodds (3), deeper (3), waku (3), libraries (3), simplificando (3), los (3), componentes (3), del (3), servidor (3), available (3), other (3), page (3), versus (3), environment (3), enjoy (3), move (3), however (3), another (3), running (3), dug (3), looking (3), wanted (3), sent (3), slido (3), thank (3), never (3), information (3), dealing (3), comes (3), bundlers (3), importing (3), actual (3), becomes (3), long (3), started (3), hopefully (3), ultimately (3), obviously (3), script (3), classic (3), expect (3), given (3), works (3), allows (3), placeholder (3), nest (3), completely (3), handler (3), gets (3), resolve (3), export (3), feed (3), based (3), every (3), single (3), consumer (3), sort (3), turn (3), arguments (3), inside (3), since (3), offload (3), responses (3), pull (3), literally (3), describe (3), enough (3), high (3), straightforward (3), quite (3), intimidating (3), until (3), days (3), decade (3), rich (3), remix (3), team (3), initially (3), handle (3), dalgleish (3), nation (2), stats (2), community (2), feedback (2), company (2), amsterdam (2), jsnation (2), singapore (2), apr (2), asia (2), dec (2), adopting (2), edition (2), engineer (2), authors (2), subscribe (2), upcoming (2), miss (2), talks (2), free (2), conference (2), management (2), hooks (2), practices (2), multipass (2), main (2), beta (2), capability (2), develop (2), focus (2), advantages (2), related (2), experimental (2), join (2), reusable (2), paradigm (2), tricky (2), head (2), meta (2), exactly (2), connect (2), pieces (2), deploy (2), cloudflare (2), smart (2), placement (2), fits (2), platform (2), little (2), away (2), possible (2), feat (2), diy (2), cycle (2), approach (2), authentication (2), features (2), redwoodjs (2), skills (2), gateway (2), backend (2), introduction (2), cache (2), suspense (2), future (2), start (2), scratch (2), implement (2), look (2), bridge (2), featured (2), combine (2), constraints (2), topics (2), differences (2), stay (2), edge (2), mastering (2), solve (2), bound (2), read (2), shipped (2), improving (2), improve (2), navigation (2), author (2), loved (2), shipping (2), uploadthing (2), implementation (2), optimization (2), additionally (2), format (2), search (2), try (2), epic (2), tale (2), preparing (2), setting (2), pages (2), caching (2), kent (2), explains (2), enhancements (2), com (2), handles (2), include (2), integration (2), videos (2), interest (2), check (2), despite (2), downsides (2), google (2), site (2), amount (2), needed (2), depends (2), feel (2), extreme (2), text (2), benefit (2), advantage (2), bounces (2), perks (2), mind (2), less (2), important (2), type (2), reason (2), pouring (2), asking (2), recommend (2), yeah (2), haven (2), though (2), change (2), brings (2), models (2), decision (2), down (2), serializing (2), strictly (2), realize (2), times (2), specific (2), listening (2), whenever (2), necessarily (2), old (2), resolving (2), write (2), managed (2), exist (2), manage (2), practice (2), ago (2), reach (2), someone (2), result (2), rearranging (2), words (2), trees (2), mechanism (2), closer (2), infrastructure (2), tooling (2), source (2), number (2), fine (2), handlers (2), considerations (2), body (2), seen (2), inline (2), import (2), default (2), probably (2), tell (2), order (2), squint (2), parts (2), scripts (2), references (2), bring (2), relatively (2), keeping (2), browser (2), pass (2), taking (2), represent (2), access (2), memory (2), cannot (2), turned (2), challenge (2), familiar (2), imagine (2), writing (2), structure (2), sending (2), fresh (2), line (2), most (2), happening (2), turning (2), concepts (2), http (2), return (2), via (2), tag (2), felt (2), pipeable (2), depending (2), learning (2), opinions (2), arguably (2), architecture (2), apis (2), latest (2), explained (2), simplify (2), interested (2), shift (2), implications (2), especially (2), place (2), nice (2), described (2), method (2), almost (2), heard (2), modules (2), fundamentally (2), maintaining (2), melbourne (2), australia (2), currently (2), transcription (2), due (2), architectural (2), attracted (2), sentry (2), october (2), online (2), rights, reserved, conduct, privacy, policy, conditions, legal, rss, feeds, assistance, promote, contact, careers, techlead, conf, orgs, nyc, sponsor, grow, depth, leader, insights, core, teams, experts, companies, follow, discounted, tickets, newsletter, testing, fullstack, quality, builders, founders, svelte, vue, popular, mentors, menu, continues, evolve, continuing, partnership, attendees, major, reusability, enabled, directory, alpha, 120, minute, miro, ecosystem, proved, exception, significant, improvement, fair, wrap, half, ground, mini, produced, together, form, busy, particular, developed, perfectly, onto, serverless, sql, database, combined, greater, scenes, insight, after, recent, innovations, greg, brimble, 104, storybook, becoming, increasing, confidence, unit, tests, authorization, opportunity, examine, gaining, valuable, give, amy, dutton, 160, prerequisites, fetch, revalidate, parallel, test, serve, vercel, easter, egg, unrelated, accessibility, wrapping, alice, mauro, 2022, spotlight, evolving, mechanics, techniques, raw, rendertostring, hydrateroot, truly, hydrates, upgrade, rendertopipeablestream, selective, integrate, showing, complement, prevent, mismatches, manual, krasimir, tsonev, 179, 2025, immersive, hour, game, changing, revolutionizing, harness, potential, lightning, efficient, seamlessly, blending, unmatched, dive, making, easier, exercises, examples, expert, guidance, projects, essential, optimizing, maximizing, useactionstate, useformstatus, useoptimistic, seasoned, pro, equip, knowledge, elevate, ahead, curve, master, cutting, unleash, maurice, beijer, 150, interrupting, interfaces, caused, cpu, delays, flash, unstyled, soft, enables, fluent, bestselling, book, software, host, contejas, podcast, tejas, kumar, highlights, approuter, safe, usage, delves, centralization, covers, latency, lambda, partial, faced, overall, emphasizes, youtuber, known, primarily, memes, hot, takes, useful, devs, theo, browne, intermediate, reduce, bundle, size, engine, abstract, allowing, flexibility, choosing, stage, starting, postman, nikhil, sharma, study, five, discussing, migration, involves, planning, adding, powerful, leveraging, router, impact, costs, ephem, fredrik, höglund, demonstrates, integrating, switching, async, loaders, resolution, buttons, concludes, resources, creator, epicweb, epicreact, testingjavascript, compares, promises, integrates, deserialization, speaker, supports, bundling, routing, plans, zustand, jotai, daishi, kato, constantly, spark, git, skill, stellar, career, languages, expand, huge, win, hits, users, hit, pretty, quickly, classes, downloaded, considering, perhaps, website, consideration, blog, rehydrate, wall, pointless, bottom, middle, document, blogs, disposal, provides, quick, minimal, excessive, providing, tailor, cost, associated, worth, earliest, went, comfortable, theoretical, exercise, excited, apprehension, runs, actively, sorry, brought, changes, anyone, recommendations, drop, discord, degree, forced, soon, choice, speak, payload, sometimes, cases, decide, payloads, slider, joining, wasn, devices, 2010, watch, compare, notes, qna, types, talking, anything, than, hand, showed, extending, directive, file, elsewhere, automatically, generation, bundler, named, packages, veet, wiring, asks, restrictions, primitively, templateing, feels, home, downplay, play, interestingly, similar, technique, nesting, alert, title, prop, key, whose, seeing, combines, downplayed, compiled, mix, turns, ids, const, chunks, highlight, eye, opener, define, facebook, news, per, bit, templating, either, external, across, low, intricacies, lifetime, inner, says, second, argument, earlier, empty, consumers, button, slightly, zero, compile, stringifying, compiles, defines, crucial, must, strings, talked, primitive, values, rse, arrays, reverse, aren, executing, difference, somewhere, else, needing, generated, rerun, hone, opened, eyes, easy, established, anytime, assigning, variable, rerunning, absolutely, hook, elephant, room, straight, already, word, thrown, reactive, sitting, demystify, reframe, view, aspect, nodes, seem, surprising, rest, graphql, requests, looks, standalone, purposes, heading, diagrams, pulling, bringing, pack, request, torn, likely, dirty, bunch, naturally, knowing, often, additional, responsible, necessary, facilitate, leaves, tradeoffs, goal, achieve, oversimplifying, generate, seems, tend, along, lines, syntax, sugar, became, sufficient, evolution, surprise, admit, looked, idea, supposed, open, respected, knew, struggling, stark, contrast, generally, worked, equally, came, natural, conceptually, didn, functional, class, among, properties, instance, funnily, ended, heretical, returning, made, believe, realized, vanilla, extract, sold, everything, general, exciting, part, gap, push, worlds, problems, importantly, background, led, current, reality, took, hours, flying, pleasure, piqued, seemed, strange, shortened, español, connecting, offering, video, summary, post, comment, register, comments, share, detailed, newness, imply, adjustments, recommended, rethink, integrations, face, enhanced, reduced, better, crawlable, engines, efficiently, offloading, tasks, thus, thought, operations, simplifies, aspects, significance, according, effective, compared, professional, focusing, areas, involved, presented, biggest, release, struggled, break, under, hood, built, upon, crashes, slowdowns, regressions, prod, seer, unifies, traces, replays, errors, profiles, root, causes, breaks, fix, promoted, rate, bookmark, spanish, audio, player, settings, event, shown, ticket, holders, english, log,
Text of the page (random words):
ge performance as well as importantly seo support for google for us at that time so that work that background for me in server side rendering is what s ultimately led me to my current full time work on the remix team at shopify working really hard to make that progressive enhancement experience a reality for all of you so it s with it s in that context that i m sure it s no surprise to you that i m very interested in react server components because it s such a big shift in terms of how we think about react but i have to admit that when i first looked at server components i found them quite intimidating not at a high level api perspective but more from the sense that it i had less of an idea of how i m supposed to think about the architecture of my application what s the implications on how i think about and build my apps how does it even work and especially if i m in a framework context what does it mean to build a framework on top of server components there are a lot of open questions and people i respected that knew a lot about react were also struggling with this question to me this was in stark contrast to my experience with react up until that point because i found that generally i was always able to have a very simple mental model of how react worked for example if i had my app component that we re all used to working with i could render it to an element on the screen but equally i could take that same application component and i could render it to a string of html on the server this is what got me interested in react in the first place and to me this mental model was nice and simple when it came to rendering a component of course early on the natural question would be what is a component given every framework has a different take on what that sort of concept might mean and what was interesting in react is that the answer was nice and simple is that conceptually components are basically pure functions that just described what should be on the screen at that given time so in the early days of react we didn t have functional components we had react create class and it would have a render method among other properties on that object and inside of that method we would have access to this props on the instance of the component so it s a very different api but if you squint it kind of felt like working with a pure function and that s how i described it to people who were new to react and funnily enough that ended up being the api we deal with today they literally are functions now and of course our components are going to be rendering jsx and the question then would be what is jsx for many of us especially in those early days it was a very interesting question to have to deal with but the answer was quite simple it s that jsx is just function calls that s just the way you had to think about it so when we saw code like this that again in the early days of react for many of us it was almost heretical that we would be returning html elements from our javascript functions it almost made no sense to us read also react server components the next evolution in web development 2 understanding server components 04 07 short description when it was explained to us that jsx is just function calls it became straightforward however the simple answer of server components being components that only run on the server is not sufficient i want to simplify server components and provide a good mental model of how they work beyond the high level apis but when it was explained to us that it s really just a syntax sugar for writing code like this where you re just calling a function passing in some arguments to describe what element you want the element type the props the children it was quite straightforward so now that brings us to the latest question in react which is what are server components seems like a straightforward enough question and the simple answer that people tend to reach for i ve found is something along the lines of this where you say server components are components that only run on the server now the problem i have with this as an answer beyond the fact that it s basically just rearranging the words of the question is that it leaves me with no mental model for how they work what are the constraints or tradeoffs what does that mean for my architecture what can i do what can t i do with them how do i use them at an api level from react so i had very little to work with here so the goal here for my talk is to help do to you what i had to work to achieve which is simplifying server components hopefully not oversimplifying them but simplifying them enough so you have a good mental model of how they work beyond the high level apis that you might write to generate server components 3 using react as a library for server components 05 17 short description react can be seen as both a library and a framework depending on how it is used when working with server components next js is often used which introduces additional opinions to understand server components directly in react we will build a basic rsc server and connect it to an ssr server the ssr server is responsible for client side pre rendering while the rsc server handles rendering server components we import the necessary libraries such as express and react server to facilitate this process now the first thing that makes this tricky is the fact that react is torn between whether it s a library or a framework depending on whether you re using it directly or whether more likely you re using it via some sort of meta framework so that means today if you want to get your hands dirty working with server components you re probably going to be using next js which means that you re not just learning about how to use server components you re learning about a bunch of opinions on top that frameworks naturally have to provide so you re arguably not much closer to knowing what it means to use server components directly in react today what i want to do is show you what it looks like to use it via react as a library because ultimately react it is a standalone project and so what we re going to do is take an application like this very very simple for today s purposes we re not even going to deal with nested components here just a basic app component that renders an html tag a body tag and a heading with some plain text inside so what we re going to do today is start off by building a basic rsc server its job as you might guess is to render server components now i call that out because that s literally its only job it s just to render server components and pass them off to the ssr server or to the client for live updates over the course of your running application so like i said we re going to keep this very very simple we re going to pull in express now i want to show you real code here and not diagrams because this is what i felt like i needed in order to get some sense of what s happening here we re pulling in express and here we re bringing in this render to pipeable stream function from react server dom web pack slash server so we ll come back to that later but we ve got this function here and now like i said we re going to keep this very simple where literally any request to our express server we re going to render the same thing but obviously you can imagine in a real world app you re going to be dealing with data coming into the server to describe what exactly you want to render so here we re going to render to pipeable stream or a node stream our app component that we saw before and from it we re going to get an rsc stream and we re going to send that to our consumer so we re creating a stream of a stream of the response of rendering this app component in our rsc server so now that we ve got our absolutely most basic possible rsc server let s hook it up to an ssr server now i m going to call out the elephant in the room straight away which is we ve already got a server now we ve got an ssr server the word server is getting thrown around a lot we ve got server components and now we ve still got this relatively old concept now in reactive server side rendering and these two concepts are sitting side by side to help demystify these two concepts what i ve found is it helps in this world to reframe the ssr server as being about client side pre rendering its job is to just take that initial view of what the browser is going to render render that to html on the server and from that point on the ssr server from a rendering perspective its job is done you re never going to talk to that server to get react components or html again so it s kind of like it s just pre rendering the server aspect still happens on the rsc server later so here our ssr server is going to pull in some libraries of course we re going to bring in the http module nodes http module we re going to pull in express now one thing i want to call out here that s interesting is we re importing from react server on webpack slash client now that might seem surprising at first that we re importing from client but think of it in the same way that your server might have a rest client on it or a graphql client in the same way here we ve got an rsc client and we re going to call this create from node stream function and then also we re going to return a stream from this as well so again to keep it simple any requests coming in we re going to render the same thing we re going to talk to our rsc server and get the rsc response so that app component we saw before is coming in from the rsc server and this is where it gets interesting we call this create from node stream function we ve got the rsc response coming in and from that we re getting some virtual dom and from that we can create html and send that to the client 4 understanding rsc responses 09 06 short description we re turning rsc responses which are serialized virtual dom into html and sending them to the client this allows us to offload code from the client and get fresh markup without rerunning the code dealing with static html is simple but the challenge is handling interactivity in client side apps so here we ve turned that rsc server into html and sent it to the client so this is the line of code i really want to hone in on because to me this was the one that opened my eyes the most to what s actually happening is that we re getting an rsc response we re getting something from the network and we re turning it into virtual dom why that s interesting well virtual dom is an easy concept for established react developers because we deal with this all the time anytime you have a component rendering jsx elements like this or assigning them to a variable in this case you re creating these elements in memory based on code that s executing live in that environment but the difference here i guess what s interesting is that server components is just serialized virtual dom it s taking react elements that were rendered on one server in one environment and sending it over the network to render somewhere else without needing the code that generated it so this means of course that we can offload code from the client this is the whole point that we can get fresh markup without having to rerun the code so static html is simple to deal with so again if we re looking at this component we were just rendering some basic tags with strings inside of course if you like we talked about before if you re familiar with jsx you know that this maps two calls to react create element and since all of these arguments here are primitive javascript values even without rse you could have done this years ago you could serialize this into a string of nested arrays and send that over the network and you could you can imagine writing code that would then do the reverse turn this data structure into a tree of react elements so that as a problem is actually not too complicated but the problem then becomes you know our apps aren t just static html like this how do we deal with the interactivity that we expect with client side apps 5 serialization and client manifest 11 01 short description if we nest the counter component within the tree of react elements serialization becomes a problem the counter function cannot be turned into a string and sent to the client interactivity is a challenge in server components the jsx compiles into a react client reference which is a placeholder for components that need to run on the client the client manifest maps these references to instructions for resolving the code behind the component the rsc server dynamically defines the code the client should download enabling dynamic rendering of components based on user data server components allow the server to tell every consumer which code they need to download to render elements with react we can get new server markup dynamically while keeping client state the client manifest maps serialized placeholders to real components on the client serialization is crucial and the props must be serializable click handlers on client components cannot be serialized into the network tree of elements so if we were to take this counter component and nest it within this tree of react elements that we now have a problem if we re trying to serialize it so if we were to take our basic implementation of stringifying the arguments to react create element we can t turn this counter function into a string there s no way to to represent that in that format so we can send it over to the client they need access to the code behind this not just not just the component in memory so that means that it s not even just strictly about components really it s just about being able to turn these things into a string to send over the network to serialize them so if you were to have a button component with a click handler you re going to run into the same problem so how do we get interactivity let s make this even slightly more complicated here and say that we re going to render our counter component in the tree with some props we re saying the initial value is zero so what does the jsx compile to in an rsc world if we can t send the real component over the network so here we ve got our app component and of course the jsx is going to get compiled into something like this we ve got our create element call to html we ve got our create element call to body as we ve seen before but here s where it gets interesting because we have this component in the mix what we re actually doing in terms of what the jsx turns into is a react client reference so this is like a placeholder in the tree saying we don t have the actual elements here we have a reference to a component that needs to run on the client it has an id here of counter and then of course being create element we ve got the props inline there as well so this id of counter here that needs to map to something so we know how to resolve that to the real component and that s where the concept of this client manifest comes in ...
|
