Internal API fetch with getServerSideProps? (Next.js)
But then I read in the Next.js documentation that you should not use
fetch()
to all an API route ingetServerSideProps()
.
You want to use the logic that's in your API route directly in getServerSideProps
, rather than calling your internal API. That's because getServerSideProps
runs on the server just like the API routes (making a request from the server to the server itself would be pointless). You can read from the filesystem or access a database directly from getServerSideProps
.
From Next.js getServerSideProps
documentation:
It can be tempting to reach for an API Route when you want to fetch data from the server, then call that API route from
getServerSideProps
. This is an unnecessary and inefficient approach, as it will cause an extra request to be made due to bothgetServerSideProps
and API Routes running on the server.(...) Instead, directly import the logic used inside your API Route into
getServerSideProps
. This could mean calling a CMS, database, or other API directly from insidegetServerSideProps
.
(Note that the same applies when using getStaticProps
/getStaticPaths
methods)
Here's a small refactor example that allows you to have logic from an API route reused in getServerSideProps
.
Let's assume you have this simple API route.
// pages/api/user
export default async function handler(req, res) {
// Using a fetch here but could be any async operation to an external source
const response = await fetch(/* external API endpoint */)
const jsonData = await response.json()
res.status(200).json(jsonData)
}
You can extract the fetching logic to a separate function (can still keep it in api/user
if you want), which is still usable in the API route.
// pages/api/user
export async function getData() {
const response = await fetch(/* external API endpoint */)
const jsonData = await response.json()
return jsonData
}
export default async function handler(req, res) {
const jsonData = await getData()
res.status(200).json(jsonData)
}
But also allows you to re-use the getData
function in getServerSideProps
.
// pages/home
import { getData } from './api/user'
//...
export async function getServerSideProps(context) {
const jsonData = await getData()
//...
}
m4tt
Updated on June 06, 2022Comments
-
m4tt almost 2 years
I'm new to Next.js and I'm trying to understand the suggested structure and dealing with data between pages or components.
For instance, inside my page
home.js
, I fetch an internal API called/api/user.js
which returns some user data from MongoDB. I am doing this by usingfetch()
to call the API route from withingetServerSideProps()
, which passes various props to the page after some calculations.From my understanding, this is good for SEO, since props get fetched/modified server-side and the page gets them ready to render. But then I read in the Next.js documentation that you should not use
fetch()
to all an API route ingetServerSideProps()
. So what am I suppose to do to comply to good practice and good SEO?The reason I'm not doing the required calculations for
home.js
in the API route itself is that I need more generic data from this API route, as I will use it in other pages as well.I also have to consider caching, which client-side is very straightforward using SWR to fetch an internal API, but server-side I'm not yet sure how to achieve it.
home.js
:export default function Page({ prop1, prop2, prop3 }) { // render etc. } export async function getServerSideProps(context) { const session = await getSession(context) let data = null var aArray = [], bArray = [], cArray = [] const { db } = await connectToDatabase() function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex; while (0 !== currentIndex) { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; } if (session) { const hostname = process.env.NEXT_PUBLIC_SITE_URL const options = { headers: { cookie: context.req.headers.cookie } } const res = await fetch(`${hostname}/api/user`, options) const json = await res.json() if (json.data) { data = json.data } // do some math with data ... // connect to MongoDB and do some comparisons, etc.
-
m4tt over 3 yearsThe export function is what I also needed elsewhere where I need a reusable function but no one suggested me to export it this way, thanks I'll try this out
-
m4tt about 3 yearsabsolutely, another way I solved it in some cases was to use "useSWR" client-side which also caches automatically the requests.
-
Jatinder almost 3 yearsto the bang! frustrated whole day found this at last working getting the data right away in the box! why api/routes doesn't directly why need to feed it other way, what kind of approach they took to build up, I don't understand! everything is to feed making around around our heads! sorry this might be my frustrate comment!
-
Jason Glass over 2 yearsI'm just using an env variable to complete the absolute paths.
-
Franco over 2 yearsit's so weird that this isn't clear from the otherwise excellent documentation
-
juliomalves about 2 yearsNext.js docs have now been updated to mention this: nextjs.org/docs/basic-features/data-fetching/….
-
fahad shaikh almost 2 yearsCalling the API route from
getServerSideProps
can be useful when you're not using Node js but some other languages/framework for example Django or Laravel. -
juliomalves almost 2 years@fahadshaikh You're absolutely right, but this answer is specific to internal APIs to Next.js (API routes). It's perfectly fine to call external endpoints from
getServerSideProps
. I'll add a note to make that clearer. -
Roi almost 2 years@juliomalves Does exporting a function from
api
folder reveal the function or the rest of the file's code on the client side? -
juliomalves almost 2 years@Roi Not by just exporting the function, only if you use that function in client-side code does it get exposed.