getServerSideProps 无法运行正确

Question

我正在尝试更深入地研究 Next.js，目前我在 getServerSideProps() 函数中。我不知道为什么，看起来这个功能不是 working/running，我使用 console.log 并且它不显示我试图显示的日志。

这是我的代码：

import React from "react";

export default function Get({ results: query }) {
  return (
    <div>
      <h1>Check getServerSideProps</h1>
      {query.map((q, index) => {
        <div key={index}>
          <h1>{q.title}</h1>
          <p>{q.body}</p>
        </div>;
      })}
    </div>
  );
}

export async function getServerSideProps(context) {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/?q=${context.params.query}`
  );
  console.log("CHECK");
  const datas = await res.json();
  return { props: { results: datas } };
}

这是结果：

这是我的 package.json 文件的详细信息：

{
  "name": "doqmentnew",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "10.0.5",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }
}

Answer 1

getServerSideProps 顾名思义是服务器上运行的一个函数。你在看什么是客户端控制台，这意味着你会看到应用程序的客户端版本所做的任何 console.log。要查看您想要的 console.log，您应该尝试查看启动应用程序的终端。（你在哪里运行 yarn dev/npm run dev）

Answer 2

我找到了我的答案，顺便说一句，一切都很好，最后一个任务是显示数据，所以我正在做的是使用 useEffect 中的 useState 将数组（获取的数据）放入状态，并像这样显示平时..

getServerSideProps 无法运行正确

getServerSideProps can't run properly

reactjs

server-side-rendering

next.js

getServerSideProps 无法 运行 正确

getServerSideProps can't run properly

reactjs

server-side-rendering

next.js

getServerSideProps 无法运行正确