React Server Components, Worth Your Time?
Vložit
- čas přidán 5. 06. 2024
- Wes and Scott talk through server components, the difference between server components and client components, reasons to run something server side, how server components work, using forms and buttons, what they like and don't like about it, and tips to learn more.
Show Notes
00:00 Welcome
00:48 Syntax Brought to you by Sentry
01:18 New Heights with Scott and Wes
04:23 What are React Server Components?
10:35 The difference between server components and client components
11:22 Why would you want to run something server side?
14:49 Components are server rendered by default
16:03 What is JS sprinkles?
17:22 How do server components work?
18:43 Moving an existing site to React server components take a while
20:17 The rules
27:09 Form Actions + Server Actions
32:07 Buttons can have actions
36:30 React Suspense
39:13 What we like
42:02 What we don't like
47:18 Design patterns
49:25 Sick Picks
All links available at syntax.fm/718
------------------------------------------------------------------------------
Hit us up on Socials!
Scott: / stolinski
Wes: / wesbos
Syntax: / syntaxfm
www.syntax.fm
Brought to you by Sentry.io
#webdevelopment #webdeveloper #javascript
I have waited for a video version and now my dreams have come true. Keep crushing it!!!
More to come!
Thanks for video versions of your show. It's very unusual and more interesting to watch you live :)
I feel like many see the introduction of RSC a bit "backwards". Like, "oh no, now I have to make my navigation a client component"... um... it always has been a client component, and we've all been fine with it! Having to make something a client component shouldn't be some sort of loss, failure, or annoyance. It's just "hey, this thing needs client-side interactivity".
I wish people would focus less on "having to make things client components" and instead focus on the fact that we now actually have something called server components, which were not even a thing before. There are some things that could be improved, and somethings which are not great (for me the caching of Next is the main thing that needs to be documented better and improved), but I find the move really cool and super helpful.
totally love these videos in addition to all the podcasts
Glad to hear it. We’re still experimenting with the formula so it will only get better.
React peaked a year or so ago with hooks, react query, and jotai/zustand.
Gonna keep using it like that and ignore server components until something amazingly better comes along. People still use WordPress lol don't need stay on the bleeding edge and recreate the wheel every 4 years.
I will say Astro does look nice tho
Astro is fantastic.
Whoa! Video Syntax!
I'm sure way more of the people I share links with will actually consume them now. I can't wait.
The show officially goes video Monday Jan 29th. Each ep will be release at the same time as the audio ep. We'll also be selectively releasing back catalog eps although most don't have full or great video.
We want code snippets, a lot of screen sharing and code! No more radio type sh.. ❤️❤️❤️
Noted. This is just the podcast on video and too many code examples don't work in that format, however we will be releasing much supplemental content and finding a way to make the code examples work while not ruining the audio pod.
@@syntaxfm Still very useful content! Keep up the great work.
More on the way as we explore how Syntax will work across mediums but also on CZcams specifically. Big plans here, lots to announce soon.
I ran into the limitations of the server components in NextJS on SSR. And yes, sometimes hooks are needed on the server. For example, in the case when there is a provider that supplies the state to the entire component tree below. Then you will need the useContext hook in the components below (to find out the locale, current theme, etc.). In my case, the system library turned out to be our own ui kit, and I had to write a webpack plugin that adds the use client directive to the bundle. And that's why I think this is a very strange feature, at least in nextjs, because they oblige library developers to add to the code what their code used to work without.
Dang that sounds like a PIA
Hooks are not needed on the server, but the context provider needs to be in a client component. Remember that components imported into client components also become client components, which means you should be able to just create a `` client component, import the provider there, and wrap that `` component around the server component down the tree.
What's the Chrome extension called?
RSC is too much complexity for no real advantage i think people will ditch it eventually
We'll have to see. Transitioning an existing codebase might be tough for sure.
I disagree. RSC’s and server actions have been a great experience for me. I don’t want to go back.
I really didn’t find it difficult. The main thing you have to remember is that what determines client or server is not based on parent/child relationship of components. It’s determined by where you import the components.
I think there is definitive advantage but 3rd party land will take some time.
I think paradigm shift and the usefulness will depend on the app you’re building. Also think frameworks authors are the people who will do the work. Doing more work on the server, sending less JS and quicker hydration times maybe beneficial.
react "devs"... lol
Why lol?