things like react server component

[unbyte]

Below is from React Server Component RFC

Ultimately, we realized that neither pure server rendering or pure client rendering were sufficient. Server rendering allows applications to easily access server-side data sources and to quickly show static content, while client rendering is critical for rich, interactive features where users expect immediate feedback. But mixing server and client rendering often means mixing technologies: writing code in two languages, using two frameworks, keeping two sets of idioms and ecosystems in mind. It also means dealing with cross-language data transfer and often requires duplicating logic, once for server-rendered views and once for interactive client previews.

Server components allow React apps to get the best of both server and client rendering while using a single language, a single framework, and a cohesive set of APIs and idioms. We are still exploring the full design space of Server Components, but we have shipped our first production integration and are actively exploring some additional open areas of research. The high-level design of Server Components is described below.

It's an addition to SSR and it's a nice idea to make full use of the server in front-end rendering.

If we apply this idea to Vue, due to the templates, the server components can be optimized to gain better performance.

Vue 3 has already made efforts for supporting SSR, will things like React Server Component also be considered?

[Akryum]

But mixing server and client rendering often means mixing technologies: writing code in two languages, using two frameworks, keeping two sets of idioms and ecosystems in mind. It also means dealing with cross-language data transfer and often requires duplicating logic, once for server-rendered views and once for interactive client previews.

This is already solved by Vue Server-Side Rendering capabilities.

[unbyte]

yeah of course, but server component is not SSR. More details of server component can be found in the RFC and video
In short, server component provides the ability to fetch data (even from db directly) in components and render these components on server and return intermediate format to front-end, and in front-end the intermediate format can be merged with existing app, so can reduce bundle size and reduce the number of requests in some cases and so on.

[Akryum]

I watched the video, but it still have nothing to do with what I quoted above 😅

[JohannesLamberts]

I just tried to replicate the example from the RFC in a Nuxt.js application.
You can already use https://github.com/maoberlehner/vue-lazy-hydration for code-splitting & bundle size reduction.
I'm not sure if thats something one should do but you could also use server-only plugins in nuxt.js to inject things like db connections https://nuxtjs.org/docs/2.x/directory-structure/plugins#inject-in-root--context.

The main difference would be (afaik) that you cannot have a Note component that is automatically code-split. Code-splitting is always defined where a component is consumed. The React RFC seems to archive this by naming convention, but I'd rather not want VueJS to enforce file names. IMHO this could be interesting for NuxtJS, but in the fast-paced world of JS it might be worth waiting how this plays out in the React world 😄

[unbyte]

After all it's still a new thing even in the react world 😁. But the introduction of server component really moved me, I think its idea is valuable in projects.
I will try to combine this idea with Vue in next projects.

[falstack]

I think the Server Component is not an enhancement of the SSR, but rather an enhancement of the Web Component.
When we use the Web Component composite application, the rendering is on the client side, so the performance is a little bit worse. Use the Server Component for better performance.

[xieyuheng]

The so called "React Server Component"
is such a horrible and unfortunate design
about which react people will regret one year later.

Just like many other things react people regretted about.
The "best practice" of react just causing developers pain,
and it changes every year, and causing new pain.

We should not follow react's unfortunate steps at all.

[bastiW]

Why do you think it will cause pain? In my opinion it's going back to the roots of how browsers work. It's rendering HTML on first render and you can immediately interact with the button because only little JS needed.

[smolinari]

Which is what Vue's supported SSR is, right? 🤔

Scott

[bastiW]

No. SSR is not React Server Components.

SSR renders on Server and hydrates on the client again including JS.

Server components in React is basically HTML without JavaScript. That means that the Server Side Components part has no interactivity.

The components which are using Server Compontents then are integrating SSR or Client Side Components.

Server Components in Vue

Nuxt has some experimental Server Compontents Support, called "Standalone Server components": https://nuxt.com/docs/guide/directory-structure/components#standalone-server-components

Other concepts in Vue which come close to Server components: Vue Vapor mode, but I don't know how easily you can integrate Dynamic content into it.

[bastiW]

The "best practice" of react just causing developers pain,

I agree that it causes refactoring effort

[smolinari]

No. SSR is not React Server Components.

Where did I say that? You wrote:

It's rendering HTML on first render and you can immediately interact with the button because only little JS needed.

That is exactly the goal of SSR. To render the components on the server and load the "finished components" into the browser to then start working with the SPA much faster (as opposed to loading all the JS to the browser to then have it rendered).

In other words, SSR already accomplishes the goals SRCs are also intended to accomplish, the difference being, React's SRCs are sending up React elements in JSON so that React can render them faster on the client.

I'd venture say, to make the argument of wanting the same SRC feature in Vue, we'd have to come up with valid arguments on how a Vue SRC feature would be of more value than the already given SSR abilities. And, to be honest, I'm not seeing this added value myself. But, that is just me. :)

Scott