Secret React Server Component Patterns They Don’t Want You To Know
If you’re a React developer, you may be familiar with the concept of server-side rendering (SSR) and the benefits it can provide in terms of performance and SEO. However, there are some secret server component patterns in React that many developers may not be aware of. These patterns can help you further optimize your SSR implementation and take your application to the next level.
Pattern 1: Component-Level Caching
One of the challenges with SSR is the potential for performance bottlenecks when rendering complex components on the server. To address this, you can implement a component-level caching strategy. This involves caching the output of individual components on the server so that they can be reused for subsequent requests. This can greatly improve the performance of your SSR implementation and reduce the load on your server.
Pattern 2: Lazy-Loaded Components
Another secret pattern is the use of lazy-loaded components in SSR. This involves deferring the rendering of certain components until they are actually needed. This can be especially useful for components that are not critical for the initial render of the page, as it can help reduce the time it takes to render the initial view and improve the overall performance of your application.
Pattern 3: Component-Level Data Fetching
Traditionally, data fetching in SSR is done at the page level, meaning that all data for a given page is fetched at once. However, a secret pattern involves fetching data at the individual component level. This can help reduce the amount of unnecessary data fetching and improve the overall efficiency of your SSR implementation.
These are just a few of the secret server component patterns in React that can help you further optimize your SSR implementation. By incorporating these patterns into your application, you can take advantage of the full power of SSR and create a blazing-fast, SEO-friendly web application.
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.
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 🙂
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.
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.
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!
I think the reason that anti-pattern is so much worse than a looping useEffect is that it necessarily involves a network boundary, and if you run on Serverless that’s gonna run up a bill.
So the current Nextjs version is just glorified SSR and extremely limiting. If there cannot be seamless interop in between client&server components it's practically useless then.
Hey Jack I love your content ! One thing that bothers me is I watch sometime your videos at night and the ide is nice in dark mode but when you switch to the browser, the white screen destroys my eyes 😅 it would be cool if you could set some global styles to dark background and white font or install browser plug-in that revert Colors ! Anyway huge thanks for what you are doing !
Thanks for a useful video, Jack. Is it not correct that server components can be nested within client components, with a children pattern? I have done that successfully in a few apps. Components with interactivity should be client components, everything else can be server components. These can then be weaved as needed.
Hi, i'm using react since it's created. I'm a "foot soldier" worked a lots of companies and products that used react. Currently i'm a mentor and mostly i teach web and react for juniors. I always just watched and experienced what happens on the open source word, never did much commits just a few, i had some package so i'm a tiny piece of this, i'm a typical dev user, using what i get. I really like your videos because what you did is amazing and always like when you actually ask opinions. Big kudos.
Honestly i'm experienced many many game changer technologies hyped as hell. The react itself, the lifecycle methods, after the flux pattern, the hooks and the context, i'm remember when everybody loved useEffect. But after so many new things, the music is just the same old. They try to solve problems with a new revolutionary ways and i always felt omg, my half year product now "garbage" and ok next thing is we move into redux, but no, we have to move hooks etc…
Sorry for the long post, but i feel the react core team just moving a wrong direction and lost their own hooks hell created by themselfs :/ Trying to make fetching the data easier. These new solutions like rsc was promising, i really liked and hyped to the idea to make heavy computations on the backend and streaming to the client. (i remember the first poc they created with the markdown editor) But the next13 implementation feels clunky and shaky, overcomplicated. I'm still using react-query, or apollo, or swr, trcp but i can't see the path of what they are gona do and why. Still i missing some video or podcast about: why this is a good thing? We can do it so much easier with current production ready tech stack. So my question is why? 😀
Also i think the team maybe need to look further and chose a similar approach with solidjs (my new favourite toy) and learn why the people loves it, or what is missing from it that react has.
I feel in the past, the react was the first priority, now everything is about nextjs and i feel the react right now is just "serving" nextjs needs. Also i feel the same with trpc, love the idea, cool and fuhn stuff, but its soo complicated.
I'm with team rsc, great stuff, just i think they lost the point somewhere.
An app with nested server/client components can be build with nextjs 13 without problems. I also would say that you can use the app directory for production apps. It is very stable and much easier to work with.
Can you recommend API mocking library like miragejs? Do you plan to do a video explaining different options?
Thanks
Not having to manually create an API in BFF is wild,. I'm curious to know how you could implement rate limiting to prevent your server from getting overworked.
Having to pass the function thru the tree as props doesn't look great, though I assume context could solve part of that problem as it's all on client.
In the last example, say a few users somehow end up in an infinite loop scenario, that could surely have the potential to take down both the server and their browser tabs? In which case I understand the hesitation to move forward with this approach as the impact could be a lot worse than the useEffect footgun…
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!
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.
Almost the same as Blazor Wasm this last case. Ugly but really useful and powerful
isnt zustand by pmndrs?
ik dai shi made jotai
Dai-shi seems to have solved the "Naming Things" problem. Someone should get him to work on cache invalidation.
Jack you must love jquery-pjax before React was born.
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.