component gets rendered before data is fetched?
Unanswered
Dwarf Crocodile posted this in #help-forum
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
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