javascriptreactjsnext.jsbuild

In Next.js App router should the page.js be a server component?


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?


Solution

  • I also noticed that during build the page.js is taken as server component or something like that.

    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 client and 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