The Truth About React Server Components-The React Show 077
The Truth About React Server Components-The React Show 077
I spent a lot more time with React Server Components including porting a site to them and deploying! In this episode join me as I describe an in-depth experience with React Server Components and conclude with my real thoughts on where they are good but also where they fall short and what we might expect for the future of React!
My Book - https://www.thereactshow.com/book
https://www.thereactshow.com/
Content
0.37 -> [Music]
1.639 -> and welcome to the react show brought to
6.359 -> you from occupied Serrano territory by
9.36 -> me your host Thomas and a blustery
13.019 -> morning episode 77.
17.42 -> and we're back into react server
21.18 -> components but don't worry we won't be
24 -> rehashing what we've already covered um
26.58 -> I've just spent a lot more time with
29.4 -> them including a port to uh from a from
32.22 -> an old site to a new site that now uses
34.739 -> react server components and I'll discuss
38.04 -> what issues you'll likely run into it
40.44 -> then
41.3 -> thank you for joining us I'm actually
45.059 -> getting over being sick I think I
48.12 -> finally had the cold that everyone has
49.98 -> had
50.76 -> um or something but it knocked me out
52.559 -> for a week or so I'm starting to feel
55.02 -> better my voice is still pretty weak uh
58.739 -> so hopefully I'm feeling well enough I
61.8 -> can record this episode in one sitting
63.6 -> but yeah we'll see
65.519 -> um I'm not entirely sure since my throat
67.799 -> is a bit sore you know and I haven't
71.159 -> been talking much uh I I've been camping
73.799 -> out at Joshua Tree National Park by
75.9 -> myself and just sort of
78.439 -> recovering in my tent and I don't know I
81.96 -> haven't had much to say to myself so
83.88 -> haven't haven't worked my voice too much
86.46 -> um either that or I kept everything in
88.799 -> my head for once I don't know suppose
90.84 -> that's possible
92.84 -> uh but yeah as I write this and you know
96.299 -> the sun has risen on a new day and I'm
98.579 -> scraping the you know green out of an
101.46 -> avocado and I am feeling quite a bit
104.1 -> better
104.88 -> um and a good thing too because you know
107.22 -> I had to move campsites and
109.979 -> um it's so it's a funny thing most of
112.86 -> the campsites in the park now have been
115.68 -> changed to uh reservation only but my
119.64 -> experience so far is that only about 50
122.04 -> percent of the people that reserve a
124.619 -> spot actually show up
127.32 -> um and funny you know obviously that
129.3 -> isn't the right word right it's more
130.8 -> like frustrating
132.66 -> um you know see on on weekends uh like
135.239 -> now when I was writing this all of the
137.459 -> sites if you online they're booked but
140.7 -> then only half the people actually show
142.98 -> up so half the site's unused and for
146.7 -> people like me that like to do things on
149.099 -> the Fly there are never sites that can
151.379 -> be booked on the weekend at the last
153.3 -> minute they get booked up months in
155.099 -> advance
156.72 -> um
157.319 -> super frustrating I think the reason and
160.319 -> don't worry this ties into everything
162.3 -> but yeah I think the reason they you
165.599 -> know give for switching from first come
168.3 -> first served to reservations or like a
171.3 -> mix is that it prevents this thing where
173.519 -> a group of people swarm campgrounds
175.5 -> looking for sites even when you know
178.019 -> maybe like during peak season all the
180.36 -> sites are actually in use so you just
183.18 -> you know have people driving around
184.98 -> right so reservations seem like a
187.379 -> potentially great solution and I'm sure
189.959 -> the thinking is like well now all the
192.48 -> sites will actually get used and will
194.519 -> prevent people from driving around their
196.92 -> pollution spewing Vehicles clogging the
199.379 -> roadways looking for a campsite
202.44 -> um
203.28 -> but now you can see in practice it
206.64 -> doesn't really work that well either now
209.58 -> the campgrounds are severely
211.459 -> underutilized and well you know if you
214.44 -> listen to this show right you know me
216.12 -> I'm always thinking about things in
217.62 -> terms of design and this seems like bad
221.819 -> design
222.739 -> just like in programming a lot of things
225.659 -> that you know might initially seem like
228.06 -> good design when you first concoct them
229.98 -> turn out to be bad design eventually
234.239 -> um based on things you learn later like
236.159 -> maybe some unexpected user Behavior like
239.159 -> you know people booking sites and then
240.959 -> not actually showing up or when it comes
243 -> to programming you know more likely it's
244.98 -> unexpected or hurried programmer
247.44 -> Behavior right
248.72 -> or you know or their boss told them to
251.28 -> get it done you know so anyways this is
254.34 -> why I'm so big on prototyping
258.18 -> um you know and I think the National
260.04 -> Park Service probably should have
261.84 -> prototyped this you know ahead of time
264.24 -> or at least done it better you know I
265.979 -> just feel like it's essentially
267.36 -> impossible to predict all the variables
270.18 -> you know and how humans will behave
274.259 -> um it's much better to just quickly try
276.6 -> things out and iterate based on the
278.88 -> results I think it doesn't you know that
282.06 -> type of thing doesn't fit so neatly in
283.86 -> the Box for budgeting and project
285.54 -> management stuff up front but it really
288.18 -> it just works better in practice in my
290.82 -> experience at least anyways speaking of
294.3 -> prototyping
295.86 -> um I've been hitting react server
298.199 -> components pretty hard and I've been
300.06 -> prototyping a new website for this show
303.9 -> for the reactshow.com based on xjs13
308.22 -> server components so today I wanted to
312.12 -> talk more about that experience and also
315.139 -> unlike in some of the other episodes on
318.3 -> this top topic before discuss more in
321.66 -> depth some of the complications and
324.419 -> potential downsides of react utilizing
327.24 -> server components I have a much better
329.639 -> understanding of them now and you know
331.86 -> what the potential landscape might look
333.72 -> like so it seems like the right time
336.66 -> first up though I you know I just want
339.96 -> to talk about the design goals of the
342.12 -> new website you know me
343.94 -> that's where we got to start right and
346.38 -> first I want to talk about the old
348 -> website and some of the you know issues
350.52 -> we had there and stuff I'd like to
352.56 -> design better in the new one
354.44 -> so the old website uh was actually
358.74 -> hosted on Squarespace we threw it up
361.139 -> real quickly didn't have time to like
363.06 -> code things you know
365.16 -> and it's been there ever since
367.5 -> um
368.3 -> it wasn't great for a lot of reasons uh
371.699 -> one of the biggest ones being it had a
373.979 -> lot of duplicate work for me
376.62 -> um so we host the feed
380.28 -> um for the actual episodes on a service
382.68 -> called Buzz Sprout which handles like
384.6 -> syndicating the episodes and everything
387.319 -> but there's no connection between that
389.699 -> and Squarespace so I had to like
391.199 -> manually copy and paste data and it
394.44 -> wasn't structured it was hard to work
396.419 -> with easy to make mistakes that type of
400.199 -> thing I think Squarespace is kind of
402.72 -> expensive another reason why you know
404.699 -> I'd like to get off of them
406.56 -> um it's also really difficult to
409.199 -> customize
410.539 -> and just like a lot of user experience
413.699 -> issues like I wanted
415.62 -> um better playback integration for
418.38 -> listening to episodes on the website you
420.479 -> know and Squarespace kind of the best I
422.759 -> could do is like embed episodes and it
426 -> wasn't great
427.319 -> um but it also didn't it has like a
430.139 -> member section but I wanted to I really
432.66 -> want to create like
434.34 -> a much better sort of Premium member
438.3 -> section for the react show not something
441.06 -> I've really talked a lot about yet
443.94 -> um been sort of prototyping it on
445.86 -> patreon but yeah the idea is I want to
449.4 -> make it so that the show can be
452.16 -> sustainable
454.38 -> and and to do it in a way that provides
456.84 -> value for the people that are sustaining
458.88 -> the show and so I have a lot of great
460.5 -> ideas but not easy to carry out on
463.199 -> Squarespace I've tried dabbling with
465.74 -> patreon and I don't think it does a very
468.78 -> good job for podcasts either and for you
471.78 -> know the things that I wanted to do with
473.52 -> it like you know maybe having premium
476.46 -> feeds and you know anyways I don't
479.4 -> really know what this is going to look
480.479 -> like if you're interested
482.46 -> um you know I'd love to hear from you if
483.78 -> there's anything you're looking for but
485.94 -> I'd love to create you know a really
487.979 -> awesome you know Community around the
490.02 -> show and just provide a lot of value for
492.84 -> anyone that's interested I don't know
494.46 -> what we're going to call it yet I've
495.479 -> been calling it kind of the after show
497.22 -> so far but you know we could call it the
500.039 -> reactors the nuclei I don't know you
502.86 -> know a couple of some fun names right
504.84 -> um but yeah anyways that's sort of a
507.3 -> side tangent but I do want the new site
510.479 -> to be able to support those type of
512.459 -> features
514.74 -> um and yeah so
517.68 -> I also wanted the new site to you know
520.02 -> like I mentioned have better like audio
522.18 -> player integration uh so you could you
525.3 -> know listen to episodes more easily and
528.06 -> in a better format have better support
530.04 -> for transcripts
531.839 -> um I've also been working on that
533.22 -> recently uh if you go to the
535.32 -> reactshow.com you'll see we do have some
537.839 -> transcripts for recent episodes which
539.82 -> I'm really excited to have
541.62 -> um I'd like to have better support for
543.18 -> that
545.22 -> um and uh yeah show notes that kind of
548.94 -> thing just better you know overall
551.1 -> integration with the podcast
553.32 -> um so those are the overall design goals
555.36 -> of course for me I want it to be fast
557.64 -> and
558.6 -> good user experience that type of thing
561.06 -> and uh you know now that I'm
564.24 -> recording this episode
566.22 -> um I've actually deployed it so you can
567.899 -> go check it out
569.58 -> um the reactshow.com currently is now
572.16 -> running on react server components in
574.2 -> xjs13 that I deployed to my own server
578.1 -> um yeah let me know what you think it's
579.779 -> still very much a prototype it's not
581.76 -> great code doesn't have great test
583.5 -> coverage but I'm still trying stuff out
585.18 -> we'll get there
587.279 -> um I'll include a you know a link also
590.16 -> to the source code which is really bad
591.959 -> but you know if you're curious
593.88 -> um you could uh definitely check that
596.399 -> out
597.24 -> um so yeah the next step
599.58 -> um will be the process of actually
602.24 -> creating this site and what I went
604.5 -> through and and that experience so uh
608.64 -> the first premise I guess is I didn't
611.459 -> have much time to do this
613.8 -> um I just don't I don't have the budget
615.839 -> to spend weeks on it so I wanted to try
619.98 -> to get it done as quick as I could and
622.92 -> um so I actually started with a Tailwind
627 -> podcast template so they have some
629.459 -> templates up now and then a podcast one
632.7 -> and I checked it out and it seemed cool
634.56 -> enough
635.64 -> um like you know definitely like it
637.14 -> would save me time
638.399 -> um so yeah I you know uh got that
641.64 -> template
643.14 -> and also I wanted to experience porting
645.779 -> you know uh something to react server
648.72 -> components and this template was not
652.079 -> made for react server components it's
653.7 -> made for traditional react and so I
656.88 -> could get that experience so it seemed
658.68 -> good
659.64 -> um and I'll talk a little bit also about
661.56 -> why Tailwind
663.6 -> um
664.62 -> so
666.06 -> I haven't used Tailwind extensively I've
668.7 -> used it a little bit but I wanted to get
670.68 -> a better experience with it because it's
672.12 -> so popular I like to have experience
674.339 -> with things you know I I'll be honest
677.459 -> I'm not super excited about it I
680.22 -> I I I
681.62 -> don't know if I think it's a whole lot
684.54 -> better than you know some of the other
686.22 -> things I was using but part of the
688.62 -> problem with the other things I was
690.24 -> using which were the more common
692.42 -> component libraries like chakra UI
694.98 -> material UI that kind of thing is
697.92 -> they're based on CSS and JS libraries
701.779 -> which just don't work with server
704.04 -> components yet and they might not ever
706.74 -> at least in their current form
708.74 -> and Tailwind
711.36 -> is nice because
713.399 -> the classes are specified up front and
716.519 -> so you can send the content in the
719.22 -> classes to the browser all you know on
722.519 -> the same request and so essentially you
724.5 -> can get content and styles all up front
727.32 -> instead of having like just sending the
729.36 -> content and then later styling it you
731.22 -> know getting that white page with all
732.779 -> that text you can just get a nice styled
735.779 -> page up front I was like that's a better
737.88 -> user experience I like that I want that
740.94 -> um so yeah that's uh why I decided to go
744.72 -> a Tailwind so in this process
748.44 -> um step one
750.019 -> was just to get the podcast template
753 -> working again in its original form so I
756.72 -> created the next js13
759.68 -> project using the experimental app
762.779 -> support which is for react server
764.7 -> components and then I put the template
766.5 -> in here so the site is running my goal
770.88 -> was to get it running in this you know
773.24 -> experimental form of next JS in its
777.3 -> original form and the great news is this
780.12 -> worked flawlessly I didn't have to do
782.519 -> anything just copied the code in and ran
784.92 -> it
785.66 -> and so that's cool because it means that
788.22 -> it's backwards compatible
790.76 -> and step two then was to convert as much
796.2 -> as possible
798.12 -> uh
799.38 -> two react server components
802.26 -> um and the approach I took uh was just
805.079 -> taking the old Pages directory and
808.68 -> renaming it to app
810.66 -> um so in xjs13 react server component
813.899 -> stuff goes in the app directory and
816.6 -> pages is kind of like Legacy so I just
820.079 -> renamed it from pages to app and and ran
822.779 -> the project that I was like all right
824.16 -> let's see what breaks you know and
828.18 -> it was cool it seemed like you could
830.399 -> incrementally do this as well so at one
832.74 -> point um
834.12 -> I tested out having a mix of stuff in
836.94 -> the pages and the app directory and you
838.62 -> could link between them and they seem to
840.54 -> work seamlessly together so you didn't
842.399 -> you don't necessarily need to take this
844.26 -> approach of just moving everything over
846.72 -> you could do it incrementally
848.7 -> um and that's really cool I think that's
850.8 -> definitely a good good way to do this
853.2 -> and it'll make it much easier to upgrade
855.06 -> existing sites
856.68 -> um but anyways back to my experiment
859.56 -> where I just moved everything over
861.839 -> um yeah a lot of things broke but it was
864.54 -> pretty easy to tell what broke which is
866.279 -> important whenever you're doing this
868.079 -> kind of thing for the most part it was
870.48 -> just like these errors that are like hey
872.16 -> you can't use context or use state or
875.339 -> whatever hook inside a server component
877.44 -> so it's pretty straightforward like okay
879.62 -> this isn't going to work
882.019 -> but then what I did is I was like I just
884.459 -> want to get it working again so I went
886.74 -> through and converted everything that
889.199 -> was broken to a client component just by
892.62 -> adding the used client annotation
895.04 -> to anything that was broken
897.68 -> and it took a little bit of you know
900.3 -> minor amount of refactoring and stuff
902.459 -> but for the most part it was that simple
904.26 -> I just added use client to a bunch of
906.12 -> stuff and it got the site working again
908.94 -> uh it was great it was like okay cool so
911.82 -> we're making progress
913.38 -> um
913.98 -> you know at this point some things are
916.5 -> running as react server components most
918.42 -> of it's still client components but
920.339 -> that's fine we're making progress
922.279 -> incremental progress that's the way I
924.48 -> like to do things you know keep it
926.519 -> running keep it working work your way
928.86 -> through it right of course this is when
931.98 -> um you know we get into the hard part
933.54 -> the nitty-gritty you know
935.42 -> we have to actually sort of analyze the
938.279 -> site and figure out okay
940.339 -> if I did some refactoring you know what
944.579 -> could I sort of make as the minimum
947.22 -> amount of components that needed to be
949.32 -> client components so can essentially
951.06 -> convert as much as possible to react
952.98 -> server components you might not
954.48 -> necessarily need to do this in all cases
956.519 -> it depends on what you're trying to do
958.079 -> but for the sake sake of me
960.779 -> experimenting this is what I wanted to
962.76 -> do you know let's see how much of this I
964.92 -> can run as server components right
968.519 -> um so I went through the source and
970.74 -> identified the parts of the site that
972.72 -> actually needed to be client-side for
976.74 -> example the template includes this
978.6 -> really cool audio player
980.94 -> um that will just like play episodes in
982.98 -> the background as you navigate through
984.6 -> the site not just like while you're on
987.36 -> one page like you can navigate between
989.22 -> pages and it'll keep playing your audio
991.82 -> this meant the audio player needed a
994.98 -> context
996.62 -> and contacts have to be client-side
999.3 -> right the contacts will keep track of
1001.1 -> what's playing in your position and you
1003.74 -> know allow you to pause and you know
1005.66 -> play a new track or whatever right
1008.6 -> so I extracted the
1011.48 -> just the context
1013.699 -> um and the sort of functions around it
1017.12 -> into a new client component that only
1019.699 -> included the client side specific bits
1022.579 -> there's also like some browser API stuff
1024.679 -> here that you have to interact with the
1026.54 -> play media and that kind of thing this
1029.72 -> is all client-side only that's it
1032.299 -> doesn't exist on the server so you know
1034.16 -> it just doesn't make sense to do this
1035.6 -> any other way right so I extracted this
1037.88 -> into its own file
1039.64 -> and that went well and I also need to
1043.4 -> talk about
1044.72 -> um
1045.319 -> a feature of next.js13 I don't know if
1049.46 -> this is if they introduced us before
1051.32 -> they might have but
1053.059 -> in Nexus 13 with server components they
1055.76 -> have this thing called a layout file so
1059.179 -> essentially a layout file is like a
1061.94 -> normal page you know component file
1065.66 -> whatever
1066.76 -> but it spans multiple pages so you would
1071.419 -> use it for normally like navigation
1074.12 -> headers Footers things that stay
1076.64 -> basically the same as you're navigating
1079.1 -> between the pages on your site or at
1081.919 -> least a subset of pages on your site
1084.88 -> so I created this layout file and I
1089.539 -> moved the and I had that layout file
1092.78 -> reference the context client component
1096.08 -> this way it would include this context
1099.44 -> on all the pages in my site
1102.2 -> um and so the layout itself is a server
1105.799 -> component and it includes this client
1108.74 -> component and it all just worked it was
1111.08 -> actually pretty easy
1113.179 -> um and at this point I could like run
1115.46 -> the site and have my contacts and have
1118.52 -> the player available on all the pages so
1122.6 -> even though it was getting you know
1125.299 -> included on a server component page it
1128.179 -> you know it was pretty easy to include
1129.679 -> on all the other Pages
1131.48 -> um yeah so that's nothing groundbreaking
1133.76 -> but hey it worked it's cool and that's
1136.34 -> the approach I took
1137.919 -> so yeah the site continued to work and
1141.02 -> at this point I had isolated the context
1143.299 -> part of the audio player and it's
1145.22 -> included on all the pages so we're
1146.9 -> making good progress of course I I did
1149.84 -> mention that part of the context was
1151.7 -> interfacing with like some browser apis
1155.059 -> for playback but there's the entire like
1157.1 -> sort of audio player itself that also
1160.1 -> needs to be client-side because of user
1162.679 -> using browser only apis
1165.46 -> and because it also uses events like you
1169.16 -> click a button and it starts playback
1171.98 -> and stuff like that which can only be in
1174.38 -> client components and honestly I so as I
1177.98 -> converted it and the process was you
1180.38 -> know essentially similar except I didn't
1182.96 -> need to put it in a layout file I just
1184.76 -> put it in a normal you know component
1186.62 -> and included it on some of the pages
1190.52 -> um so it's basically just identifying
1192.679 -> these things that needed to be
1194.08 -> client-side specific moving them into a
1196.76 -> new file that had to use client
1198.32 -> annotation
1199.84 -> it does I'll say
1203.36 -> it did require a bit of work because
1207.44 -> a lot of times I found things that were
1210.679 -> client specific stuff were mixed with
1213.679 -> things that could be rendered
1215.48 -> server-side so if you're doing this
1216.919 -> yourself you don't necessarily have to
1218.84 -> go this extreme approach of
1221.12 -> you know putting as much on you know to
1224 -> be rendered server-side as possible
1225.919 -> right but that's what I wanted to do
1228.74 -> right try it out so it did take some
1231.86 -> work to sort of separate these things
1233.78 -> and create new components and
1237.38 -> um but you know it wasn't too bad I
1240.5 -> suppose it wasn't too difficult but it
1242.66 -> would totally depend on how interwoven
1245.44 -> these things are in your project I could
1248.6 -> see this being extremely time consuming
1251.84 -> um but the bright side is uh you know
1255.32 -> you don't necessarily need to do it at
1256.94 -> once it looks like you could for a lot
1258.98 -> of things do it incrementally again if
1261.98 -> you designed your project badly and you
1265.94 -> know you have a bunch of spaghetti code
1267.5 -> it's not going to be easy you're going
1269.539 -> to have to like kind of do it all at
1270.919 -> once it'll be a nightmare but that's how
1273.08 -> working with that kind of code is so you
1275.539 -> know I don't think this is anything new
1277.039 -> all right so now there was one more
1279.44 -> thing I needed to convert and to me kind
1282.08 -> of the most interesting thing and that
1284.12 -> was the data fetching
1286.22 -> so the way I wanted to set this up is to
1290.419 -> have the website fetch the RSS feed and
1295.159 -> some other data from some other places
1297.32 -> that I had it whether it's on the server
1299.84 -> or wherever anyways it's got to fetch
1301.58 -> some data right
1303.2 -> so I was still doing this client side
1305 -> using the normal way we fetch stuff
1307.159 -> client side right
1309.02 -> but I really wanted to see what this was
1310.88 -> like to to do it server side and in the
1315.14 -> documentation for all this they
1317.059 -> basically like really super encourage
1320.179 -> you to do all your data fetching in
1322.34 -> server components so I'm like I gotta
1324.74 -> try this out is it really better is it
1326.78 -> good is it what is it for you know right
1328.82 -> like I have a lot of questions I want to
1330.98 -> figure this out um so I went through and
1333.44 -> did that and it wasn't
1335.84 -> too difficult it required a little bit
1337.82 -> more refactoring again to move some of
1340.7 -> the data fetching stuff into new
1342.2 -> components blah blah blah I mean you
1344.12 -> know the drill components moving
1345.74 -> refactoring right
1347.72 -> um
1348.559 -> but the cool thing was this actually
1351.26 -> allowed me to remove a lot of code
1355.7 -> um just in general so before there were
1359.539 -> hooks you know being used to fetch the
1361.7 -> data you know the normal pattern like
1364.58 -> your component renders and you have a
1367.4 -> use effect that subscribes to data
1370.1 -> fetching fetches data whatever it
1372.14 -> fetches the data then you're going to
1373.7 -> have a re-render
1375.88 -> and the refactored version didn't need
1380.419 -> any of this the hooks were all gone and
1382.88 -> all the loading states were gone because
1385.4 -> the refactored version for the react
1387.919 -> server components you can just in you
1391.34 -> don't have to have a used effect you
1393.38 -> don't have to have hooks just in the
1395.72 -> rendering of your component you can just
1398.48 -> await and fetch the data you know using
1402.2 -> the fetch API it's so much simpler oh my
1406.159 -> goodness I I loved this part of it it
1409.34 -> was like
1410.24 -> wow this is really easy something that
1412.82 -> was sort of complicated before is just
1416.179 -> super simple now it's just a weight
1419.179 -> fetch data process the data display it
1423.679 -> um I love this this is
1426.08 -> so much easier to work with we're going
1429.02 -> to talk more about some you know
1431.299 -> complications around this later on it's
1433.46 -> not all you know peaches and
1435.38 -> strawberries or I don't know whatever
1437.12 -> the saying happens to be but like I I I
1441.679 -> don't know like compared to the old code
1444.02 -> this was just like
1445.7 -> like just better like I don't know any
1448.52 -> other way to say it simpler better
1450.2 -> easier to work with
1452.059 -> um
1452.72 -> and you know
1455.179 -> it it doesn't necessarily mean there's
1457.28 -> less re-rendering you know it that also
1460.88 -> depends on loading States you might want
1463.159 -> to show that kind of thing and it could
1466.4 -> actually be slower
1468.08 -> um you know depending on how you were
1470.6 -> fetching your data we're going to talk
1472.1 -> more about this later but it could mean
1474.02 -> an extra server is involved you know
1476 -> since the data you know might not
1478.1 -> actually be stored on the server that's
1479.659 -> rendering the component and that kind of
1481.4 -> thing so I'm definitely going to talk
1482.78 -> more about this that the later stages of
1485.6 -> the show
1486.86 -> um what we're going to get through the
1488.6 -> actual sort of process first here
1491.72 -> um but yeah so that was really cool
1494.84 -> um
1496.1 -> and uh you know now I had a site that
1499.22 -> was completely converted with you know
1503.12 -> only the stuff that needed to be
1504.86 -> client-side inside client-side only
1507.2 -> components and the rest were just sort
1510.08 -> of unannotated which means by default
1512.48 -> they're a server component but you can
1514.94 -> use them client-side too as long as
1518 -> you're not you know using something that
1521 -> can only be done on the server so the
1522.98 -> await fetch thing I was talking about
1525.08 -> that can only be done in server
1527.059 -> components but a lot of the components
1529.94 -> they don't do anything that's like
1531.559 -> client-side or server side specific so
1533.9 -> you could use them in both
1536.12 -> you know places you could use them as a
1538.7 -> client-side component or a server-side
1540.44 -> component
1542.419 -> um but yeah most of my components it
1544.64 -> seems from looking at the output you
1546.98 -> know they are server components they get
1549.62 -> rendered server side awesome so at this
1553.039 -> point I would say yeah the conversion
1555.559 -> was complete and working
1558.559 -> um
1559.159 -> of course the next step was to actually
1562.1 -> like deploy this and and see how that
1564.86 -> went and that also ended up being a bit
1566.96 -> of an adventure so
1568.82 -> I originally tried to deploy it to
1571.159 -> versel versel is the company that
1574.22 -> creates nexjs and they provide a service
1578.539 -> where you can they'll basically just
1581.12 -> handle all the deployment for you you
1583.039 -> give them your source code and they do
1586.1 -> extra fancy stuff like you know Edge
1589.039 -> nodes and whatever all for you
1591.02 -> automatically
1593.12 -> well it didn't really work well at all
1595.94 -> so like it it ran and I could deploy it
1599.6 -> I ran into numerous weird issues where
1603.38 -> Pages weren't loading or like not
1606.38 -> loading correctly or partially loading
1609.38 -> you know like I would load like had the
1611.779 -> layout stuff was there and it would like
1613.64 -> I don't know it was really weird like
1615.44 -> navigating between things it just seemed
1617.84 -> really broken
1619.059 -> I eventually found some of it was like
1622.159 -> known bugs and required upgrading to an
1625.279 -> alpha version of like next JS to fix it
1627.74 -> and I tried that and it did fix some
1631.039 -> things
1631.96 -> but not everything like there were just
1634.94 -> weird things and I just didn't trust it
1637.52 -> um and what seemed weird to me is that
1641.36 -> if I built the site and ran it locally
1643.76 -> like a production build I didn't run
1646.039 -> into these same issues so I thought the
1648.38 -> problem was actually with how versall
1650.96 -> was deploying it not necessarily nexjs
1653.84 -> itself
1655.12 -> so then I deployed it
1658.34 -> um on my own server and sure enough it
1661.7 -> all just worked
1663.74 -> um so yeah definitely right now versus
1665.539 -> not ready for react server components
1669.2 -> and
1670.52 -> um at least I don't know using their
1672.26 -> default setup I'm sure it's still a work
1675.38 -> in progress but yeah that does not work
1677.84 -> um but yeah running it yourself seems
1680 -> usable and
1681.62 -> um you know like I said you're welcome
1683.48 -> to check it out let me know if you find
1685.039 -> any issues um you know maybe there's
1687.559 -> stuff I missed but like yeah just doing
1690.799 -> a normal production build seemed to work
1692.779 -> all right so I did notice some issues
1696.679 -> though that
1698.48 -> so everything did work technically
1702.44 -> um but along the way I added my own
1704.299 -> feature that adds paging so on the main
1707.779 -> you know page you you would go to you
1710.419 -> know the reactshow.com and by default it
1713.539 -> was loading all like you know 75
1715.94 -> episodes and it just seemed like it was
1718.88 -> loading a lot for the home page the
1721.1 -> initial page people might be going to
1722.9 -> like you just if you're on slow internet
1726.08 -> um that would take a while and I was
1727.7 -> like that's not really necessary like we
1729.5 -> can show the most recent ones and have a
1731.6 -> link to the rest and so I created a
1734.6 -> paging system just a normal
1736.6 -> run-of-the-mill paging system where you
1739.94 -> you know pass the page as a query
1742.34 -> parameter so page equals one page equals
1744.86 -> two you know some buttons
1747.32 -> um pretty standard stuff right
1749.96 -> um but
1751.46 -> it worked fine in development mode but I
1753.799 -> noticed when I ran this in production
1756.14 -> mode I started running into issues
1759.08 -> so I ran into some issues
1762.32 -> um like I would get this error like oh
1765.02 -> page switch from static to dynamic or
1768.38 -> whatever and I'm like well that's weird
1769.76 -> why
1770.899 -> I don't understand
1772.88 -> um and then like sometimes I wouldn't
1774.2 -> get errors that would just not work
1776.12 -> right
1777.44 -> um so it turns out
1779.86 -> I'm using the nexjs API to pass in the
1784.039 -> query params like this is part of their
1785.899 -> page API even in the new version right
1789.559 -> um but it seems like next is unable to
1793.399 -> detect
1795.399 -> using query params or what they call
1798.02 -> search params
1799.899 -> and so it next doesn't know that the
1803.779 -> page needs to be dynamic so in next.js
1806.899 -> you can have static pages and dynamic
1808.88 -> Pages a static page it just renders it
1812.299 -> at build Time ahead of time and just
1814.58 -> serves like static content right Dynamic
1817.76 -> is a page that you know gets a request
1820.399 -> and then on the server it processes and
1823.399 -> you know creates the page dynamically at
1825.679 -> runtime and because I'm using this
1829.1 -> paging system where it's like page one
1831.02 -> page two page three I have different
1832.94 -> content that gets rendered depending on
1835.159 -> what page you're on
1836.539 -> so in my head I'm like next JS should be
1839.659 -> detecting this and you know it should
1842 -> know this is a dynamic page well that
1843.98 -> doesn't work it definitely doesn't know
1847.22 -> um and
1848.48 -> so yeah sure enough looking at the build
1850.399 -> output it was like oh no it's calling
1852.679 -> this a static page
1854.6 -> um it just doesn't know I don't know if
1857 -> that's a bug if they're planning on
1858.5 -> support it I I don't I don't really know
1860.6 -> the situation but that's what I ran into
1864.2 -> um and I don't know playing around with
1866.6 -> it more it just seems like next JS
1868.58 -> currently is just assuming way too much
1871.039 -> stuff is a static page like nearly
1873.5 -> everything was a static page even when I
1875.48 -> don't think it should have been
1877.64 -> um and
1879.38 -> it you know depending on how you fetch
1881.899 -> data in your server components it's also
1884.24 -> supposed to like
1885.559 -> do some sort of I don't know if it's
1888.2 -> it's not maybe called a dynamic page but
1890.6 -> like it will regenerate your static
1893.659 -> Pages
1894.799 -> um anyways the whole thing seems a bit
1897.799 -> buggy uh and to fix this I just had to
1900.98 -> add annotations to a number of my pages
1904.039 -> to mark them as Dynamic Pages this sucks
1908.299 -> um this will absolutely bite you in
1910.94 -> production I don't like this at all this
1912.799 -> seems like terrible design relying on
1915.5 -> annotations at the top of the file it
1918.08 -> smells like bad design to me this isn't
1921.919 -> um I don't think this is really a
1923.899 -> reacting but more of an xjs thing but
1927.2 -> they definitely need to figure out a
1929.419 -> better way to do this and like more
1931.22 -> correctly detect things I don't know if
1932.84 -> this is planned I have no idea maybe
1934.76 -> they know about this I'm just using an
1936.679 -> alpha feature and that's fine whatever
1939.32 -> I'm just noting it
1941.24 -> um and yeah the truth is if I had
1943.46 -> written more tests up front I might have
1945.38 -> caught that
1947.179 -> um but good design you know that doesn't
1950.539 -> rely on tests you should have tests to
1952.94 -> catch things but that doesn't mean you
1954.44 -> have good design if you in fact if you
1956.659 -> need tests to catch things that probably
1958.52 -> means you have bad design anyways
1962.419 -> um now I have a fully working and
1965.659 -> deployed website
1967.48 -> with react server components I got all
1970.52 -> those issues figured out everything
1972.2 -> works
1973.34 -> um and
1975.14 -> yeah so that was that was basically the
1977.659 -> whole process and now you know we can
1980.24 -> get into the fun part right so I've got
1983.6 -> a lot more in-depth experience with
1986 -> react server components nexjs13
1989.2 -> and I just wanted to chat a bit with you
1992.36 -> all
1993.26 -> um at sort of a higher level
1995.419 -> um you know my thoughts on it discuss
1998 -> some of the potential negative
1999.86 -> implications as well all right so
2003.159 -> first up my overall feelings about react
2007.24 -> server components
2009.039 -> um you know
2010.6 -> what do they bias what do they improve
2013.48 -> upon let's start there I think there are
2017.019 -> what I see is sort of three big
2019.299 -> improvements
2020.679 -> um the first and I didn't really talk
2022.96 -> about this in in this process I went
2025.96 -> through just because for the most part I
2028.539 -> didn't run into it but a big Improvement
2032.74 -> could be not having to ship so many
2035.62 -> dependencies
2037.44 -> to the client
2039.72 -> uh another one would be streamed
2042.76 -> responses so I'll talk more about that
2045.94 -> um and the thing that you know you
2047.799 -> definitely heard me talk about which was
2049.3 -> Data fetching so these are potentially
2052.54 -> some big improvements you could
2054.099 -> potentially see
2056.2 -> um so the most obvious one is not having
2060.28 -> to ship all your dependencies to the
2062.379 -> client this could this is just a big win
2064.96 -> I don't think there's going to be any
2067.599 -> real world site where this isn't a big
2070.179 -> win
2071.56 -> um
2072.419 -> and you know just the clearest win I
2075.639 -> think uh when you need to process some
2078.099 -> data on the server anyways and the
2081.7 -> corresponding libraries that you would
2083.44 -> use to process that data no longer need
2086.379 -> to be sent to a client so a great
2087.879 -> example of this is let's say you have a
2090.28 -> date
2091.139 -> and you might send date in some machine
2094.359 -> readable format to the client and
2096.46 -> previously you'd use a library to
2099.04 -> convert that to you know something in
2102.099 -> the user's local time or whatever and of
2104.2 -> course you could do this on the server
2106 -> before
2107.22 -> but you know that people are generally
2111.88 -> doing this on the client for multiple
2113.98 -> reasons which I'm not going to go into
2115.24 -> but you don't have to do it anymore you
2117.76 -> don't have to send this library to the
2120.16 -> client anymore you can you know convert
2123.52 -> this in your server component on the
2125.859 -> server this is a huge win you know and
2128.32 -> there's a lot of other use cases like
2129.94 -> this right so like I said it was always
2132.339 -> is technically possible but I think this
2134.74 -> just makes it way easier to do things
2136.72 -> like the right way and you know process
2140.14 -> and convert your data on the server all
2142.96 -> right
2143.98 -> um so yeah that's the first win that's a
2146.26 -> pretty clear win I don't think anybody's
2147.94 -> going to argue too much about that
2149.14 -> that's cool
2150.52 -> um there there we're going to talk about
2152.859 -> there is a slight complication to it
2154.72 -> which we will get to
2156.46 -> um but I want to talk about another win
2158.14 -> which are streamed responses
2161.26 -> um so with concurrent react the server
2165.3 -> can stream components back to the client
2169.3 -> as they finish rendering but before the
2173.619 -> entire tree gets rendered on the server
2176.4 -> so I I tried this out and experimented
2179.859 -> with it
2180.94 -> um in this project that I was working on
2183.64 -> and it seemed like a big Improvement
2185.68 -> like you could see it was sending you
2188.74 -> know parts of like basically sending
2191.2 -> components over to to the client as they
2193.96 -> got rendered on the server and this
2197.2 -> includes like you know from the data
2199.54 -> fetching side you know if something is
2202.24 -> waiting to fetch data it can render
2204.4 -> something that doesn't depend on that
2206.079 -> data and send it to the client and the
2207.82 -> client would already render it and start
2210.339 -> incorporating it into the page so yeah
2212.68 -> this is a huge huge improvement over
2215.8 -> before where the pattern was you know
2218.68 -> reactor would render everything and you
2221.74 -> know it would have to do it all at once
2223.96 -> and you know if you fetch data it would
2226.119 -> have to re-render everything again you
2228.28 -> know in after it fetches the data in the
2231.04 -> use effect or you know with your query
2233.32 -> caching Library whatever this is a clear
2236.02 -> Improvement in my mind this is really
2237.88 -> cool I I don't think there's too much to
2240.339 -> argue against this it's really nice
2243.76 -> but by far the the third thing is the
2247.48 -> biggest win to me is potentially this
2250.72 -> new API for data fetching
2253.119 -> um like you remember how excited I was
2254.8 -> it
2256.72 -> it just was so much simpler right
2259.359 -> um this allowed me to use that simple
2261.4 -> await fetch no need for a complicated
2264.28 -> query caching libraries like direct
2266.26 -> query or swt or using use effect like it
2271.359 -> just you know it was so much simpler and
2274.24 -> super clean I loved it
2276.64 -> um
2277.359 -> at least in terms you know purely in
2280.119 -> terms of programming style and Design
2282.28 -> This is a massive Improvement
2285.579 -> um and I'm quite certain programming in
2288.94 -> this style will yield much simpler code
2291.46 -> and fewer bucks I really enjoyed it
2294.76 -> um of course you know some of you are
2297.94 -> probably like screaming you know at the
2300.4 -> the radio or wherever you listen you
2302.32 -> know at your your air pods or you know
2304.119 -> whatever you're listening to the side on
2305.619 -> your phone
2306.579 -> um that there's some downsides that
2308.68 -> we're going to talk about them uh
2310.42 -> definitely comes with some caveats
2313 -> um but depending on your situation this
2315.94 -> could be an absolutely massive win in
2318.76 -> terms of the design and quality of your
2320.74 -> code base and just user experience in
2323.38 -> general okay and now for the fun part
2326.92 -> let's let's have a real you know chat
2330.22 -> here about the implications and
2333.04 -> potential downsides of
2335.619 -> you know this new server components
2338.32 -> approach and I want to start by talking
2341.32 -> about that last win the new paradigm for
2345.04 -> fetching data well it's clear from a
2348.7 -> code and design perspective this could
2351.46 -> be an incredibly large Improvement in my
2353.8 -> mind and is one of the reasons before
2356.26 -> that I've said that react server
2358.3 -> components are just a foundational
2359.92 -> change I mean this is the primary reason
2362.5 -> I think for it
2364.24 -> um
2364.839 -> but there are a lot of complications to
2367.66 -> this one for one it assumes you are
2370.96 -> running a node.js server even if you
2374.44 -> aren't running it as your main server
2376.359 -> you need to run one to use server
2378.7 -> components and so you might have to add
2381.339 -> a node.js server to your pipeline and if
2384.339 -> you have to add that to your pipeline I
2386.5 -> mean that adds complication likely
2389.98 -> another round trip for data to make
2392.14 -> between servers you know so let's
2395.32 -> not near as clear of a win right
2398.56 -> um and at the same time next JS is you
2403.24 -> know really I'll be honest at this point
2406 -> pretty much dependent on you running a
2408.88 -> node.js server anyways
2411.64 -> um so from that perspective not much has
2414.52 -> changed but if you aren't using next.js
2417.22 -> and you want to use server components
2419.2 -> you're going to have to add in node.js
2421.359 -> in some fashion at least for now
2424.079 -> I could see
2426.24 -> a future in which this you know
2429.42 -> potentially is changed if somehow other
2433.06 -> languages add support for running react
2436.18 -> on the server and like rendering you
2439.599 -> know react components in another
2441.4 -> language or something I don't I don't
2444.7 -> really know if any of that's been done
2446.02 -> yet I could see that changing this
2448.72 -> equation you know you've got like your
2450.339 -> Ruby on Rails server you don't have to
2452.8 -> add in a node.js server because somehow
2454.72 -> your Ruby on rail server can render
2456.579 -> react components you know and use this
2459.7 -> this new API and everything that'd be
2462.46 -> really cool but I'm I have no idea how
2465.099 -> likely that is at this point you know
2467.579 -> and actually this was a point made by
2470.32 -> Dan uh who wrote Into the show and you
2474.28 -> know they were like yeah I mean this
2476.74 -> seems like it requires running node.js
2478.78 -> which isn't at the top of their list and
2482.2 -> it's really not at the top of a lot of
2484.18 -> people's lists right like
2486.339 -> um
2487.119 -> it just isn't and another question that
2489.76 -> Dan had was you know is this even useful
2493.119 -> for applications that Source data from
2496.119 -> multiple servers or what about servers
2499.66 -> with multiple clients not just react
2502.839 -> um so yeah thanks so much Dan for
2504.76 -> writing in I was wondering the same
2507.579 -> thing so it was great to hear you know
2509.68 -> from from you you know uh
2513.099 -> and so far you know to get to the answer
2515.68 -> I think it seems to be that react and
2518.92 -> certainly no J node.js certainly next.js
2523.5 -> is uh pushing towards having like a
2527.5 -> single or you know sort of multiple
2530.38 -> redundant node.js servers that sort of
2533.38 -> act as what I call like the data Nexus
2536.2 -> point so I think essentially the idea is
2539.5 -> that you have a node.js server that
2541.78 -> fetches processes renders and generally
2545.38 -> coordinates all the data requests out to
2548.32 -> your other servers so your react front
2550.72 -> end only talks to your react back-ends
2554.68 -> and then those react back ends are the
2557.02 -> ones that talk to everything else
2559.78 -> so you can kind of think of it as having
2562.06 -> like a back end dedicated to your front
2565.24 -> end and the entire purpose of this back
2568.18 -> end is to sort of help out your front
2570.52 -> end
2571.839 -> um and I do think there is some sense in
2575.079 -> this a lot of the client processing that
2578.8 -> needs to be done is going to be specific
2582.22 -> to the client in this case react
2585.66 -> but it doesn't really actually need to
2588.4 -> be done on the client
2590.94 -> so the theory you know of I think the
2594.22 -> react and next.js teams seems to be that
2598.06 -> ultimately some of this processing for
2601.18 -> react front end is actually better off
2604.599 -> being done on a server so you could
2607.48 -> really think of like both the front end
2611.26 -> and back end as react like not really
2615.28 -> separating the two anymore between front
2618.04 -> end and back end just like react is a
2621.28 -> front end and it is a back end
2624.24 -> this is obviously a really big shift for
2627.64 -> the community and you know I'm not even
2631.359 -> sure yet how I feel about it entirely or
2634.06 -> what direction you know things will go
2636.04 -> in but it will mean a pretty major shift
2639.94 -> in the way that we write react code this
2644.079 -> is definitely a case where I want to
2646.06 -> gain more experience on larger projects
2648.76 -> before knowing for sure how this you
2651.579 -> know works you know overall like like
2655.18 -> how I feel about it
2657.28 -> um
2658.119 -> and before we close out this part we
2660.4 -> also have to talk about caching
2662.64 -> so a very large part of what makes this
2666.28 -> work reasonably is that react added a
2669.099 -> new cache method this method is supposed
2672.339 -> to seamlessly cache fetch requests on
2675.52 -> the server so if you have multiple
2677.14 -> components that all fetch the same thing
2679.54 -> it should only do the actual fetch once
2683.52 -> so before you something you definitely
2687.88 -> needed to do is like
2689.88 -> coordinate your fetches you know you
2692.44 -> didn't want to fetch the same data twice
2694.42 -> in the same data path right and I think
2697.839 -> a lot of people ended up just using like
2699.7 -> react query and swt and stuff partially
2702.48 -> for this reason you'd sort of offload
2705.579 -> that responsibility to that library and
2707.5 -> let it figure out oh okay I just
2709.839 -> requested this I don't need to request
2711.579 -> it again or whatever so the react team
2714.28 -> has actually added this support into
2716.68 -> react itself and next.js takes advantage
2720.16 -> of this
2721.3 -> um
2721.96 -> but next.js also uh seems to have
2725.38 -> extended this cache method to also
2728.8 -> support some what they call invalidation
2731.859 -> techniques that tie into its static
2734.319 -> generation system so you can Mark a
2737.92 -> fetch call with an invalidation time and
2740.859 -> after that time has elapsed nexjs will
2743.68 -> regenerate any of the static pages that
2746.74 -> depended on that data
2749.099 -> and if a page request comes in it will
2753.46 -> refetch the data instead of you know
2756.4 -> pulling it from Cache actually I think
2758.02 -> technically it will first reply with the
2761.74 -> data from Cache but then go fetch it and
2764.92 -> then regenerate it anyways they've the
2768.099 -> point is more that they've extended what
2770.079 -> react created
2772.06 -> um and you know this is where it gets
2775.48 -> interesting so this essentially removes
2777.52 -> the need to add in react query or swt or
2781.3 -> any sort of query caching I think
2784.8 -> but caching is always hard like it's
2789.04 -> really hard deceptively hard so I'm
2791.98 -> curious just to see how well this API
2794.5 -> works but at this point I don't know
2797.44 -> enough although if I'm gonna go off my
2800.38 -> experience using next JS and sort of
2803.02 -> some of the weird issues I think I saw
2805 -> they might have been related to this I
2806.92 -> don't know
2807.96 -> but yeah if it works well this would be
2811.66 -> really nice because it'll be built in to
2813.88 -> react and it seems simple and hopefully
2816.52 -> they you know get it all ironed out and
2818.44 -> it's just beautiful
2819.819 -> that would be cool like we don't need to
2822.16 -> add these massive client-side libraries
2824.38 -> to handle this thing anymore
2827.56 -> um yeah I don't know
2829.54 -> time will tell right and you know
2831.7 -> whoever Hypes it on Twitter probably
2834.54 -> knowing the react Community something I
2838.3 -> haven't seen discussed yet on Twitter
2840.88 -> though which
2842.74 -> um admittedly might just be because I'm
2845.02 -> not that into Twitter but nonetheless I
2847.78 -> haven't seen discuss just
2850.119 -> how much react server components are
2852.88 -> tied into max.js
2856.92 -> this makes sense on the one hand because
2860.2 -> server components rely on having a
2863.859 -> specific routing mechanism in place and
2866.92 -> the internal support for like streaming
2870.16 -> responses back
2871.74 -> but on the other hand I haven't seen
2874.48 -> much support for anything besides nexjs
2877.72 -> and xjs is at least official support and
2881.7 -> next.js is just not the solution for
2884.68 -> every problem that react might be a good
2887.02 -> fit for
2888.42 -> now the react team
2891 -> says they're working on some kind of
2894.04 -> more general purpose solution but until
2897.64 -> we see what that is we really only have
2901.24 -> next.js as like the official support for
2904.72 -> Server components
2906.78 -> and this is
2908.68 -> in my mind kind of blurring the lines a
2912.22 -> bit now between react and xjs where does
2914.92 -> react n in xjs begin
2918.099 -> um I don't want to live in a world where
2919.54 -> my only option for using react is to use
2922.9 -> next.js but currently for react server
2925.42 -> components this is really where we are
2928.079 -> you know hopefully this changes quickly
2930.52 -> but given the buggy nature of next.js's
2933.28 -> current implementation
2935.26 -> or at least you know getting it deployed
2937.24 -> to Versa and everything you know I'm not
2940.26 -> necessarily expecting anything anytime
2942.819 -> soon
2944.619 -> um
2945.22 -> yeah uh another thing that is kind of
2949.3 -> obvious but we should talk about it
2951.76 -> anyways is how this could actually slow
2954.76 -> your app down if you need a component
2958 -> but that component is on the server
2960.54 -> previously you downloaded all or much of
2964.72 -> your app to the client so what the
2967.599 -> client needed was often already
2970.3 -> downloaded right um and it felt fast it
2973 -> loaded right away once the data was
2974.68 -> there this is definitely not the case
2976.599 -> anymore
2978.16 -> um and it seemed to me when I was
2979.839 -> messing around with it next JS is trying
2982.839 -> pretty hard to pre-fetch things I'm
2986.44 -> guessing to sort of make up for this
2988.599 -> potential downside so like it would
2991.599 -> pre-fetch components before it actually
2994.599 -> needed them based on I don't know what
2996.579 -> you Mouse over I don't know what the
2998.26 -> algorithm is but
2999.96 -> prefetching can be fine but it's
3002.88 -> definitely not the answer all the time
3005.339 -> um
3005.94 -> I expect we might see further
3007.74 -> developments in this area too in terms
3009.78 -> of creating a more like detailed API for
3013.02 -> controlling prefetching
3015.18 -> um but regardless this is
3017.54 -> not necessarily a clear win up front I
3020.76 -> think with some good apis for
3022.619 -> controlling when to fetch and render
3025.14 -> server components it could be another
3027.06 -> win
3028.04 -> but for now I think it could also lead
3031.079 -> to worse performance so there is still I
3034.44 -> will admit a lot to learn I think about
3037.319 -> react server components and sort of this
3039.48 -> new world they will Usher us into
3042.02 -> but I have you know no doubt that the
3046.26 -> react Community is very big on jumping
3049.5 -> on new things
3051.059 -> before they're ready I don't know for
3053.339 -> some reason like remember hooks you know
3056.46 -> um well yeah server components
3058.44 -> definitely aren't ready yet and they
3061.02 -> definitely aren't the answer to
3062.7 -> everything but I'm looking forward to
3065.099 -> seeing how the react Community jumps on
3067.859 -> them with a Vengeance looking down upon
3070.44 -> anyone who Danes to only use client-side
3074.28 -> components anymore
3076.619 -> um you know and if we're lucky we'll
3078.42 -> even get a lot of super nice looking
3080.3 -> infographics and plenty of memes
3082.98 -> prodding us down the golden path of
3085.619 -> react server components but you know all
3088.859 -> all joking aside I am excited I think
3093 -> the overall
3094.68 -> you know idea in my head is still that
3099.3 -> you know it does make sense for us to do
3102.78 -> some of this processing on the server it
3106.02 -> makes sense to do some things on the
3108.3 -> client and depending on your project and
3110.88 -> your situation it might skew one way or
3112.98 -> the other you know but having the power
3116.099 -> and the flexibility to choose where your
3119.22 -> code gets executed is
3121.64 -> phenomenally powerful and and a really
3125.099 -> good thing in my opinion
3127.619 -> um I think there are a ton of open
3129.3 -> questions and you know probably the
3131.94 -> biggest open question is you know what
3134.28 -> the community is going to do with this
3135.72 -> like if I've seen anything from the
3137.819 -> react Community it's that they tend to
3141.3 -> you know sort of follow each other a bit
3143.46 -> like sheep and you know whatever gets
3145.44 -> hyped that's where people go and you
3148.559 -> know that's what we end up getting
3150 -> libraries for and that ends up being
3153 -> what you know learning materials are
3154.92 -> created for and so I think a really big
3157.859 -> question is you know where is the
3159.54 -> community going to go you know are are
3161.64 -> people just going to jump on this and
3163.5 -> you know Force us to make everything as
3165.9 -> server components you know
3167.88 -> um I I hope you know it's more healthy
3170.4 -> than that and you know I hope that's not
3173.52 -> where we end up I could see that
3175.2 -> happening
3176.64 -> um but yeah so this has been you know a
3180.66 -> much more in-depth look at react server
3183.119 -> components I had a lot of fun
3186.119 -> um you know sort of experimenting with
3187.92 -> them building this new site and yeah I'd
3190.319 -> love to hear what you think if you go
3191.7 -> check out the reaction.com you know
3194.28 -> again I'm still thinking of it as like a
3196.2 -> prototype but it looks like we're gonna
3198.3 -> stick with it and I'm really excited for
3200.88 -> some of the upcoming features that I can
3203.04 -> now add to it
3204.78 -> um but yeah I'd love to hear what you
3206.64 -> think you know if you check it out you
3207.96 -> notice anything interesting if you're
3210 -> inspecting the page you know looking at
3212.16 -> the responses or anything like that
3214.92 -> you know definitely let me know
3217.319 -> definitely let me know if you just like
3218.88 -> the site in general
3220.319 -> um you know if you're a fan or if you
3221.76 -> hate it I want to hear either way you
3223.859 -> know
3224.64 -> um so yeah definitely you know if you
3227.579 -> get a chance to check it out that'd be
3229.2 -> cool if not that's fine I'll continue to
3232.38 -> you know bring it to you an audio form
3234.3 -> I'm sure
3236.099 -> um but yeah uh this this has been react
3240.48 -> server components I'll probably take a
3242.46 -> bit of a break from talking about that
3244.26 -> for now I got some other great ideas
3245.94 -> coming up so yeah stay tuned um but yeah
3250.44 -> I'll definitely continue to follow this
3252.96 -> and you know make sure that our
3256.02 -> community stays up to date
3257.94 -> um on on what they really are and how
3259.98 -> they really work and you know what
3261.9 -> they're really like uh thank you so much
3265.02 -> for joining us once again I hope you
3268.859 -> have a fantastic rest of your day thank
3272.52 -> you and goodbye see ya foreign
3277.94 -> [Music]
Source: https://www.youtube.com/watch?v=aO9MrsK0Mos