React Server Components | Explained Briefly
Vložit
- čas přidán 28. 07. 2024
- React Server Components (RSC) are React components
that are fetched and rendered on the server
whereas client (regular) components
are fetched and rendered on the client
📚 Chapters
1. What are React Server Components?
2. How do React Server Components work?
3. Pros & Cons
4. When should you use React Server Components?
🔗 Resources
Start Here
React Labs: What We've Been Working On - March 2023 - react.dev/blog/2023/03/22/rea...
React Server Components (patterns.dev) - www.patterns.dev/posts/react-...
RFC: React Server Components - github.com/reactjs/rfcs/blob/...
Data Fetching with React Server Components - • Data Fetching with Rea...
/ 1341141198258524163
Docs
Nextjs Rendering Fundamentals - beta.nextjs.org/docs/renderin...
Nextjs Server and Client Components - beta.nextjs.org/docs/renderin...
Video or Podcast
never write another API - / 1631887155080429569
React Server Components with Dan Abramov, Joe Savona, and Kent C. Dodds - • React Server Component...
The future of React (JS Party) - changelog.com/jsparty/267
Next.JS 13 Server and Client Components in 4 Minutes - • Next.JS 13 Server and ...
React Is A Backend Framework Now - • React Is A Backend Fra...
In Depth
How React server components work: an in-depth guide - www.plasmic.app/blog/how-reac...
More
/ 1341141198258524163
/ 1341098388062756867
/ 1341102430147276803
news.ycombinator.com/item?id=...
www.netlify.com/blog/announci...
#react #webdevelopment #javascript
React client component was designed for ui interactivity like activemenu, table sorting, search list, etc
Exactly
Great!!!
Soo good bro, keep it up
My problem is with the app dir in next js, I can’t figure out how to add interactivity to server components. I figured using api routes will help, but what if, for example I want to persist state across my server components. I’m pretty sure state management isn’t as easy or possible on the server. I don’t really understand how to combine server components and intractable components
I tried to build an app to figure out how to answer your question and ran into the same problem as this other CZcamsr czcams.com/video/OpMAH2hzKi8/video.html . He also has a more recent video about State Management for React Server and Client Components czcams.com/video/dRLjoT4r-jc/video.html.
Yeah, it can get complicated. I uploaded a sandbox environment I used to learn React Server Components in, you can look through the code in `src` and see where the state is and where the event listeners (onClick) are - github.com/neonpie/next-rsc-sandbox
Hope this helps. I'll update this answer when I find more useful information.
Thank you for asking!
@@neonpie I see, I’ll take a look at it, I think the biggest problem is adding interactivity to them, for example, pressing a button that will send info to the server then the server fetches it. Only thing I can think of is submitting info to the backend, having an RSC that fetches the info, and refreshing the page somehow without reloading client components. But even then, if I want to for example send the contents of an input to a server component I can’t. I can’t go from client (input) to server, except for an API route maybe
@neonpie welp next js update I guess will have a solution for this of some sort czcams.com/video/Km0aNxhVuC4/video.html at 2:00
huh, that looks pretty good. Thanks for sharing :P
Any event like click handler is in user land, so that will make it a client component. I stand to be corrected
Still experiencing those pitfalls, but overall I'm getting used to the new paradigm.
For this same reason, styled components don't work with react server components.
I see there is a guide on nextjs docs nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components . Should probably be supported soon.
I've been using vanilla-extract for a couple months now and quite like it vanilla-extract.style/ . Nextjs setup is easy enough. If you're interested, follow the instructions on their site and apply this fix github.com/vanilla-extract-css/vanilla-extract/issues/929#issuecomment-1538555608.
Hopefully we won't have to apply patches in the near future.
So if i use a component library that uses cssinjs, even though I'll have my data readily available it'll not render until the js part is downloaded as well?
hm, I think it'll render on the server and send only the result to the client without the whole library. I have to check. Which library do you suggest I test with?
I've been using vanilla-extract lately and it's been great :P
@@neonpie I'm using ant design now