Start using React Server Components Now!

⭐ Timestamps ⭐
00:00 Intro
00:58 What are Server Components?
02:05 Why Server Components?
02:52 Writing Simple Server Component
05:49 Database querying inside React Components
08:11 Fetching from REST API inside RSC
09:37 Server Components or Client Components?
12:01 Server Actions - Submitting Data from RSC

-- Special Links

✨ Join Figma for Free and start designing now!

👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨

💻 Grap the Twitter clone Repo built entirely using Server Components

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Turn Design into React Code | From prototype to Full website in no time

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app

🧭 Introduction to GraphQL with Apollo and React

Made with 💗 by Coderone

[ghostlexly]

Cons:
- You can't never change your stack/framework
- You have to rewrite all your backend if you need to create a mobile app one day or to open api endpoints to third part services
- you don't have queues/jobs and other useful things like guards
- create a lot of security issues

for a hobby or side project it's good to use server actions, it's fast but you should not use it for a complex or enterprise project.

[DrsHWolfenstein]

Call me crazy but this feels like a rewrite for very little gain. Unless you have some static blog. These changes will tie you into the Vercel ecosystem and blend your backend with your frontend in such a way that you may not easily move to a different stack. Not a big fan of Serverless/edge and may have to part ways at this junction.

[Dev-Siri]

I think it is important to use client components when they are required for a good UX.
I have seen many people push client components functionality that provided good UX in a server component. Which made the UX worse.
Also, one more thing. Be careful with the react-icons package. Since server component automatically split all components in their own bundle, it will also attempt to split react-icons/[provider] into its own bundle. But the react-icons package doesn't have one component import. (something like `import { Icon } from "react-icons/fa/Icon"` can't be done with react-icons) This can cause MASSIVE SERVER BUNDLES (4MB+) which can increase the server response time. I have had this problem with react-icons, my server bundles increased by 12MB because react-icons individual icons can't be split into their own bundles. An alternative to react-icons is @react-icons/all-files. This alternative package for react-icons is the same, but takes longer to install and may have some missing icons.

[ehm-wgpd]

my eyes burn with those new features are very coupling,
nice vid btw

[bushbuddyplatypus]

Apparently CSC are also initially rendered on the server to produce some html. and the JS used to not only hydrate, but for subsequent rendering of these components, to completely render them client side. I personally don't like seeing the near empty husk of client side component html showing up uselessly on first load. (this may not be accurate, just learning). I love the pattern of making client components a small as possible. Thanks for the tip!

[Elefantoche]

The project I'm working on is an internal web application that doesn't require SEO, so I think we should pass on this.

Loading SPA with lazy loaded pages once and calling APIs should still be cheaper and faster than SSR in terms of network and computing power compsumption.

[ragtop]

Technically you should never see XHR from a Next app because XHR is a browser API. Next is just fetching data on the back end, just like traditional web development did (and in my opinion, how it should always be done).

[LifeWithRilla]

Maybe I’m not experienced enough. But, wouldn’t all of this work being done on the server just be more expensive than having it run from the client? I can see fetching of comments make sense. But, anything with interactivity in my opinion should remain on the client.

[JohnnySalami-jojh]

I'm new to Next but I thought that "server components" were always the norm with Next.js via SSR? Can you clarify the distinction (if there is one) between SSR and React Server Components?

[AX]

Too many changes in NEXTJS
Never say stable. Lol

[dmqinbl]

But server components can only be used on next js not in react?

[aryankumar]

is re-rendering the whole page with revalidate path inefficient ? since we are refetching all the comments again ?

[ghostlexly]

I prefer something more powerful like nestjs for the backend

[IMHAN]

thx for your contents! I guess you are british :)

[syz]

u mentioned pros for server components are there any cons or is this some revelation from god that will change the world. Might be worth to it do some some actual comparison instead of just saying "its faster"

[MohammadQaim-qq]

do server components increase a lot of server load :O

[MrXperx]

This feature is total BS. It goes against all architecture patterns.

[shakhruzrakhmatov]

is it possible to use a component with real time data in the server side? I am asking because in my use case I have a table with realtime data, so can I use this table component as a server side, or this can only be a client component?