GitHub Community
Next.js server/client components #130724
-
BodyHi, I've been working with Next.js and initially thought that importing a client component into a server component wasn't possible. However, I've realized that it actually works without any issues. To clarify my understanding, client components are rendered in the user's browser, while server components are rendered on the server where Next.js runs. How is it possible to mix them? Does the server component render all server-side code and then defer the rendering of the imported client component (such as a button) to the client side? Where does the code get executed if i import client components into server components? Could you please explain how this is possible and how exactly it works? Thank you! Guidelines
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
This comment was marked as off-topic.
This comment was marked as off-topic.
-
|
Thank you that made it pretty easy to understand! So lets say i got a whole static page and one client component button. Then the static page gets rendered on the server |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
In Next.js, client components are React components that are rendered on the client-side (i.e., in the user's browser). These components are typically used for interactive elements, such as buttons, forms, or dynamic UI elements that require JavaScript to function.
Server Components
Server components, on the other hand, are rendered on the server-side (i.e., on the Next.js server) and generate static HTML that is sent to the client. These components are typically used for server-side rendering (SSR) of pages, layouts, or components that don't require JavaScript to function.
Mixing Client and Server Components
When you import a client component into a server component, Next.js uses a techni…