React Server Components Change Everything

[@Juloass]

So now we doing JS the PHP's way that i learned 10 years ago ? Great, it wasn't a waste of time after all ! =D

[@oscarljimenez5717]

Yes!!! Actually RSC are based on XHP a Facebook PHP framework that they invented many years ago (2010). RSC are just the representation of that framework but in React and JS, so you could use a single language and mental model (React and components) in your app. So yes, it's the PHP way.

[@varan22]

The older I get the more I notice that 95% of the cool new stuff, that everyone looses their minds about how innovative it is, is just reinventing the wheel from 30-40-50 years ago.

[@PraiseYeezus]

@@varan22 not really. it's more like, taking the old tried-and-true wheel and attaching it to a new, faster engine. PHP could always handle your serverside code but now we can do that, with one language, better client interactivity, and type safety.

[@killroy42]

Reminds me of server-side JavaScript from 20 years ago. Eventually Apache Rhino...

[@nikolamiticdev]

​@@PraiseYeezus I see that. But how much really of that user really cares about? Yes DX can lead to better UX but not necessary.

[@TheLexuguin]

One of the aspects I find most interesting is composability. In traditional Server-Side Rendering (SSR) apps, you must fetch all data from the server at the route level. However, with React Server Components (RSC), you can fetch data at the component level. Additionally, the ability to mutate data and then perform revalidation ensures your RSCs are always up to date.

[@Tobiasliese]

What? Django does lazy SSR for many years now.

[@huytran-ew5gg]

As a beginner in React, I should say this is getting out of hand, NextJs everytime docs changes is a whole new-scenario, not to mention the bug comes with it, then now React is updating with these new features and to be honest, a newbie like myself would like to learn basis and be able to understand all the based knowledge correctly first, not some mixing stuff like this.

[@hamza_dev]

Plain React is still almost the same, just don't run after these meta frameworks as they're useful but definitely not for beginners.

[@rayyanabdulwajid7681]

If you're a newbie, focus on building small projects with vanilla javascript

[@mistymornings]

You are consistently the best tutor because you use simple language and exhibit a lot of common sense. Keep it up!

[@christhornham]

SO much clicked after watching this video. Half a dozen concepts now make sense. Thank you.

[@baka_baca]

The old ways have become "new" again. Then we'll be hooked on this for a while, realize all the problems with the approach, move back to the client for everything, and the cycle will continue.

[@setasan]

Yeah we got full-circle and getting ready for the next 😂

[@coherentpanda7115]

The page router approach was a close to perfection, in my opinion. There was a clear separation of what is server side code, and what is client side. I have spent the time learning the ins and outs of the app router, and I just don't see the benefits other than a little less code scaffolding. Personally I feel NextJS made the wrong decision with this, but I am willing to give it time.

[@Tobiasliese]

Well because the tools we use are dependend on the problems we're facing. If you want to build a realtime app, you prob. don't want SSR. I did mixed SSR and WS back in 2017. It never was hard, the hard part about web dev, is keeping up with all the frameworks.

[@keremardicli4013]

Good old PHP way is reigning again 😊

[@AssFaceNFT]

Hehe

[@wij8044]

But with modern techniques and type safety

[@JJTradesEverything]

PHP doesn’t run on both client and server.

[@Fred_Klingon]

@@JJTradesEverything yes, it only produces what will be executed on the client, not the same, but similar

[@javascriptexpanse]

We exist: developers who use pure react and haven't been pushed by peer pressure to learn nextjs. by the time you'll be done with nextjs another framework called 'lastjs' will emerge. i advice stick with one framework as long as it is working for you. switching between between frameworks has zero benefits

[@buc991]

I tried this abomination nextjs, and i returned to pure react, next is half baked and already has two non compatible versions, everything is buggy and all simple things became super hard, also this use client/use server stuff is so bad, half of things not working here, other half there, such a nonsense

[@spageen]

I’m sure lastjs will have heavy inspiration from nextjs. I don’t think it’ll be a waste of time

