NextJs getServerSideProps() never calls api - node.js

Question

I have created a nextjs page and inside the page, there is getServerSideProps that calls API to fetch data.
The problem is that getServerSideProps never calls API and returns a response error 403 Unauthorized
nextjs is serving data from .next folder and returns a JSON response and instead of calling API it calls this URL http://localhost:3000/_next/data/development/contacts.json
This is my code
import React, { useState, useEffect } from "react"
import {
Card,
CardHeader,
CardFooter,
Container,
Row,
Button
} from "reactstrap"
import AdminLayout from "../components/layouts/AdminLayout"
import PropTypes from "prop-types"
import TablePagination from "../components/common/TablePagination"
import { fetchData } from "../api"
import { toast } from "react-toastify"
import { useSession } from "../context/SessionContext"
import ProtectPage from "../hocs/ProtectPage"
import { getContacts } from "../api/contacts"
import ContactsTable from "../components/contacts/ContactsTable"
const Contacts = ({ initialContacts, initialPagination, error }) => {
const [contacts, setContacts] = useState(initialContacts)
const [pagination, setPagination] = useState(initialPagination)
const session = useSession()
const handlePagination = async (page) => {
fetchData({
apiMethod: () => getContacts({ page }),
callback: (res, error) => {
if (error || !res) {
toast("Error loading Contacts")
} else {
setContacts(res.data)
setPagination(res.pagination)
}
session.loadingQueue.dequeue()
}
})
}
useEffect(() => {
setContacts(initialContacts)
setPagination(initialPagination)
}, [initialContacts, initialPagination])
return (
<AdminLayout>
{/* Page content */}
<Container className="mt--7" fluid>
<Row>
<div className="col">
<Card className="shadow">
<CardHeader className="border-0">
<Row className="justify-content-between w-100 m-0">
<h3 className="mb-0">Contacts</h3>
</Row>
</CardHeader>
<ContactsTable contacts={contacts ?? []} />
<CardFooter className="py-4">
<TablePagination
{...pagination}
handlePagination={handlePagination}
/>
</CardFooter>
</Card>
</div>
</Row>
</Container>
</AdminLayout>
)
}
Contacts.propTypes = {
initialContacts: PropTypes.array.isRequired,
initialPagination: PropTypes.object.isRequired
}
export async function getServerSideProps(ctx) {
try {
const contactsRes = await getContacts({})
const { data: initialContacts, pagination: initialPagination } =
contactsRes.data
return {
props: {
initialContacts,
initialPagination
}
}
} catch (error) {
return {
props: {
initialContacts: [],
initialPagination: {},
error: true
}
}
}
}
export default ProtectPage(Contacts)
I tried to disable cache and nothing worked. still serving JSON files.

Answer 1

console.log(contactsRes) in getServerSideProps
Or
call your api from getServerSideProps (await fetch(your_path))