I have next js project with some offline static data (like content of the page)
Should i use getStaticProps in my project?
data are stored in array for a later .map
For example
import { data } from '../data/homepage/content';
const Home: NextPage = () => {
return (
<>
<Carousel />
{data.map((data, index) => (
<TwoColumnsBlueWhite
title={data.title}
subTitle={data.subTitle}
content={data.content}
links={data.links}
imageSide={data.imageSide}
/>
))}
</>
);
};
If i dont expect in future some data fetching from database. Should i use getStaticProps for a SEO? Or its just for a fetching database data.
import { data } from '../../../data/homepage/content';
import type { NextApiRequest, NextApiResponse } from 'next';
const handler = (req: NextApiRequest, res: NextApiResponse) => {
// The cookie middleware will add the `set-cookie` header
res.status(200).json(data);
};
export default handler;
export async function getStaticProps() {
const res = await fetch('http://localhost:3000/api/homepage/content');
const posts = await res.json();
return {
props: {
posts,
},
};
}
export default Home;```
Yes.
That will be brilliant idea, as this will be fetched once during build time and the API will never be hit again, when clients request for the page.
Also with this page being static, it can be cached effectively.
What I will recommend you do, is to add a revalidate, to handle future updates of the homepage content without rebuilding the page.
export async function getStaticProps() {
const res = await fetch('http://localhost:3000/api/homepage/content');
const posts = await res.json();
return {
props: {
posts,
},
revalidate: 10, // In seconds
};
}
export default Home;
Alternatively, if the content of the API is dynamic, I will suggest you use getServerSideProps instead
getStaticProps is best if you have predefined data because it will make you application fast because
If you export a function called getStaticProps (Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps
getStaticProps always runs during next build
Hell yes, you should use getStaticProps if your data is offline or static. there are many ways to do it, as you mentioned your data is in the js file. In this case, I mostly prefer to create a function to get that data such as getData or something-
// .../src/lib/fetchData.js
import { data } from '../data/homepage/content';
export function getData() {
return data;
}
And in your HomePage do like this-
import { getData } from "../lib/fetchData";
// getting data as pageProps
export default function Homepage({ data }) {
return (
<>
<Carousel />
{data.map((data, index) => (
<TwoColumnsBlueWhite
title={data.title}
subTitle={data.subTitle}
content={data.content}
links={data.links}
imageSide={data.imageSide}
/>
))}
</>
);
};
export async function getStaticProps() {
const data = getData();
return {
props: {
data,
},
};
}
If your data changes over time then use the next.js revalidate it is great option for that.