[@SpencerP96]

@@buc991sounds like a skill issue

[@alexstrasza4938]

real purists use HTML and Javascript

[@javascriptexpanse]

@@alexstrasza4938 nah! thats just lazy

[@rajdippal51]

If you are not using next js. react-query is a good option for data fetching and state management.

[@adammellor5857]

You can still use it with next

[@Noam-Bahar]

​@@adammellor5857Theo made a video about this topic. Worth watching

[@marvinkr]

With tRPC too

[@Just.Alexander]

No, I'm sorry this stuff is better off as a separate npm package that people can add to their project if they want and react/nextjs people should stop herding people to use NextJS on the official React docs. Let the front-end be the front-end, server be the damn server, and NextJS be whatever it's supposed to be. And regarding google's recent changes for SEO I doubt the SEO benefit is gonna be there in the future. So 2 medium benefits for a big constant headache. And don't get me started on the decision to implement features that are in Canary stage, meaning not final, in NextJS. No thank you.

[@javascriptexpanse]

LOL, i'm with you

[@anuvette]

Fr 😐 i hate server components

[@adreto2978]

Skill issue / filtered

[@filemonek123]

front end guys rly do run in circles.

[@coherentpanda7115]

Only Vercel asked for this so they could seem "innovative". Pretty sure everyone I knew loved the page router in NextJS, and didn't need this. We just wanted a faster dev environment, not a complete rethink of how to do NextJS

[@loquek]

If stevie jobbos didn't kill flash (along with adobe), maybe things would have been different - the world of FE took a huge step back with the launch of the iphone.

[@qwerasdfhjkio]

@@coherentpanda7115 im thinking this could also be a vercel 400 IQ move to encourage us to do more stuff on the server, so they can charge us more🤣

[@Tobiasliese]

@@coherentpanda7115 The user wants this. SSR is faster than CSR. Most client's suck. However back in 2015 Realtime web started to gain a lot of traction, so SSR never was discussed. Now that CSR is close to perfection, it does make sense to go back to SSR to do everything that's possible there and the rest on the client. However integrating SSR and CSR in a way that doesn't create a lot of duplication code isn't a trivial task. I see the possibility to bring that integration into server components and this is the actuall big thing. SSR, even doing it well, is relativly easy, doing SSR and CSR well at the same time isn't.

[@last-life]

I've been doing web for 25 years. Everything goes FULL F***** CIRCLE every decade

[@coder_one]

ReactServerComponents - a feature that exists exclusively in the React-Vercel world.

[@coherentpanda7115]

Well, you've been able to do this with PHP since forever. React is copying the pattern.

[@loquek]

not for long, it's part of the longer term vision for react as it moves towards using a compiler.

[@omaribbrahim]

Nope. You can definitely self host it.

[@coder_one]

@@omaribbrahim nope

[@ericvruder]

Could you maybe create a video on how to integrate authentication with a server side app? I'm having a hard time wrapping my head around how to share user context data between client side code, server side code, and an api. Also looking forward to learn how to apply translations server side - this seems like a great candidate for server side rendering

[@wchorski]

Try searching JWT or Session Cookie auth tutorials. If you want something a little more robust, the Next-Auth Library is pretty easy and plenty of tutorials too. But look for Server Component tutorials as it's still a very new paradigm

[@hype8248]

use cors library and the fetch data thing and you ready to go

[@buzz1ebee]

Next-auth has a few quirks but has been working well for me. It has hooks for client components, and functions to call for server components.

[@paw565]

I just made every private route use client components, because I need to have access to auth cookie. I don't any way around this.

[@kadirsofor3151]

@@paw565 you can access the auth cookie in the server.

[@macr76]

