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):
s 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 this is an object that maps these ids back to basically instructions for how to resolve the actual code behind this component so here the id it s the module id in the module system so the client is going to need to import from slash components slash counter in this example name is the export name so if it was export const counter you see counter here if it was export default function you would see default here and then chunks with some information on what code to load as well the thing i want to highlight here that to me was like the real eye opener of how this works is that the the rsc server gets to dynamically define which code the client should download that s interesting because if you think about the use case that probably this is coming from in a facebook sense is like the news feed where you may have a feed of components that are rendered dynamically based on data per user and what components are going to be on the screen is completely dynamic at run time server components means that the server can tell every single consumer of which code they need to download in order to render the different elements in that feed something that would be really hard without rsc so in some sense if you squint you can feel like you re going back in time a bit here in a good way in that you know you re going back to this model of having server side templating that just renders plain markup and then the dynamic parts of your page are script tags that either have inline scripts or references to external scripts for how to bring that static markup to life so it s kind of like going back to that model but we do it in a way that fits into the way we ve come to expect react to work where we get a single component tree we get to think in that sort of relatively single paradigm even across server and client and we don t have to deal with the low level intricacies of script tags we can think at a component level so from the client s perspective this means that we can get new server markup from the rsc server dynamically over the lifetime of the app while keeping client state this is the whole reason that we use react versus just setting inner html all the time so if we have our client manifest we have this object that says how do we map these placeholders in the tree that we ve serialized to real live components on the client and again client being both the ssr server and the browser what we need to do is pass that in as the second argument earlier i had an empty object just to keep it simple but here when we render our rsc stream we re passing in the client manifest so the consumers of our rsc server are able to get instructions for how to resolve these client components that are nested within the tree so the important thing to realize here is that it s all about serialization it s about taking a tree of react elements and serializing them and that means that the props need to be serializable as well so in our basic example you can see that because our initial value here is the number of 0 that s completely fine to serialize but this is why you can t do things like again put a click handler on your client component because if you think about it at the end of the day it needs to be serialized into this tree of elements to go over the network and we can t do that 6 understanding react s server and client components 15 03 short description server components are just virtual dom over the network rsc is all about having serializable components and trees of react elements that we can send over the network it combines the best of classic web development and progressive enhancement with the benefits of modern development the complexity of infrastructure tooling and developer considerations should not be downplayed but a simple mental model can help understand how server components work and their trade offs in real applications so in our basic example you can see that because our initial value here is the number of 0 that s completely fine to serialize but this is why you can t do things like again put a click handler on your client component because if you think about it at the end of the day it needs to be serialized into this tree of elements to go over the network and we can t do that so if you want to have click handlers they need to be in the source code of the component but not in the props that are in that element tree interestingly of course in the react world children are basically just props at the end of the day they re serialized in a similar way and this is what allows us to do this interesting technique of nesting server components within client components because if you think about again that react tree we ve got our placeholder here this react client reference for an alert component with a title prop that s all serializable and then the children here is a create element call so it s a plain html element now this obviously in real life in a real project could get a lot more complicated and could have nested server components but the key point here is that we have a client component whose children is a result of another server component and to me i think seeing it as a serialization problem helps me understand the mechanism for how i can nest components in the react tree but i can t do it in the source code so there are two types of elements we re dealing with here the first is plain old serializable html elements again it s like just static markup that we re talking about and then for anything more complicated than that or interactive we ve got instructions in the react tree for resolving and rendering components and this is where the whole concept of client components comes in now of course you don t write this by hand just like jsx that we showed before this is extending jsx to be able to do a lot more in fact and this is where bundlers come in the whole point of using bundlers is to deal with this kind of complexity for us and so when you as a developer put a use client directive at the top of a client component file and then elsewhere in your app in a server context you re importing this counter component you don t get a reference to the actual function because again we can t put that in the react tree counter in that context actually automatically becomes this object that we saw before this client reference with the id of counter put in there for us and of course this id needs to map to something in the manifest and so that s going to be managed for us as well this generation of this object of how do we map these placeholders in the react tree to the components that are going to run on the client this is all managed for us because you need this integration with the bundler this is why these long named packages exist you have the react server webpack veet these exist to manage the differences between the different bundlers for us and of course in practice just like ssr was years ago when we got started with ssr wiring this up into a real application is complicated and this is where frameworks come in of course that s why again today you re going to reach for a framework if you want to use server components today but if someone asks you what are server components hopefully as a result of this talk you re not just going to say again rearranging the words that server components are components that only run on the server you can say something like server components are just virtual dom over the network you can think about the fact that ultimately rsc is all about having serializable components having trees of react elements that we can send over the network and with that obviously comes some restrictions but when you understand the mechanism it makes more sense what i like as someone who has been doing web development for a long time at this point is that i get to think about it more primitively as server side templateing with script tags but done in a way that feels more at home in react again getting us closer to that world of the best of classic web development and progressive enhancement but with the benefits of modern development that i have come to expect with react i don t want to downplay the complexity the very real complexity that is at play here both in terms of the infrastructure the tooling and what you have to think about as a developer but hopefully what i ve done is given you a simple mental model to work with so that when you go back to your work and you look at server components maybe for the first time or maybe you ve been working with it for a while you have a simple mental model for how it works in practice and what those trade offs mean for you in terms of your application qna understanding server side components 19 15 short description that s it for me thank you so much for listening i really enjoy this because i use next js now it s my go to whenever i m building an application and i understand ho...