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

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

Method 2

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

Method 3

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0