Good video as usual, but about performance of server components - is it really obvious? I mean if you do some data fetching on your server, while full page paint most likely will happen faster, first paint will actually be (possibly) noticeably slower, because you have to send (possibly) much bigger HTML and it will happen later when compared to client component, because before you send anything back to client you have to complete data fetching. On client component in that time you can show a logo of company and some kind of loader, which might be a good UX. So while in cases where SEO is important probably server components are no brainer, in other cases IMHO this is not so obvious or black/white. What do you think?

[@incarnateTheGreat]

I have been building out a project using React server components for the last couple of months. The one thing I'm really enjoying about it is when I pull large amounts of data on the server side, the performance is insanely fast. Also, the caching for next.js fetch API is pretty decent. I have to do some cache busting, but otherwise it's pretty good.

[@rezamuhammad4974]

In next js there is something called partial prerendering. In short you can wrap your server component that fetches data first with Suspense and give it a fallback. It will show the fallback until the data is ready

[@incarnateTheGreat]

@@rezamuhammad4974 I do this. Honestly, I wasn't one for frameworks, but Next's handling of this has made it a breeze to manage.

[@genechristiansomoza4931]

Who don't you test your theory and share to us the result

[@pxkqd]

Trust the servers provider lobby bro. Vercel has your best interests at heart for sure. Run everything server side and you'll be happy. Don't try out any client side modern frameworks. Trust me bro, server components are blazingly fast.

[@henriquecabralferraz4632]

The concept of Server Components is cool, however if I must encapsulate AJAX Logic inside the body of a component I prefer to use a Client Component. The more I grow in Front End development, the more I understand how great it is to decouple the connect to the API from the actual UI.

[@uuuummm9]

That is a great iteration of the technology! Combination of server and client capabilities may simplify implementing some things. 👍

[@xavier.whisper.underneath]

Then when you have a different client for example a mobile app written in Swift, you can't reuse your server logic.

[@uuuummm9]

@@xavier.whisper.underneath i am not familiar with Swift. Can you reuse regular client react components while creating a Swift mobile app?

[@MagedMegz95]

So React is becoming more and more like Angular in the sense of state management and those newly added server-side modifications and being more like a framework than a library, and Angular is becoming more and more like React in the sense of standalone components and neglecting the need for ALL those modules and declarations. As someone who works with both, and prefers Angular, it's fun to watch those modifications over time because we used to complain about stuff in React that are missing in Angular, and vice versa, but there were A LOT of developers who actually defended those defects! How ironic.

[@pallavggupta]

Great video as always …State management in next js and how to use data between clients and server using zustand and or any other way ? Can we please have a video on that

[@armancherkharov9410]

+1 totally agree

[@akashdevgan]

One thing I don't understand is which part of my app should be a server component. Almost all my component build in react are interactive or depend on state or dynamic props. In the tutorial for example Kyle is rendering todos on the screen using server component. But let's say now we want to add ability mark those todos as done or delete todod then eventually you will have to convert this todos list into a client component. So far I think server components can be used only on static pages like blog pages or marketing pages but then again we already have static site generation or server side rendering for such purposes. Maybe I am wrong but so far I think server comonents are a solution to the problem that does not exist.

[@bagusadlan]

this is exacly what I'am thinking, right now most of the web have an interaction with user, such as button, input, etc. In other words server component only used in a web who have no interaction like static page. Or maybe I do it in a wrong way what component should be a server component and what should not. So right now do you have any idea what is this server component used for, and how is it used if there is interaction with the user?

[@StingSting844]

RSC looks way more complicated because of how nextjs has handled this. There are many footguns that must be explained too. For example, it's easier to leak secrets using server actions

[@captainnoyaux]

do you have some examples ?

[@StingSting844]

@@captainnoyaux the official next docs on server actions contains the vulnerability and also what they do for fixing it

[@threeveloper]

You'd specifically have to add the NEXT_PUBLIC_ prefix to your secrets or add it to your NextJS config to expose them, which has been the case since v9. Server actions didn't change that in any way

[@setasan]

