In Next.js 13 and above (App router) should the page.js of all the routes/folders be a server component ? I mean is it the standard practice. I know that it can be a client component using use client but is it a good practice or will there be issues during build process.
I also noticed that during build the page.js is taken as server component or something like that. Would be grateful if someone could explain this to me?
2
Answers
No. It won’t cause any issues. Pages created using
use clientremains same as the one created without it.For more info regarding build, I have attached the screenshot of the build created by using
use clientin page.js.However I wonder why you’re building an entire page on the client side using
use client.In most cases the components are created with
use clientmethod and the page only imports those components. If you’re using client side methods likealert(), its better to move them to their relative components and import them wherever required.client components are initially rendered on the server. Because when user visits your page, the user will see the content of the page right away but it will be non-interactive. "use client" is used to differentiate between client and server components. Client components’s javascript is sent to the browser (server component’s javascript is not sent to the browser, so browser bundle stays smaller) and browser uses this javascript code to hydrate the page, in other words, the browser makes the page interactive.
if you want interactivity on your page or you need to use hooks, then you need to make your pages client components because those features are available on browser environment. if you do not add
use clientand you use hook or an event handler on your page, next.js will treat this component as server component, so it will execute its javascrip on the server and since server does not know browser api, it will throw error