How to use GetInitialProps and GetServerSideProps in Next.js
1 replies
Last updated: Jun 23, 2021
N
Hey guys, can someone please advice. I recently started working with Next.js. Works perfect with Sanity really easy to fetch data and to create dynamic routes. Now I would like to know can someone please advice what to use if I have to fetch data with “getInitialProps” and “getServerSideProps” it really confuses me. On the Next.js website it’s recommend to use the getInitialProps all all time. Which one to use?
Thanks
😄
Thanks
😄
Jun 22, 2021, 11:29 PM
G
Hi Nino.
There are many ways you can approach it, but I tend to put my fetches in an api file (/lib/api.js) and import that where it’s needed. That api.js file will import a configured Sanity client and might look like:
Then in a page, you’ll use
Whichever you use determines whether you are fetching at build time or run time. The
getInitialPropsis still supported but was effectively replaced by
getStaticPropsand
getServerSideProps. I’d recommend using the latter two instead.
There are many ways you can approach it, but I tend to put my fetches in an api file (/lib/api.js) and import that where it’s needed. That api.js file will import a configured Sanity client and might look like:
export async function getPostsByName(name) {
const result = await client.fetch(
`*[_type == "post" && involved[]->slug.current match $name] | order(date desc) {
title,
'impacts': impacts[]->,
featured,
date,
excerpt,
'slug': slug.current,
'coverImage': image,
}`,
{ name }
);
return result;
}
export async function getAllPosts() {
const result = await client.fetch(
`*[_type == "post"] | order(date desc, _updatedAt desc) {
title,
'impacts': impacts[]->,
featured,
date,
excerpt,
'slug': slug.current,
'coverImage': image,
}`
);
return result;
}
export async function getStaffBySlug(slug) {
const result = await client.fetch(
`*[_type == "staff" && slug.current == $slug] {
firstName,
lastName,
'department': department->name,
position,
image,
}`,
{ slug }
);
return result;
}getStaticPropsor
getServerSidePropsto fetch your data by calling your functions. If you’re using
getStaticProps, you might also use
getStaticPathsto specify dynamic routes.
Whichever you use determines whether you are fetching at build time or run time. The
get…Props()functions can return a props object that gets passed into your page component. From there, you will use that props object to construct your page.
Jun 23, 2021, 2:09 AM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.