In case you need to use multiple server components in a client but not in the same order do not use child but pass it as props. Also, do not try to use javascript features from like bootstrap, they will not work on server components (but react-bootstrap lib will, so interactivity is definetly there in a way). Anyway, I love this idea of mixing client and server components. Makes me think more on how to increase granularity.

[@iammakimadog]

Can you make a video about caching in Next.js and how to disable them? The caching is too aggressive and hard to understand.

[@eno3197]

fetch(`...`, { cache: 'no-store' }) // Revalidate at most every hour fetch('...', { next: { revalidate: 3600 } })

[@stewart6395]

A guy can't read documentation and waiting for a video from a youtube blogger -_-

[@TeaBroski]

@@stewart6395 the documentation is a pos, I also tried follow it and end up improvising. It works, but it's slow af, despite me following a similar pattern as kyle. I ended up using a client component with useEffect, as it was the most performant way for some reason

[@ujjwalgupta2890]

Instead of this we should use react query it does all this things beautifully and it also provides us data for loading error we should just make use of react-query on top of fetch in our react application

[@coherentpanda7115]

What we need is Tanstack to release their own framework with a pages router, and make React Query the standard fetch method. NextJS tries to be neutral on auth, fetch and other features that typically require a library.

[@prionkor]

How does it change "Everything"?? What is the point of this title? Can you explain? It changes NOTHING! You still need to fetch data from frontend. Server components has its place but not needed everywhere.

[@sharkdeng9253]

Awesome video. ReactJs 18 has changed and our projects has been through several upgrades

[@thund3rd3v]

Thank you, great short and easy to follow video

[@ryangamv8]

What you said about server components vs client components and SEO is not strictly true. Client components can still be prerendered and hydrated, which is what happens in Next

[@morachohacecosas]

I love how stable React's API is...

[@sethwright2518]

Do you have a video that breaks down the pros and cons of client vs server apps? Because currently I'm seeing a lot more pros for server apps these days. When did the trend start shifting away from client side?

[@karlstein9572]

For me it's obvious, Server Side Rendering is for "classic" pages (blog, news, "static" pages...) while Client Side Rendering is for rich an complex UI that require realtime interactions for better UX (chat, mails, maps, drawing, even youtube is working like a Single Page Application while it could be a MPA...)

[@abulkalamasif1270]

@@karlstein9572 Your comment simplifies things. Thanks

[@LongJourneys]

I'm just going back to PHP tbh

[@cmstudio8682]

Go then

[@loquek]

laravel is really good

[@laszlovitticeps]

I had a taste of angular.. couldn't achieve my goals with it... then moved to react to try my luck: ended up at the same dead end... so VanillaJS all the time.. 💪 react and other frameworks are good (just like type script) for big tech companies.. where the people are coming and going, so these frameworks can provide a standardise way to have each 'engineer' replaceable overnight..

[@csezain]

We want Role Based Authentication in Next14 with Next-Auth, also clear the concept of middleware.

[@timgerk3262]

Server components == no distribution via static content CDN and no offline-first PWA. This is *not* an absolute win. Client-session state on server is also hot garbage if you need to scale.

[@timgerk3262]

@makl-the-oracle which server? How many copies of state? At what $$$ ? And you totally ignored the requirement to function offline.

[@ertugrul-bektik]

Thanks, the video i’ve been looking for 🙏🏻

[@captainnoyaux]

Thank you for the video, indeed it's really react idiomatic to me on most stuff you presented !

[@Fred_Klingon]

I'm glad to have found this explanation here. Weeks ago I've came across Remix, correct me if I'm wrong, but as far as I understood, it allows to write a single codebase, that it's "compiled" later into two separated backend and frontend modules (or client/server modules as we prefer). That seems really interesting, as I'm going to completely rewrite a legacy project, and being the only person working on it, being able to avoid BE/FE separation and define every data structure once, will really make things easier to code, and also maintain. What I'm seeing here seems very similar to Remix, but I've never worked with it, or Next.js to understand the differences. I'd like to know if other people here, moved to this approach from a classic decoupled client/server configuration, and how it is going after the switch. Thanks

