CODEWITHSUNDEEP
next.jsserver-side-rendering
albbus-stack
albbus-stack

Reputation: 23

Next.js getInitialProps not rendering on the index.js page

I really can't figure out what is wrong with this code on Next.js. index.js :

import { getUsers } from "../utils/users";
import React from "react";

Home.getInitialProps = async (ctx) => {
  let elements = [];
  getUsers().then((res) => {
    res.map((el) => {
      elements.push(el.name);
    });
    console.log(elements);
  });
  return { elements: elements };
};

function Home({ elements }) {
  return (
    <div>
      {elements.map((el, i) => {
        <p key={i}>{el}</p>;
      })}
    </div>
  );
}

export default Home;

This doesn't render anything on my main page but still console logs the right data on server side (inside the vscode console). I really can't figure out what's going on, I followed precisely the article on the next.js site. The getUsers function is an async function that returns an array of objects (with name,surname props), in this case in the .then I'm grabbing the names and pushing them into an array that correctly logs out to the console. How can I make this data that I get render on the page?? Surely something to do with SSR.

Upvotes: 2

Views: 1061

Answers (1)

Giant Brain
Giant Brain

Reputation: 124

The problem is using async function. Try as following.

...
elements = await getUsers();
...

In your code, component is rendered before response is finished. So the data is not rendered. Suggest using "async...await...". Infact "async" and "await" are like a couple of one.

Upvotes: 1

Related Questions