Question 22493 in SEO Question posted in
Some basic information to get you started with this can be found here.

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

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

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search