[@aliasgar.burhani1099]

I would love to see other competitors of nextjs and remixjs in seever components.

[@mon_codes]

ever heard django, laravel or ruby on rails?

[@aliasgar.burhani1099]

@@mon_codes yeah but to use react on the server side, I guess only these two players are there.

[@et_matrix]

​@@mon_codes Your forgot the Crystal's Lucky framework

[@oscarthroedsson1410]

Love this, I will look for a playlist on your YT-channel when it comes to React 19, if you don´t have one, please create one! You are doing a great job. I feel like it is more normal that front-end developer that learns JS -> JSX today will also learn NODE. With that we often learn similar folder structures. I can´t find any good video that explain how you should think when going from JSX and node to react 19. This was the one big thing that made me stop learning next.js. It was really hard finding good educational videos of project/folder structures. Example. My general folderstructure /src (folder) -- Folder structure inside a component folder (like, say SignUpForm) -/Components (folder) --/Component Name (folder) ---/Utils_ComponentName (folder) -> Hooks, JS functions and more that are specific to the component ---/Config_ComponentName (folder) ---/Styles_ComponentName (folder) ---/Tests_ComponentName (folder) ---/Assets_ComponentName (folder) here I load (images, icons, data and more folders) ---/Types_ComponentsName(folder) I have similar folder structure in the folder Components. Like if SignUpForm has a utility function in Utils folder, that can be used by other component. I will move that file to Utils in the Components directory(folder) instead of keeping it in the utills folder in the SignUpForm directory. The directory with API from client to server will be in the same level as src folder. And I will have a folder structure for every API and often the same folder structure as mention above. This structure is pretty new to me and I have come up with it by my self and reading about different structures and created one of my own. The folders isn´t new, but how I set it up. A lot of text but A video I would like to see, because I like how you teach. Is to see a "fully" developed full stack application, with types, config files, test in a JSX, node application. And turn that in to a react 19 application. That would be gold :P

[@alexyermakov8674]

No interaction isn't the only downside of the approach, it's the deal breaker. I don't remember last time a had to just display some data

[@micmotm2479]

Exactly ! That's why I don't get the hype. For 90% of personal or work projects I need reactivity almost everywhere. When I use SSR(with few client components, like we could already do in php a long time ago), that's for landing pages, blogs or things like this which have a lot a static data.

[@0x-003]

its abit misleading, i thought that you were able to do that in React, i am aware that you can do it in Nextjs. Why title the video React?

[@juancamacho479]

i am very confused about that too.

[@Just.Alexander]

same, that's why I was interested in the video. Don't need more NextJS propaganda.

[@oscarljimenez5717]

Because it's a React feature for frameworks, Nextjs don't build RSC at all. And actually right now exist 3 frameworks that use RSC, for example exist Waku.

[@juancamacho479]

still, title is misleading@@oscarljimenez5717

[@digitnomad]

server side component in next js is confused sometime when mix with client side functions, we use next js page api, looks like it solves the confusion bit of nicely

[@MrVipulLal]

Your videos are always entertaining,to the point and useful. Thanks

[@TroenderTass]

LMAO, i remember the time when react was going to save us from all the issues and strain on the backend, by shipping everything to the client. Now the table once again has turned.

[@rodrigolaporte274]

Hmmm and then you need to run a local server to be able to debug your server components, you need a more powerful machine for that. Then your code base is divided, you have potentially dumber FE stuff, this FE on server stuff and then the BE stuff, logic all over the place. Then the server needs to be extra powerful since it's going to process a bunch of stuff that was divided to each client before. Debugging? So much fun, does it run locally? Or on the server? Then the next version of react will say "hey guys! Remember all that old server components? Well now you better do them on the client! It fres server resources and you dont need to run a local server to develop! How innovative we are!"

[@ThanHtutZaw3]

This is my first nextjs app dir and I would like to know what is diff between server component vs use hook from react . What is the difference ? What should I choose ?

