Next.js Discord

Discord Forum

Too many page requests

Unanswered
Korat posted this in #help-forum
Open in Discord
KoratOP
I'm dealing with a weird issue when navigating from a dynamic page to the main page.
In this case a lot of requests are being fired, example in the video below.

39 Replies

KoratOP
I feel like im the only one with stupid issues like this in the next app router world,

I can't even find why all these rerenders are happening let alone solve it.
I believe calling await auth() is triggering a loop somewhere.

But I don't know how else I can take session data (jwt and user's first name) inside fetch wrapper
Bighead carp
What version of authjs
also the code you've provided has no context to how its being used
KoratOP
v5
i can send you the wrapper
Bighead carp
gowan
KoratOP
import { auth } from '@/auth';
import { Response } from '@/types/response.type';
import { getSession } from 'next-auth/react';

function queryParams(
  params: Record<string, string | number | boolean>
): string {
  return Object.entries(params)
    .map(
      ([key, value]) =>
        `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
    )
    .join('&');
}

export const client = async <T = null>(
  url: URL | RequestInfo,
  init: RequestInit,
  params?: Record<string, string | number | boolean>
): Promise<Response<T>> => {
  const session = await auth();

  let endpoint = '';
  const queryString = params ? `?${queryParams(params)}` : '';

  if (session?.user)
    endpoint = `${process.env.NEXT_PUBLIC_API_URL}/${session.user.rents[0].id}/${url}${queryString}`;
  else endpoint = `${process.env.NEXT_PUBLIC_API_URL}/${url}${queryString}`;

  try {
    console.log(endpoint);
    const response = await fetch(endpoint, {
      ...init,
      headers: {
        ...init.headers,
        ...(session?.user && {
          Authorization: `Bearer ${session?.user?.token}`,
        }),
        ...(typeof init.body === 'string' && {
          'Content-Type': 'application/json',
        }),
      },
    });

    const jsonResponse = await response.json();

    if (!jsonResponse.metaData && !jsonResponse?.isSuccess) throw jsonResponse;

    return jsonResponse;
  } catch (error) {
    console.error(error);
    return error as Response<T>;
  }
};
Bighead carp
right but what is calling this function
KoratOP
export default async function Page({
  searchParams,
}: {
  searchParams: QueryParams;
}) {
  const data = (await getClients(searchParams)) as unknown as Paginated<Client>;

  return (
    <div className='flex-1 space-y-4'>
      <h1 className='font-poppins font-medium tracking-wider'>Clientss</h1>

      <div className='flex items-center justify-between gap-2'>
        <Stat
          title={0}
          helpText='Total Clients'
          icon={<Building width={20} height={20} />}
        />

        <Stat
          title={0}
          helpText='Non-Grata Clients'
          icon={<Building width={20} height={20} />}
        />
      </div>

      <Filter />

      <DisplayData
        data={data.data}
        renderItem={(data) => <ClientCard data={data} />}
        keyExtractor={(item) => item.id}
      />
    </div>
  );
}
getClients
is calling client function inside
Bighead carp
comment out all the components which dont pertain to this issue
then see if the error persists
KoratOP
what's weird is that if I navigate using Link component from say /users to /users/1 it works good the caching

If i go to users/1 and refresh the browsers (the cache is cleared) and try to go back to /users with the browsers navigation buttons it starts an infinite loop
Bighead carp
in fact comment out everything on this page, get the session and print it as a json string to the page
const session = await auth();

return <div>{JSON.stringify(session)}</div>;
see if the error persists
KoratOP
Lemme see,
KoratOP
@Bighead carp nope, the requests are reduced down to two
Bighead carp
So did commenting everything out fix it?
obviously a temporary measure, but its a good way to test
KoratOP
I can make another screen record to better show you the case
Bighead carp
Yep
KoratOP
sec
So this happends only if i reload the page and try to go back
weird
Bighead carp
Is this video with the component commented out? If so show me
KoratOP
no with the one not commented, ill show you another one with the page commented out
im going back with mouse btw at the end
Bighead carp
So what I am taking from this last video is that commenting out that entire page solves the issue?
KoratOP
yeah, i think using auth() inside that client.ts function is wrong approach
i might be wrong
Bighead carp
Okay, so start commenting stuff out and see which thing breaks it
KoratOP
because the number of requests are lowered when i comment that line
OMikkel
https://i.imgur.com/HhBKaio.png
https://i.imgur.com/l6LXs0v.png

Could it be something related to the way you are updating searchparams?
I dont know your route structure, but maybe you are updating searchParams in the queryParams function and then triggering a rerender because searchParams updates? (This would then loop forever)

Using searchParams opts the route into to dynamic render and would then render every time searchParams changes. Is this part of a nested catchall route or something?
KoratOP
@OMikkel Well thought mate, but if you notice the network, the path don't change its the same rsc component without search params.

Btw i tried removing them, the same thing happends,

Pretty sure it has to do with next auth but i will look more in depth tomorrow