getServerSideProps 在 Nextjs 中第一次没有获取数据答案

【问题标题】：getServerSideProps does not fetch the data at first time in NextjsgetServerSideProps 在 Nextjs 中第一次没有获取数据
【发布时间】：2022-01-31 23:46:34
【问题描述】：

我有一个从我的 MongoDB 数据库中获取数据的组件。获取数据后，我想通过这些数据创建一些卡片。我的后端服务器正在工作。我还将前端连接到后端。

import axios from "axios";
import Cards from "../components/Cards";
import CarouselComponent from "../components/Carousel";
import { Navbar } from "../components/Navbar";

export default function Home({ products }) {
  console.log(products);
  return (
    <div className="">
      <Navbar />
      <CarouselComponent />
      {/* <Cards products={products} /> */}
    </div>
  );
}

export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`http://localhost:3000/api/products`);
  const data = await res.json();

  // Pass data to the page via props
  return { props: { products: data } };
}

products 道具让我变成了空物。但是当我第二次刷新页面时，它给我带来了所有的产品。我在邮递员中对其进行了测试，在邮递员中我也可以得到所有产品。为什么当我停止服务器并重新启动它时它不获取产品？

【问题讨论】：

也许this 可以提供帮助。
@dariosicily 我知道如何在 reactjs 中做到这一点。它是服务器端渲染。当我打电话给randomuser.me/api/?results=5 时，它会获取所有这些并且所有用户都会来。但是，当我对 localstorage 进行此调用时，它不会获取它们。我不明白与您发送的此链接的关系

标签： javascript reactjs next.js fetch

【解决方案1】：

解决方案 我加了

 await dbConnect();

到

export async function getServerSideProps() {
  // Fetch data from external API
  await dbConnect();
  const res = await fetch(`http://localhost:3000/api/products`);
  const data = await res.json();

  // Pass data to the page via props
  return { props: { products: data } };
}

我认为我的错误是在连接到服务器之前尝试获取数据

【讨论】：