[@timkoprivnik9875]

if you listen to the video closely, you will learn the difference. but my advice: do full next.js course before starting on next.js project. there are plenty of good ones.

[@ThanHtutZaw3]

@@timkoprivnik9875 Thanks now I understand that SSR can only fetch in parents and pass data to child component and RSC can fetch directly in its component itself.

[@manhnguyenquoc399]

Really easy to understand, thank you so much

[@lucienchu9649]

Millions of thanks from NextJs newbie.

[@andrewshaban2888]

Sorry, I don't understood. Does this only work with Next.js or with pure React as well?

[@TeaBroski]

Did you guys try it? Is it me or it's really slow, and your website ends up showing skeletons for seconds? Am I doing something wrong? Do you find your vercel snappy? I don't honestly, hopeful to get some replies

[@mluu510]

BRO, why are you using promising chaining with async await?!?! come on, man

[@kamrant8915]

Your tutorials are always great and useful. Thanks a lot

[@nisabmohd]

4:50 Kyle "use client" directive is from React not Nextjs

[@WebDevSimplified]

That's a good catch. I never realized that was a React feature. It is so hard to keep track of Next.js and React features.

[@rlopez6636]

How do we put on click event on each todo in a server component then?

[@Dadaadad268]

Same question!

[@eprisrichardson678]

Handle your data higher up in the page component and make the todo component a client component. Or you can still fetch the data inside the todo component with a useEffect. Either way, you'll have to turn the todo component into a client component.

[@adtc]

Why would I want "cached data that's available to every single user"? Sure, in simple websites, okay because everyone sees the same data. But web services, each user can only see their own data, not the data of other users. So I don't really understand the "benefit" there.

[@itzFenners]

Basically any React hook we learn soon becomes redundant

[@graycat9567]

I don't buy the idea of combining the backend fetch response directly with component display on the client. It seems like a code smell and a performance hit in the long run. The only purpose I can think of is to use RSC to implement standard feature customizations. This often happens in large-scale projects where we want to separate the build process for standard and custom components.

[@anand_dudi]

Thanks for clearing all doubts

[@alastairzotos]

Can someone explain how server components are preferable to nextjs's old way ot doing SSR? At least there you got client-side hydration

[@oliverhughes169]

It's tricky, but you can think of the 'traditional 'SSR' as everything will be client side rendered, the only difference is the server rendered the initial HTML, and sent that in the response. Then the CSR takes over and hydrates the component. The key thing to note here being that all the logic in the component would run server side first (to generate the HTML) and then on the client side (to hyrdate). The paradigm shift here with RSC, is you're writing a component that will run only on the server, and never on the client. The server will send the HTML and only that. So, you could sort of think of RSC as a fancy HTML templating solution, in which you can embed interactive client side React components.

[@alastairzotos]

@@oliverhughes169 so, basically, it's a worse version of SSR, because SSR can do what RSC can do plus more?

[@oliverhughes169]

@@alastairzotos Well sort of, depends on what you need. If you are just rendering some HTML that doesn't require any user interactivity, you could have your logic on the RSC and send the HTML. You don't need to ship the JS to re-render the HTML on the client. That's the key difference.

[@HasithRanasinghe]

Just Amazing! Thanks !!

[@golden_smiles]

It has changed a s**t and introduces even more complexity for those who are trying to use it.

[@velhoguidsd]

the people from 200x using just Server Sites. the people from 201x using just Client Sites. the people from 202x using both.

[@jellyfish1772]

I have a question. Say I am fetching data in a server component. Then server component gets the data,makes the html and sends that data to the client. Although servers are very fast it surely will take some time to get that data. So ultimately user will have to wait for sometime for the server rendered html to arrive. Now what if i want to show some loading spinner to the user while the server component is being rendered.???? How can i do that if i cant access useeffect in a server component,? Anyone?some help?😊

[@internetexplorer7880]

In nextjs you can create a loading.tsx file which will be rendered until the server component arrives. You can also wrap the server component between React.Suspense and provide a custom loader as fallback.

