Next.js Discord

Discord Forum

Nextjs making 13,000 requests on render?

Answered
Schneider’s Smooth-fronted Caima… posted this in #help-forum
Open in Discord
Original message was deleted.
Answered by American Chinchilla
Structure looks like this:
export const getServerSideProps = ({ query }) => {
  const guildId = query.guildId;
  const guild = // do fetch here
  return { props: { guild } }
}

export default function IndividualGuild({ guild }) {
  const [guild, setGuild] = useState(guild);
  return <div>
    <h1>{guild[0].name}</h1>
  </div>
}
View full answer

42 Replies

Polar bear
I also have a feeling that your useEffect is causing the problem. make sure, you set the dependencies properly. Can you share your code?
American Chinchilla
Like both the import and the call to it
And are you using app dir?
App or pages directory?
American Chinchilla
I think I have an idea if it's app directory
Like @joulev said too--I'd probably try to do ServerSideProps here unless there's a reason to be querying in the useeffect (e.g. need to a fetch on every state change)
American Chinchilla
Structure looks like this:
export const getServerSideProps = ({ query }) => {
  const guildId = query.guildId;
  const guild = // do fetch here
  return { props: { guild } }
}

export default function IndividualGuild({ guild }) {
  const [guild, setGuild] = useState(guild);
  return <div>
    <h1>{guild[0].name}</h1>
  </div>
}
Answer
American Chinchilla
then instead of the setGuilds in your axios.get, just say return 404; or return response.data
American Chinchilla
export async function getServerSideProps({ query }) {
  const data = await axios
    .get(`http://localhost:3000/api?guildId=${query.guildId}`, {
      withCredentials: true,
    })
    .then((res) => {
      if (res.status === 429) {
        return;
      } else if (res.status === 404) {
        return 404;
      }
      return res.data;
    })
    .catch((err) => {
      console.log(err);
    });
  return {
    props: {
      data,
    },
  };
}
export default function Home({ data }) {
  return (
    <>
      <main className={`${inter.className}`}>GUILDID: {data.guildId}</main>
    </>
  );
}
American Chinchilla
Can you log out what the request is returning?
And the query parameter being passed in?
Do you have 2 consoles up?
Okay cool--they should be in the vscode one
Ah yeah there's an error there
Wait okay so it's a promise?
Wait you're using dynamic paths here?
I thought you were using query parameters 🫣
So basically can change query -> params
Yes
Just to make sure log out params before the data fetch
And then check the vscode console
Well we at least know we have the guildId now...
Can you log out data before the return?
American Chinchilla
That's...odd
We should be?
Could try adding an extra await data ig
yes
im wondering if maybe the withCredentials is doing something? (i don't have an axios config setup)
American Chinchilla
i'd personally use .then() for the response
  const response = await fetch(`http://localhost:8080/api/v1/discord/guilds/${params.guildId}`, {
    method: "GET",
    credentials: "include"
  }).then(async (res) => await res.json());
 return { props: { response } };
what's in the vscode console
(and what's the current status of the page code, im a bit out of date i think)
does the api endpoint currently require cookies to function
need to explicitly define them in headers
(i think)
realizing how much easier the data fetching has gotten in next13--i barely started with 12 before i learned 13/app
lets gooooo
🫶