React Server Components Are Weird
If you’ve been following the latest news in the world of React, you may have heard about the introduction of a new feature called “Server Components.” These are a new way of building React applications that allows for rendering components on the server side and then sending the pre-rendered HTML to the client. It’s a bit of a departure from the traditional way of building React applications, and it’s left a lot of people scratching their heads.
So, what’s the deal with React Server Components? Well, for starters, they’re weird. They feel like a combination of server-side rendering and client-side rendering, but they’re not quite either. They introduce a whole new set of challenges and considerations for building React applications, and they’re definitely not for the faint of heart.
One of the things that makes React Server Components so weird is the way they handle data fetching. In the traditional React model, data fetching is typically done on the client side, using tools like Redux or Apollo. But with Server Components, data fetching is done on the server side, before the component is sent to the client. This introduces a whole new set of considerations for how to manage and update data in a React application.
Another weird thing about React Server Components is the way they handle interactivity. Because the components are pre-rendered on the server side, any interactive elements need to be re-hydrated on the client side. This introduces a whole new set of challenges for handling things like form submissions, touch events, and other interactive elements in a React application.
Despite their weirdness, React Server Components also have the potential to bring some benefits to the table. They could lead to faster initial load times for React applications, since the pre-rendered HTML can be sent to the client more quickly than a fully client-rendered application. They could also make it easier to build more complex and dynamic applications, since the heavy lifting of rendering can be done on the server side.
But for now, React Server Components remain a bit of a mystery to many React developers. They’re still in the early stages of development, and it will likely be some time before they become a mainstream way of building React applications. In the meantime, they’ll remain a weird and intriguing new addition to the React ecosystem.
React server components are not a feature that community wants, community wants the existing React mess to be fixed
i feel like this is php but harder
Can't agree with this "maintainability" thing, server side libraries change that paradigm with "template + data fetching" to MVC for a reason. Soon or later the whole thing will become a mess.
Niba brush yo teeth
Create react app had template for pwa “npx create-react-app my-app –template cra-template-pwa” BUT nextjs does not have, could you possibly show how to add pwa to nextjs 13?
i feel like astro played a role in this change with just how wonderful that islands architecture was
ur a great youtuber bro
Next Js 13 course with 2 projects
1. With TypeScript
2. With JavaScript
Please make a video on monorepo (turborepo)
Bro, how can i change the metadata (title) to "Come Back","Please Return" whenever the user switches to other tab.
For all the pages (server components)
Like your swag
eh, as long as it reduces bundle size, it i will use it.
i can even go as far as using the children array in react components to make my server die faster.
Also, the reason Next.js 13 looks kinda weird with the array.push() calls that have react elements inside them serialized as JSON is the VDOM.
In Next.js 12, it calculated the VDOM both on the server & the client and then just dumped the JSON into the HTML so that React could hydrate the page.
But in Next.js 13, the VDOM is entirely calculated on the server and it sends the actual VDOM serialized as JSON in the HTML.
the array.push( ) calls are just pushing the interactive elements to the VDOM tree so their state can be tracked.
It uses a technique called space-time-tradeoff which is faster in most of the cases because not much work is done on the client leading to better TTI scores. This can also lead to some tradeoffs like a larger page payload for better runtime performance, and can sometimes be slower for sites that show a lot of info at once along with many interactive components. (Like news sites).
The reason array.push( ) is used is because React can't know what to hydrate, so it pushes the elements that are interactive to the VDOM tree on the client while the rest stay static.
You can checkout Jack Herrington's video on Next.js 13's performance compared to Next.js 12 & Astro 2 where he explained how everything works.
I am just wondering if my server will survive this much computation. 💀
sir plz start Next 13 crash course with JavaScript as soon as possible
great work bro !
i really love ur channel bro keep going !!
I like server components, tho obvious it's a bit confusing at first, because we are so used to being on the client.