Next.js Discord

Discord Forum

component gets rendered before data is fetched?

Unanswered
Dwarf Crocodile posted this in #help-forum
Open in Discord
Dwarf CrocodileOP
im trying to fetch discord gild data in component that req 2 api calls in my case

it works on first run like it should but if i navigate away from page and return to page i get an error.
after logging data it shows that it actual trys to render it 2 times and first one is before data is collected witch trows error
//page
'use server'
import GuildsPageComponent from "../components/guilds/GuildsPageComponent";

export default async function GuildsPage() {
  try {
      return (<GuildsPageComponent />)
    
  } catch (err) {
    console.log(`Error while getting guilds :${err.message}`);
    return (<>Something went wrong</>)
  }
}



//component
'use server'
import Image from "next/image";
import styles from "./guilds.module.css";
import Link from 'next/link';
import { unstable_noStore as noStore } from 'next/cache';
import { getGuilds } from "@/app/serverSide/getGuilds";
//export const dynamic = "force-dynamic"

export default async function GuildsPageComponent(){
  noStore();
     const guildCardData = await getGuilds()
     console.log(guildCardData)
     if (!guildCardData?.status && guildCardData?.message !== undefined) {
      throw new Error('No guilds found');
    }
return (
    <>
      <div className={styles.h1container}>
      <h1>Guilds Overview</h1>
      </div>
      <div className={styles.cardContainer}>
        {guildCardData.message.map((guild) => (
          <Link className={styles.link} key={guild.id} href={`/guilds/${guild.id}`} passHref>
            <div className={styles.card} role="button" tabIndex={0}>
              <div className={styles.imageContainer}>
                <Image
                  src={
                    guild.icon
                      ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`
                      : "/D3.png"
                  }
                  alt={guild.name}
                  fill
                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                  style={{ objectFit: "cover" }}
                />
              </div>
              <div className={styles.h2container}>
                <h2 className={styles.cardTitle}>{guild.name}</h2>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </>
  );
}

4 Replies

Dwarf CrocodileOP
Error: No guilds found
    at u (/home/hokss/Desktop/nextJs/dashboard/.next/server/app/guilds/page.js:1:16609)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
{
  status: true,
  message: [
    {.....
Dwarf CrocodileOP
also to note im using built in loading screen solution
Dwarf CrocodileOP
Bamp