[@hamza_dev]

@@internetexplorer7880 But then you'd lose the SEO benefits since your server can only send a response once, so if you use a loading.tsx it will show the loading but that means your first HTML is already there which is just the loading state.

[@jellyfish1772]

@@hamza_dev so whats the solution 🤔

[@golden_smiles]

@@internetexplorer7880 And without nextjs and SSR you can do the same with the same result, but without overloading the server with pre-rendering.

[@oscarljimenez5717]

​@@hamza_devyou don't lose SEO, you're just sending different data (html in this case) in the same response. That's what called Streaming.

[@t3dotgg]

They’re okay I guess

[@mjr333]

Great explanation! Thanks!

[@KorhalKk]

Should/could I pair these with Next.js? If so, how?

[@ShamilBadalov-iu3uq]

Welcome to 90th. We came back to PHP now. This is not a way guys, I'm telling you now.

[@ehsanrezaee4910]

i have one question though. consider a situation. i have 80 api calls inside my next js app. if i make all of them in the server component, it will be SSR. is this going to put a lot of pressure on my server? for example, if i am going to call them in a dashboard that SEO is not a concern, which one is better, make all of them Server side rendering or use react query with axios on the client?

[@coherentpanda7115]

Are all of your calls currently SSR, or are some client side? You can still do client side fetching by turning SSR to false in your imports, but with Suspense and lazy loading, you can relieve pressure to have the most important calls happen first, load partial data and some skeletons, and then bring in the rest of the reponses.

[@yatessnyder1490]

I have a question.. When I started learning nextjs I've had a lot of issues with figuring out how to pass state related information from a client to a server component. For example based on some Client state (like tenant id), I want to conditionally fetch some information from the server for that tenant. Putting the server component first didn't seem to make sense since the user hadn't selected a tenant yet, and putting it inside a client component didn't seem to work because I couldn't pass the users selection to the children (or I don't know how to if its possible).. How would you accomplish this in Nextjs? Using routes somehow?

[@golden_smiles]

There is always a client state exist, and it is not possible to keep it on the server side, period. What this guys do - they prepare some of the client initial state before the whole component is loaded, this is legit, but no more.

[@joshuarhoades4579]

Perhaps Next.js server actions would help. He goes over them in another video at kzbin.info/www/bejne/hJjEqo13qrmara8

[@_aNeaire]

I watch a lot of next js vid, then this guy just bump the logic in my head like an alphabet

[@nandoomb]

Guizeeeeira! Sucesso!!!!

[@juancamacho479]

am i the only one confused about the video title? this is just a next tutorial i guess, or am i missing something he sais abou how to do it in react?

[@sethwhite4635]

What’s the advantage over what Nextjs was already doing? Just standardized ssr?

[@coherentpanda7115]

Just s little less code. Theoretically some speed improvements, but nothing that has been proven.

[@masterchief1439]

The page will not show up faster if you are using server components, its going to take the same amount of seconds to fetch either on client or server, but client can handle much better the loading states in between and doesn’t add the extra overhead of all that file structuring in order to succeed it. It’s a really cool feature though don’t get me wrong, but I’ll wait for a vite plugin, if your app is behind authentication I’m not sure there are much benefits

[@ajth-in]

authentication tokens can be used in server fetch calls from cookies

[@masterchief1439]

@@ajth-in I know that, but there is no SEO for the private routes, which is the main benefit of using a framework like next

[@orterves]

There are multiple layers of caching involved, including an experimental mixed static + client pages using suspense boundaries

[@hamza_dev]

Actually, it will be faster since you don't need to download a pile of javascript to run React, call the API, and then render, you can directly fetch the data on the server by directly accessing db which will actually be even faster if your database is residing close to the server. The only reason why I would actually use plain React is if the server is written in some other language such as Go or Java or if I am injecting some UI somewhere such as a Chat Plugin.

[@ajth-in]

