Should i use getStatic props for offline data ? Next.js-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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