Next.js : How to bring data in Nextjs (getStaticProps) (SSG)

Normally, when importing data in React, import it from useEffect. However, in Nextjs, it is imported using a different method. (Of course, you can also import it using useEffect.)

 

getStaticProps

getStaticProps is a Next.js function that allows you to pre-render your pages on the server. This can improve performance and SEO, as the browser does not need to render the pages on its own.

 

The getStaticProps function is called once during the build process, and the results are cached. This means that the next time a user visits the page, the pre-rendered HTML will be served from the cache, which can significantly improve performance.

 

The getStaticProps function takes two arguments:

• params: An object that contains the URL parameters for the page.
• context: An object that contains information about the current build context.

The getStaticProps function must return an object with the following properties:

• props: An object that contains the props that will be passed to the page component.
• revalidate: An optional number that specifies how often the page should be revalidated.

Here is an example of how to use getStaticProps:

export const getStaticProps = async (params) => {
  const data = await fetch(`/api/data`).then((res) => res.json());

  return {
    props: {
      data,
    },
  };
};

In this example, the getStaticProps function fetches data from an API and returns it as props for the page component. The data will be pre-rendered on the server and cached, so it will be served to the user quickly the next time they visit the page.

 

The getStaticProps function is a powerful tool that can help you improve the performance and SEO of your Next.js applications. If you are looking for a way to pre-render your pages on the server, then getStaticProps is a great option.

 

Here are some additional benefits of using getStaticProps:

• Performance: Pre-rendering pages on the server can significantly improve performance, as the browser does not need to render the pages on its own.
• SEO: Pre-rendering pages for search engines can help improve your website's SEO.
• Scalability: getStaticProps can be used to scale your application by generating static pages for different audiences or devices.

If you are looking for a way to improve the performance, SEO, and scalability of your Next.js applications, then getStaticProps is a great option.

 

When do I use 'getStaticProps'?

You should use getStaticProps when you want to pre-render your pages on the server. This is a good idea for pages that:

• Do not change frequently. If the data on your page does not change frequently, then you can pre-render it on the server and cache it. This will improve performance, as the browser does not need to render the pages on its own.
• Are important for SEO. Pre-rendering pages for search engines can help improve your website's SEO.
• Need to be scalable. getStaticProps can be used to scale your application by generating static pages for different audiences or devices.

Here are some examples of when you might want to use getStaticProps:

• A blog post page: The content of a blog post does not change frequently, so you can pre-render it on the server and cache it. This will improve performance, as the browser does not need to render the page on its own.
• A product page: The product information on a product page does not change frequently, so you can pre-render it on the server and cache it. This will improve performance, as the browser does not need to render the page on its own.
• A search results page: The search results on a search results page can be pre-rendered on the server and cached. This will improve performance, as the browser does not need to render the pages on its own.

If you are not sure whether or not to use getStaticProps, then you can always use getServerSideProps. getServerSideProps is a similar function that allows you to fetch data from the server on each request. However, getServerSideProps does not cache the results, so it will not improve performance as much as getStaticProps.

 

🚨

SSG does not work properly in the development environment. It works like an SSR. Therefore, in order to see the SSG properly, you need to build it.

 

=> Even when you refresh the page the page doesn't change.

 

import Head from 'next/head';
import { Inter } from 'next/font/google';
import Link from 'next/link';
import { useEffect, useState } from 'react';

const inter = Inter({ subsets: ['latin'] });

export async function getStaticProps() {
  console.log('server');
  return {
    props: { time: new Date().toISOString() },
  };
}

export default function SSG({ time }) {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name='description' content='Generated by create next app' />
        <meta name='viewport' content='width=device-width, initial-scale=1' />
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <main>
        <h1>{time}</h1>
        <h1>
          <Link href='/csr'>
            <div>CSR로</div>
          </Link>
        </h1>
      </main>
    </>
  );
}