@@masterchief1439 that's true, but I would still suggest using next for authenticated routes because of the performance improvements

[@JJTradesEverything]

NextJS is for frontend devs who don’t understand the power of true full stack development with a full blown backend.

[@guseynismayylov1945]

This is worse than PHP. Because in PHP, it was assumed that html was served by the backend. Here, it’s a separate server just for React Server Components. I never understood why do we need to keep separate our UI and back. It’s just adds up I/O cycles.

[@Novacification]

I always find these videos to be a little disingenuous. For example, you would never need to, nor should you ever, put secret keys directly in your React app. This is not a problem that exists unless you really don't know what you're doing. Server components don't do anything in terms of frontend/backend communication that can't be done in a regular React app using a normal API. You can abstract things as much as you like, the fundamentals of client/server interaction doesn't change.

[@AJET99]

Hei you please keep everything related to react in one playlist. It's bit difficult to find out react related stuff.

[@viet.khoaiegg]

Thanks!

[@WebDevSimplified]

You're welcome!

[@thebigbigdaddy]

How would you perform CRUD functions in NextJS?

[@PeterKellner99]

I think you got it wrong on what is Next and what is React. ServerComponent;ClientComponent;ServerComponent is not next.js, that is React. My thinking is that as I know 'use client' and 'use server' are React things and not next things, then embedding client syntax as child of server is a react because of the transition from server to client. I too struggle with what is what, but except routing itself, most is Next I think

[@shcpeace]

Great video! How do you feel about React server components vs Qwik's resumable components?

[@fancyAlex1993]

If I am not mistaken server components on Next Js cannot call an api that is hosted on localhost , essentially all the api's must already be hosted. I maybe wrong.

[@Tszyu01]

Coming from sveltekit and nuxt and not being able to in nextjs to put a button with on click on a server page was infuriating. It should be able to defer these illegal things until the page has loaded or be able to mark the button for only rendering after server portion has loaded without giving you an error. Basically any dynamic component using these properties force you to make everything use client, it’s unfortunate.

[@ElPolemista]

Every UI should be on the frontend

[@mattskelton7471]

HTMX let's gooo!

[@m-ok-6379]

NUXT also handles server side very well

[@YondeCode]

The problem is that I use Render to host my server and I use the free service. When there is no request for a long time my server gets a spin down and it is very slow to restart... So i can't use this for now but i'd like to!

[@moheaali2049]

Is React server components production ready ? i mean ready in react library not in next js

[@coherentpanda7115]

It is considered stable in React. The canary version is technically stable, but they've never done an official version bump to make it official. I think they are waiting for React 19 because there may be new tweaks along with a load of new client-side changes.

[@yadusolparterre]

How do you handle loading state and errors?

[@Simple_OG]

React !== Next js btw I loved next js thinking building full stack apps is now so much easy. 😇

[@edhahaz]

Next step: make react work like this with other backend languages.

[@thelonedev]

i used to do this in ejs way back

[@xiaoshen194]

So.... It's just next js then?

[@mmtdev]

Hopefully one day we just can use plain js.

[@parlor3115]

How could this be a React feature if React apps used to be compiled into JS files and served by separate webservers like Apache or NginX?

[@deeOva]

sir or someone, is that next js app router can't deploy with node js on my hosting use apache cpanel? i try to deploy but error, i only can deploy next js page router only, please help 🙏🏻

[@Mari_Selalu_Berbuat_Kebaikan]

Ask in stackoverflow, and make your question more specific

[@prashantvatsa6685]

Should we continue with react or learn next js ?

[@ozgurNY]

Thanks! One Question: if RSC runs only on the server, React is not ideal for PWA/offline apps, right?

[@pmanojkumar5260]

Great video, what about the subscriptions? how to use them

[@mrrolandlawrence]

i just use astro with server islands in react. as cartman would say - webpack can suck my ... Great vid though. React is really coming along nicely. Used to code in Vue but the support and ecosystem is tragic these days.