DEV Community

Answers to Common Next.js Questions

Dennis Persson on May 05, 2024

Web development went from server rendered applications to single page applications rendered fully on the client, and then it all got complicated. N...

Read full post

Paweł Ciosek • May 5

great post! 👏

I wonder in a point "Can I Pass Props from a Client Component to a Server Component?", could we say we can pass through URL?

I mean, we do something like this

// update your URL on client side
router.reload(); // refresh RSC components with new URL state

Dennis Persson • May 6

Thanks :)

router.refresh() should work I suppose, since it do refresh Server Components.

Although, I wouldn't recommend it. I would probably rather turn the Server Component into a Client Component and read the URL with useRouter (or pass as prop if they are not needed to be persisted in the URL).

The reason? Because that way, it all is handled automatically. Manually having to refresh the page when URL is changed is error-prone, one day that will likely turn into a bug.

Plus, if you would need to fully refresh your Server Component to get the URL params to it, you are probably better of with a Client Component, performance-wise.

Leandro Nuñez • May 6

Great article. I’ll love if permitted to add a little correction: client components are rendered in the server too, but hydrated in the client. This is a great article to understand: article

Dennis Persson • May 6

Yes, that's a great addition, for a full page reload. Not sure if I have written something which implies the opposite somewhere, but either way, it's a great point that should have been brought up as a question in this article.

Leandro Nuñez • May 8

Thanks for your comment. I did not understood what you meant by “for a full page reload”.
I added my comment based on your text here:

This may sound like a bad option if you use Next.js with the expectations to mostly use Server Components, but it actually is completely natural. The rest of your layout file, can still be rendered as a Server Component, it's just the Client Component itself which will need to be rendered on the client.

There’s a lot of confusion about the server-client rendering of next.js, that’s why I added the comment.
Lot of people think it’s bad to render client components as next.js was built for server rendering but that’s far away from the reality as you pointed out several times in your article.