React Server Components (RSC) is a promising feature that can have a significant impact on page load performance, bundle size, and the way we write...
For further actions, you may consider blocking this person and/or reporting abuse
Is not prohibited to import a Server Component into a Client component?
In
<App>
you import<Message>
.It is possible to do both ways. You just need to make sure to keep state out of Server components and also you need to make sure to write the right directive at the beginning of the file.
A good example is when you have a context provider in your application. The recommendation is to put it as close as possible in your component tree, but just because you use a Theme Context or a Authentication Context it doesn't mean that the rest of the components in the tree cannot be server components. Hope that explains. Cheers
Before reading this post, that shows this implementation :
my idea to do the same is to implement with cookies as communication between server and client tree.
Like so:
Are both ok ?
Is there a risk of exposing server stuff with first approach ?
Edited: added
revalidateRoute() in click handler
Both approaches are possible, but they have different tradeoffs:
As for exposing server stuff, RSCs are designed to be secure. They run only on the server and have no direct access to the client. Any data returned by a server component is included in the HTML response, much like any other data included in an HTTP response.
Modify the App.client.js file to use cookies:
In this example, we'll use the
useState
anduseEffect
hooks to read the initialselectedId
value from a cookie and update the cookie whenever theselectedId
changes.Note that this is a simplified example. In a real application, you would want to use a more robust method for managing cookies, such as the js-cookie library.
This is from Next.js docs:
I was assuming that this behavior is a React thing and not a Next thing.
There are some place where this is explained from a plain React side?
Hi, Importing server components into a client component depends on the context and technology you are using. Typically, server components contain business logic and single CPU, databases and other sensitive data, and importing them directly into a client component can pose potential risks to the security and efficiency of the application.
RSC is currently on experimental stage.
Some APIs and rules is changing and may be changed in the future.
It's worth mentioning this reference, which is maintained officially by React team.
github.com/reactjs/rfcs/blob/main/...
Btw, React team and Next.js team is collaborating closely, improve RSC and ship it ASAP as a playground for community before this feature is officially stable .
nextjs.org/docs/getting-started/re...
Nice illustrations! Framing them would've been great to see! We've built a simple OSS tool to help with screenshots. Check it out and let us know what you think! github.com/ekqt/screenshot I'd appreciate giving it a Star on GitHub if you find it helpful! Cheers!
thanks for the post! I haven't found explanation for why we don't have "await" to get a db record here:
Can we use react hooks like (useState or useEffect) inside Message.server.js file?
No, those are features for client components.
So React js is just copying Next js.
NextJS IS a React framework ;) they aren't copying, but rather implementing it.