Next.js-getStaticProps fetch dates

Question

I’m having a problem with the getStaticProps in the Next.js, my code requests information from an API created by me, just using it on a particular component that does not return any.

the following component is:

EN: Hello, I'm having a problem with getStaticProps in Next.js, my code requests information from an api created by me, only using it in a certain component it doesn't return any. the following component is:

---

import React, { useEffect } from "react";
import api from "../../services/api";
import Slider from "nuka-carousel";

import { ButtonLeft, ButtonRight } from "../Slider/CustomButton";
import {
  Container,
  ProdutosContainer,
  Discount,
  TitleProduct,
  Information,
  ImageSlider,
  Category,
  Price,
  TitlePrice,
  TitleDiv,
} from "./styles";

function FlatlistProdutos({ produtos = [] }) {
  function calcDiscount(price, discount) {
    return (price - (price * discount) / 100).toFixed(2);
  }

  function convertPrice(price) {
    return Number(price).toLocaleString("pt-BR", {
      style: "currency",
      currency: "BRL",
    });
  }

  return (
    <Container>
      {produtos.map((produto) => (
        <ProdutosContainer key={produto._id}>
          <Slider
            speed={800}
            width={"100%"}
            initialSlideHeight={300}
            defaultControlsConfig={{ pagingDotsStyle: { display: "none" } }}
            renderCenterRightControls={ButtonRight}
            renderCenterLeftControls={ButtonLeft}
            style={{ height: 300 }}
          >
            {produto.image.map((image, index) => (
              <ImageSlider
                key={index}
                url={image.url_image.replace(/\s/g, "%20")}
              />
            ))}
          </Slider>
          <Information>
            <Category>Eletronics</Category>
            <TitlePrice>
              <TitleDiv>
                <TitleProduct to={`/product/${produto._id}`}>
                  {produto.name.substr(0, 28)}
                  {produto.name.length > 28 && "..."}
                </TitleProduct>
              </TitleDiv>
              <Price>
                {produto.discount > 0
                  ? convertPrice(calcDiscount(produto.price, produto.discount))
                  : convertPrice(produto.price)}
              </Price>
            </TitlePrice>
          </Information>
          {produto.discount > 0 && <Discount>-{produto.discount}%</Discount>}
        </ProdutosContainer>
      ))}
    </Container>
  );
}

const fetchData = async () =>
  await axios
    .get("http://localhost:3333/")
    .then((res) => ({
      produtos: res.data,
    }))
    .catch(() => ({
      produtos: null,
    }));

export async function getStaticProps(contexto) {
  const data = await fetchData();
  return {
    props: {
      produtos: data,
    },
  };
}

export default FlatlistProdutos;

But in another component without complexity it manages to bring the data:

EN: But in Another Component without Complexity it can Bring the data:

Code of the above component

EN: Component code above:

import React from "react";
import axios from "axios";

const test = ({ produtos = [] }) => {
  return (
    <>
      <section>
        <header>
          <h1>List of users</h1>
        </header>
        {produtos.map((produto) => (
          <div>{produto.name}</div>
        ))}
      </section>
    </>
  );
};

export default test;

const fetchData = async () =>
  await axios
    .get("http://localhost:3333/")
    .then((res) => ({
      error: false,
      produtos: res.data,
    }))
    .catch(() => ({
      produtos: null,
    }));

export async function getStaticProps(context) {
  const data = await fetchData();
  return { props: data };
}

Answer 1

I ended up discovering that requests made in components, are not rendered in ssr, but if I add them on the page above it, they appear and step as props.