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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to update the numerical value in the Material-UI version 5 TextField component

When attempting to display the decimal value 1.0 in the MUI5's TextField component, I encountered an issue. While I can change its value using the icons within the TextField, inputting any value directly seems to be ineffective. Additionally, backspac ...

Is there a way to use Lodash to quickly return the same value if a condition is met using the ternary operator

Is there a condensed way to do this using Lodash? (or perhaps Vanilla JS/TypeScript) var val = _.get(obj, 'value', ''); Please note that var val = obj.value || ''; is not suitable as it considers 0 and false as valid but fal ...

Most efficient method to upload numerous images without any lag

I have a website where images are loaded only when they are slightly below the viewport. This method allows the site to load initially without images and then determine which ones need to be loaded based on the user's viewpoint. When a user scrolls ...

Right-click context menu not working properly with Internet Explorer

Seeking assistance with extracting the URL and title of a website using JavaScript. The script is stored in a .HTM file accessed through the registry editor at file://C:\Users\lala\script.htm Below is the script: <script type="text/java ...

Enhance functionality in JavaScript by accessing the return value from a function

I'm trying to achieve the same outcome using a different method. The first approach is functioning correctly, but the second one is not: <script> function hello(){ var number = document.getElementById("omg").innerHTML; if(numbe ...

Problems with Angular functionality

I'm a newbie when it comes to Angular and I'm eager to start practicing some coding. I've put together a simple app, but for some reason, the Angular expression isn't getting evaluated in the browser. When I try to display {{inventory.p ...

Is the Spring MVC ModelAndView object being returned?

After clicking a link on a jsp page, I have a GET method that is instantiated as: HTML: <div class="panel accordion clearfix" id="dispdir"> <script type="text/javascript"> window.onload = function() { //showDirectorySe ...

Is it possible to identify a legitimate JSONP response?

My goal is to exchange data with a web service on a separate server that lacks CORS support. I am required to utilize JSONP for this purpose. The service mandates authentication, and when the user is in an SSO environment, they are seamlessly passed throug ...

Can Vue support recurring time slots?

I have configured a reproduction repository: https://github.com/devidwong/recurring-slot Using Vue runtime-only, I am unable to use Vue.extend (which requires template compiler) Vue 3 is quite new to me. I decided to use it for exploration purposes. Not ...

Executing a Python script on a local machine by sending a command through a NextJS webserver

My current setup involves a website built in NextJS and a local Python script running on a different server. Due to various constraints, the Python script cannot be executed on the webserver hosting the website. As of now, I have to manually trigger the Py ...

I am encountering an issue where my ejs file is not rendering properly even after moving my static files to the public folder and including the line of code app.use(express.static("public")). Can anyone help

After relocating the index.html and css files to the public folder and adding app.use(express.static("public)) in app.js, everything was working fine and the list.ejs was rendering correctly. However, there seems to be an issue now. const express = re ...

Reorganize the array or generate a new array using the indexes of the objects

I have a specific object that I need to render into table rows and cells using JSX... { "0": [ { "colIndex": 0, "data": { "richTextModule": "Data row 1 cell 1" } }, ...

What is the optimal order for executing JavaScript, jQuery, CSS, and other controls to render an HTML page efficiently?

What are some recommended strategies for optimizing webpage loading speed? What key factors should be taken into consideration? ...

All browsers experiencing issues with autoplay audio function

While creating an HTML page, I decided to include an audio element in the header using the code below: <audio id="audio_play"> <source src="voice/Story 2_A.m4a" type="audio/ogg" /> </audio> <img class= ...

Error: The variable usersWithSecrets has not been declared and therefore is not defined within the current scope. This issue

Despite my best efforts, I keep encountering the same error repeatedly: ReferenceError: D:\Secrets - Starting Code\views\submit.ejs:8 6| <h1 class="display-3">Secrets</h1> 7| >> 8| <%usersWith ...

Fetching the Key-Value pairs from a HashMap in JavaScript/AngularJS

I am currently working with a HashMap in the Frontend that is being retrieved from the Backend: var myVar = {"24":{"amount":2,"minutes":30},"32":{"amount":3,"minutes":30}} Can anyone offer guidance on how to access both the keys and values in Javascript ...

What is the solution for resolving the problem of the cursor jumping to the end when converting numbers in JavaScript?

After exploring the inquiries regarding converting digits in JavaScript, such as What's the solution and the right way to convert digits in JavaScript? and How to convert numbers in JavaScript, and problems with commands to remove non-numeric characte ...

Load Express JS router middleware conditionally based on certain conditions

In my Express JS code, I have implemented a middleware that defines specific end-points on a router for user login and logout. However, I am now integrating a new authentication method where the auth token is received from a different service. In this case ...

Is there a way to sort data by year and month in mongodb?

I'm trying to filter data by year in MongoDB based on a specific year and month. For example, if I pass in the year 2022, I only want to see data from that year. However, when I try using the $gte and $lte tags, it returns empty results. Can someone g ...

What regular expression should be used to meet the following requirement in JavaScript?

Criteria: Find words that begin with 'a' and end with 'b', with a digit in the middle, but are not on lines starting with '#' Given string: a1b a2b a3b #a4b a5b a6b a7b a8b a9b Expected output: a1b a2b a3b a7b a8b ...