Next.js Discord

Discord Forum

just general question un nextjs v 14

Answered
Dwarf Crocodile posted this in #help-forum
Open in Discord
Dwarf CrocodileOP
// actions/someaction.server.js
"use server";
export default async function fetchData(params) {
  try {
    const response = await fetch(`url`, {
      cache: "no-store", //avoid caching data
      method: "GET",
      headers: {
        Authorization: "my super duber secer token",
      },
    });

    if (!response.ok) {
      console.error(`API call failed with status code ${response.status}`);
      return false;
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
    return false;
  }
}

// app/sample/page.js
"use client"
import { useEffect, useState } from "react";

export default function myDynamicPage({params}){

    const [data, setData] = useState(null);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {

        async function fetchDataFromServerSide() {
          try {
            const data = await fetchGuilds();
            if(data){
            setData(data);
            }
            if(!data){
                // handle data was not feched
            }
          } catch (error) {
            console.error("Failed to fetch:", error);
            // handle error case 
          }
        }
    
        fetchDataFromServerSide();
        setIsLoading(false);
      }, [params, isLoading]);
      if (isLoading) {
        return (
            <div>
            <h1>loading page...</h1>
          </div>
        )
      } else {
        return //formated data
      }
}


I'm beginner on web applications going true tutorials i understand this is the right way how to fetch data on server side?

or i still need to build that (res and req) bit to pass data ? I'm just have built 70% of app and would like know before i need to waist all my job or rewrite am i on right path?

tnx in advance!
Answered by Ray
no you are fetching it on client side but with server action instead of api route
View full answer

16 Replies

@Dwarf Crocodile js // actions/someaction.server.js "use server"; export default async function fetchData(params) { try { const response = await fetch(`url`, { cache: "no-store", //avoid caching data method: "GET", headers: { Authorization: "my super duber secer token", }, }); if (!response.ok) { console.error(`API call failed with status code ${response.status}`); return false; } const data = await response.json(); return data; } catch (error) { console.error(error); return false; } } // app/sample/page.js "use client" import { useEffect, useState } from "react"; export default function myDynamicPage({params}){ const [data, setData] = useState(null); const [isLoading, setIsLoading] = useState(true); useEffect(() => { async function fetchDataFromServerSide() { try { const data = await fetchGuilds(); if(data){ setData(data); } if(!data){ // handle data was not feched } } catch (error) { console.error("Failed to fetch:", error); // handle error case } } fetchDataFromServerSide(); setIsLoading(false); }, [params, isLoading]); if (isLoading) { return ( <div> <h1>loading page...</h1> </div> ) } else { return //formated data } } I'm beginner on web applications going true tutorials i understand this is the right way how to fetch data on server side? or i still need to build that (res and req) bit to pass data ? I'm just have built 70% of app and would like know before i need to waist all my job or rewrite am i on right path? tnx in advance!
no you are fetching it on client side but with server action instead of api route
Answer
export default async function Page() {
  const response = await fetch(`url`, {
    cache: "no-store", //avoid caching data
    method: "GET",
    headers: {
      Authorization: "my super duber secer token",
    },
  });
  const data = await response.json();

  return <div>{JSON.stringify(data, null, 2)}</div>;
}
if its not to anoying to ask
Dwarf CrocodileOP
i was thinking about how to do it on server side
it a bit confusing.
Dwarf CrocodileOP
so if i want to return server side data i should generate it as
return <div>{JSON.stringify(data, null, 2)}</div>;
@Ray this is just an example, you could render it how you like
Dwarf CrocodileOP
but would it still be dynamic?
yes
because you have cache: "no-store"
@Ray because you have `cache: "no-store"`
Dwarf CrocodileOP
ok ill try to re make it and play with it appreciate help