Next.js Discord

Discord Forum

how to use suspense in a "use client" file

Unanswered
Northern Rough-winged Swallow posted this in #help-forum
Open in Discord
Northern Rough-winged SwallowOP
so i have a client component which has useeffect to update the state of the componeent and that component has a a server component which takes in the state of the parent component , the server component user a server function to fetch data in a async fashion 

client.tsx
//some function
usestate,useffect ; 
return (<suspense><servercomp state></suspense>)

server.tsx
//some function 
data =  await longdatafetch()

//server component 
return 
data =  data()
return <div>{data}</div>

1 Reply

Northern Rough-winged SwallowOP
im posting some code for reference 
this causes infinite loop 
"use server"
export async  function delayedFunction() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("Function completed after 4 seconds");
            resolve("Delayed function result");
        }, 1000); 
    });
}
export async function fetchblogs(count:number) {

    // console.log(x)
    let x =  await delayedFunction();
    let p =   1 
    return `blogs by me 
      cfcf  \n
      cfcfcf \n
      cfcfcf \n
      cfcfcf \n
      cfcfcf \n
      fcfcfc \n
      `
}



export default async function Blogsser({count}:{count:number}) {
    let blogs = await fetchblogs(count);

    // let blogs = await fetchblogs(count);
    return (
        // <Suspense fallback={<div>Loading...</div>}>
        <><br />
            <div id="bloglist">
                {/* <span className="!text-5xl " >{blogs}</span> */}
                <><br />
            <div id="bloglist">
                <span className="!text-5xl " >{blogs}</span>
            </div>
        </>
            </div>
        </>
    // </Suspense>
    );
}

// "use client"

// import { fetchblogs } from '@/app/blog/bs';

// export  async function Br({count}:{count:number}) {
//     let blogs = await fetchblogs(count);
//     return (
//         <><br />
//             <div id="bloglist">
//                 <span className="!text-5xl " >{blogs}</span>
//             </div>
//         </>
//     );
// }
// export default async function Blogsser({count}:{count:number}) {
//     // let blogs = await fetchblogs(count);
//     return (
//         <><br />
//             <div id="bloglist">
//                 {/* <span className="!text-5xl " >{blogs}</span> */}
//                 <Br count={count}></Br>
//             </div>
//         </>);
// }