Secret React Server Component Patterns They Don't Want You To Know

NextJS 13's RSCs are just one vision of how we could use RSCs. The underlying technology gives us a lot more options and Dai-shi Kato has explored those in his new framework Wakuwork, including one that, well, framework authors don't want you to know about, but you may love as it changes the relationship between client and server completely.

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

0:00 Intro
1:32 Example App Introduction
2:56 NextJS 13 Implementation
10:06 Wakuwork React Server Functions
16:06 Wakuwork Nested RSCs
20:36 The "Waterfall" Problem
22:09 Outro

[PhilipAlexanderHassialis]

Thank you so much Jack!
This video is *EXACTLY* what all the RSC hypemen (Theo, I am looking at you) should have done. Additionally, the whole "RSC" thing, I expected the Wakuwork 2nd approach but without having to do any "serve" imports and any entries.js meddling and so on. When RSCs actually do NOT need ANYTHING like this kind of meddling to actually be used except e.g. wrapping them in a Suspense since they are an awaitable promise, then AND ONLY then we can actually start talking about RSCs. And when *all* frameworks adopt the same syntax, then we can actually start hyping about them RSCs. Anything less and it's simply too early.

[eango]

this is really great video on server components for someone who has been putting off fully diving into server components for too long is helping me understand them better :)

[guhaprasaanthnandagopal]

Wonderful video and great learning experience, really love the way you teach stuff, became a huge fan of your videos after watching the one on Micro-Frontends. Can you please make another video on RSC where you start from the scratch, it just provides me and many with many other perspective of utilizing and making the best out of RSC and ReactJS's strength on the server-side.

[zombiefacesupreme]

Absolutely fantastic video, Jack!

The waterfall issue does seem like something that could be solved with aggressive linting to me. You already brought up useEffect-- it hilariously actually makes sense for them to do something similar to strict mode. e.g. if you have a server component that relies on a client component, they could mount it twice in dev mode to make sure it doesn't cause negative side effects.

Regardless, the best thing about the React team treating RSC's as a spec rather than a feature is the freedom for experimentation that it allows for people like Daishi Kato. It's nice to have them establish an idiomatic platform for comparison, but I have a feeling that many of the most exciting (non-infrastructure) releases will come from outside Vercel.

It's just a shame none of it is documented.

[FatihAltnok]

I haven't tried the app directory yet, but it's supposed to do what you did in the third example, at least it's how it's marketed on Twitter. Maybe it's coming soon?

Also in the second example, if you're using the right experimental release, you can use the `use` hook instead of `useEffect`. Pretty great pick of example and very good teaching, by the way! Great job!

[appuser]

Server component still haven't "clicked" for me yet one way or the other, but I liked these examples. I think they will help me get it.

[consolebuche]

Hey Jack, super interesting topic and happy to see you talk about it as there’s so much going on atm on the RSC. It’s one of them « trendy topics » about which people talk a lot in very confusing ways sometimes. You’re making clear and easy to grasp points as always. 🙏

Side note here : as a colorblind dev, seeing which is a green / red border is super hard for me. Next time, you might want to add a border pattern, like solid or dotted, it’d be awesome.❤

In any case, awesome vid as always. Keep the coming!

[ericmartin]

My previous comment got deleted so here’s my answer : terminology is still in a weird state at the moment. In my previous link, below the code example, they basically say that a client component using a server component as a prop will need to wait for the server component to be generated server side, and that from the client component perspective, it’s child will already be rendered. It basically works like layouts and pages in next 13.

One thing’s for sure, things are still new and being changed, so we’ll see how it goes! Have a nice day Jack!

[eleah]

This is from the "Department of Wild and Crazy" at Blue Collar Coder. Thanks to Jack and Daishi. They should do a road show together. I would show up.

[slashieaward]

Dai-shi seems to have solved the "Naming Things" problem. Someone should get him to work on cache invalidation.

[avneet]

But we can try to avoid infinite loops like we can avoid them in useEffect. That doesn't sound like a hopeless thing to me. 🤷

Excellent video, Jack.

[PeerReynders]

19:55 “Splice these React Nodes generated on the server into the vDOM on the client”

That said server generated props for client components can be streamed the same way.

[ISKLEMMI]

I know this is off topic, but at 0:27 you can see that the slinky isn't keeping that squirrel from getting into your bird feeder. (I've tried the same thing)
Edit: I just noticed this is green-screened. I was fooled! lol

[VLOXy]

If what you say is true, I think why nested RSC's are much worse in a loop than useEffect is because useEffect is client side, worst thing that will happen is someone's browser getting slow and closing your site. Whereas when you're looping with server requests on infinitely scalable servers, you'll quickly ramp up your server costs. If Vercel allowed this in NextJS without any loop protection measures, users may end up with sky high bills and Vercel with a bad reputation and there could be a general fear of ending up in the same situation, thus moving away from Vercel.

[cacup]

Almost the same as Blazor Wasm this last case. Ugly but really useful and powerful

[sadramohh]

Nextjs13 without nested RSCs or Sever Component weaving would be pretty disappointing imo. The nextjs team should really rethink their decisions regarding RSCs.

Component rerenders leading to infinite loops is something every react developer already deals with on a day to day basis, I don't think the hypothetical waterfalls are enough reason to hold something wonderful like this back.

Even if the infinite refetch does happen, developers would probably notice it and restructure their code to avoid it.

[damianrebolo]

Can you recommend API mocking library like miragejs? Do you plan to do a video explaining different options?
Thanks

[fredheladrienkissie]

Server functions are also available in next app router in the latest stable release.

[rtpmatt]

Thanks for the info, just a note - tiny dashed outlines in red and green are not ideal for colorblind people. High-contrast colors would be much easier to see such as blue and yellow.

[gvinianidzegivi]

Hello Jack, what course can you suggest me to learn Next? Or just read the documentation?