CODEWITHSUNDEEP
reactjsnext.jsserver-side-rendering
Haksatrya Bhaswara
Haksatrya Bhaswara

Reputation: 237

getServerSideProps can't run properly

I'm trying to dive deeper into Next.js, and currently I'm in the getServerSideProps() function. I don't know why, it looks like this function isn't working/running, I use console.log and it doesn't display the log that I'm trying to display.

Here is my code:

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 } };
}

And this is the result:

enter image description here

Here are the details of my package.json file:

{
  "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"
  }
}

Upvotes: 0

Views: 1644

Answers (2)

Haksatrya Bhaswara
Haksatrya Bhaswara

Reputation: 237

i found my answer, its all good btw, and the last task is to display the data, so what i'm doin is put the array (fetched data) into state using useState in useEffect, and display it like usual..

Upvotes: 0

Leonardo Drici
Leonardo Drici

Reputation: 789

getServerSideProps as the name mentions is a function that is run on the server. What are you looking at there is the client side console, which means that there you'll see any console.log that has been made by the client side version of the app. To see the console.log you want you should try and look in the terminal where you start the app. (where you run yarn dev/npm run dev)

Upvotes: 3

Related Questions