Next.js Discord

Discord Forum

Fetch data, and send it to client side.

Unanswered
Collared Plover posted this in #help-forum
Open in Discord
Collared PloverOP
I've 2 files, my Downloads.js file:
export async function Downloads() {
    const res = await fetch('https://api.builtbybit.com/v1/resources/36705/downloads', {
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Private HIDDEN',
        },
    })
    const data = await res.json();

    return data;
}


And my page.js file:
'use client'

import Downloads from "./api/Downloads"

export default async function Home(){
    const data = await Downloads();

    console.log(data);

    return(
        <div className="wrapper">
            <div className="bg-secondary-700 p-4 rounded mt-6 border-t-[5px] border-primary">
                
            </div>
        </div>
    )
}


But how am I supposed to fetch the data, and send it to client side?


The issue is that it shows the fetch in the network tab and throws a lot of error's.

4 Replies

Collared PloverOP
// page.js

'use client'

import Downloads from "./api/Downloads";

export default function Home(){

    return (
        <div className="wrapper">
            <div className="bg-secondary-700 p-4 rounded mt-6 border-t-[5px] border-primary">
                <Downloads page={9}/>
            </div>
        </div>
    )
}



// Downloads.js

export default async function Downloads({ page }){
    const res = await fetch(`https://api.builtbybit.com/v1/resources/36705/downloads?page=${page}`, {
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Private HIDDEN',
        },
    })
    const data = await res.json();

    return(data.data.map((users) => (
        <div key={users.download_date}>
            {users.downloader_id}
        </div>
    )))
}
I got this now, but it's still showing the fetch requests in the console and network tab:
Naeemgg
Just to be clear, you just want to fetch the data on a server component and pass it to client??
@Collared Plover I got this now, but it's still showing the fetch requests in the console and network tab:
Naeemgg
these are CORS errors, not related to what you mentioned in the question