Can you explain the process of obtaining getServerSideProps results for my IndexPage?

Question

Can you explain the process of obtaining getServerSideProps results for my IndexPage?

Having trouble with the getServerSideProps function. I'm a beginner and struggling to figure out why it's not running properly. Spent hours trying to fix it, but still getting undefined in the IndexPage console.log(props.data)

export default function IndexPage(props) {
console.log(props.data.copyright);
    return (
        <>
         <div>{props.data.copyright}</div>
        </>
    )
}

export async function getServerSideProps() {
    const res = await fetch(" https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY");
    const data = await res.json();
    return { props: { data } };
}

Update: The code works fine on my local machine and Vercel deployment, but encountering issues on codesandbox.io where I initially started building /feeling frustrated

javascript fetch next.js

Answer 1

Answer №1

To successfully retrieve data in React, utilize a React Hook and invoke the function within it. This allows you to store the response in a state for later use.

Here's an example of how you can achieve this:

import fetch from "isomorphic-unfetch";
import React, {useEffect} from "react"

    const IndexPage = props => {
      console.log(props.data);
      if(!props.data){
       return <div>Waiting for data...</div>
      }
      return <div>main page</div>;
    };

    export async function getServerSideProps() {
      const { API_URL } = process.env;
      console.log("inside fetch");
      const res = await fetch(`${API_URL}/movies`);

      const data = await res.json();

      return { props: { data } };
    }

    export default IndexPage;

Alternatively, you can opt for using getStaticProps to ensure that the data is available when the component fetches it.

Answer 2

To successfully retrieve data in React, utilize a React Hook and invoke the function within it. This allows you to store the response in a state for later use.

Here's an example of how you can achieve this:

import fetch from "isomorphic-unfetch";
import React, {useEffect} from "react"

    const IndexPage = props => {
      console.log(props.data);
      if(!props.data){
       return <div>Waiting for data...</div>
      }
      return <div>main page</div>;
    };

    export async function getServerSideProps() {
      const { API_URL } = process.env;
      console.log("inside fetch");
      const res = await fetch(`${API_URL}/movies`);

      const data = await res.json();

      return { props: { data } };
    }

    export default IndexPage;

Alternatively, you can opt for using getStaticProps to ensure that the data is available when the component fetches it.

Can you explain the process of obtaining getServerSideProps results for my IndexPage?

Answer №1

Similar questions

Guide on implementing ng-repeat within a nested JSON structure in your Ionic app

Despite being deployed on Vercel, the process.env variables in Nextjs are still not functioning as expected

Is there a way to include various reactions at once?

Execute HTML code within a text field

Struggling to update state in React despite attempts to modify the state

What steps should I follow to include a message in the custom form validation rule in my React application?

Looking for a way to update a world map image by selecting multiple checkboxes to apply a flood fill color to different countries using Mogrify

Retrieve data from backend table only once within the bootstrap modal

What are the reasons behind the jQuery file upload failing to work after the initial upload?

Issue encountered: Inability to implement asynchronous functionality within a forEach loop while making an API request

What is the most strategic way to conceal this overlay element?

Conceal a request URL within JavaScript through the use of Laravel/Ajax

How does a browser decide to load content from an http URL when the frontend source is using an https URL?

Problem with <meta> tag occurring when initial-scale is adjusted

Ensuring that md-select(s) created through ng-repeat are linked to the same model

The state object in Next.js appears to be missing

Transforming an array of strings to integers within a GraphQL query when they are incorporated

Traverse through an array of pictures and add the data to a Bootstrap placeholder within HTML markup

Verifying file types with HTML5 drag and drop feature

The Ajax/jQuery output is not showing up in the iframe, but is instead appearing on a separate page