Server side and client side rendering with the Next.js app router

Category: javascript
By: jeremy-one

I found the trick is to nest client side components in server side components.

Use server side components as the outer frame of the UI and nest interactive client side components inside.

This will create a server side layout to pass down all the properties you need to the client side component.

So for example you could use the UI wireframes to visualize all the server side components like header or nav and sidebar and main. From there any time you need a new client side you can import it into the parent server component.

This will create a hierarchy Like

page (server side) -components --TopicList (server side) ---TopicListItem (client side)

As you can see here this keep all the client side elements to a minimum.