NextJS App router Performance | App Router vs Pages Router

 

In this article, I will talk about why the NextJS app router is worse in terms of performance and SEO if you compare it to the Pages router in the NextJS.

 

NextJS app router vs Pages Router

Let's do a comparison between the APP router and the Pages router.

Page Reload when Login & Logout in App Router

The NextJS app router doesn't fully support routers and redirects if you log in to the user or seller dashboard. I tried so many times. The redirection didn't work unless you reload the page manually. It feels like a glitch. And the same scenario when I press logout.

location.href= '/dashboard/seller'

So, I explicitly need to use "location. href" and where the page reloads and goes to the login page and the same thing with logout. You must try Redirect and Router for redirection, and it won't work. If you make a server request for each page, it will compromise your web application performance.

 

The router and redirect work on pages router where pages don't reload for each request. It's better to use PHP instead. The router and redirect only work for client-side navigation in the app router, such as navigating to client-side pages such as login, signup, and forget password.

 

Page Loading Time in App Router

The problem is the folder structure. You would create multiple pages for a single page in the App router, whereas the Pages router isn't required.

Here is the folder structure folder for the App router.

app
|
login
|—————page.js
|—————Login.js(for meta data)
|—————Login.module.css

Here is the folder structure folder for the Pages router.

pages
|—————login.js
styles
|—————login.module.js

We create multiple pages for a single folder because we can't export metadata in the client component but only with the server component. If you are working on a larger project, you will get performance issues because of processing time. You'll create many pages for metadata that will affect your web application performance.

 

Here is how it looks in case you don't add metadata.

 

You're in the dashboard, but it still shows the home page because I haven't added metadata for the dashboard page.

 

SEO in Pages Router vs App Router

In the pages router, we have SSR, ISG and SSG. And when it comes to the app router, we have client and server components, which means there is no way to create a static website in the app router.

Now, let me explain why SEO is way better in page routers. If you want to use Effect, use State and Reef, which can be only in the client component. So you're not benefiting from SSR because when you add anything clickable, then it's a client component. Also, you can't export metadata from client components and the metadata is good for SEO.

You can also create pagination with server components, for which I have already written a blog. You need to stick with the client component always.