Server Side Render Inside Clint Component Tree
Unanswered
Tanzim Hossain posted this in #help-forum
Hello, recently I faced an issue. My root component isn't a
Client component. As we know, if the parent is a client, then the children also become clients. However, inside a component, I made a server call and treated a component like a server component. I see the application is running. How is this possible? Can anyone explain this to me?22 Replies
@Tanzim Hossain Click to see attachment
Interesting observation!
maybe the RSC rendering in Next.js is much more smarter in the newer version
maybe the RSC rendering in Next.js is much more smarter in the newer version
im gonna need further investigation and see what reason might explain this behavior
@alfonsüs ardani im gonna need further investigation and see what reason might explain this behavior
Yeah, it makes me totally confused. If you find any clue, then you must share.
i dont have any clue but i only can guess
@alfonsüs ardani i dont have any clue but i only can guess
What do you guess?
React might be smart enough to resolve async components in the client side.
the console.log that is on the server is because of html pre-rendering of client components
the console.log that is on the server is because of html pre-rendering of client components
so to test this:
try adding
try adding
const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])
if(!mounted) return null
return <B/>and see if it still gets rendered successfully and expect to not get console logged in the server
what the heliente.......
nextjs RSC rendering is too smart...
that means its just rendering server component in the server as usual but doing it in "use client" and resolving any "exposed" async components
not sure if its intended or a bug
I also see that, but it's problematic. Every time, people are not doing the mounting state correctly! If the error is not thrown earlier, then we are making a mistake.
And also, B components are server-side; it is going to make infinite requests...
And also, B components are server-side; it is going to make infinite requests...
Every time, people are not doing the mounting state correctly! If the error is not thrown earlier, then we are making a mistake.
indeed.
And also, B components are server-side; it is going to make infinite requests...
I dont think so, it will throw error before it makes infinite requests
My nextjs v 16.0.0
oh it did both
a simple console error just
installHook.js:1 <B> is an async Client Component. Only Server Components can be async at the moment. This error is often caused by accidentally adding'use client'to a module that was originally written for the server.might be worth elevating to nextjs GitHub issue