getStaticProps

getServerSideProps(SSR) 에 의한 페이지는 느리다

static 사이트란, 정적인 사이트입니다. database를 필요로 하지 않는 사이트가 주로 static 사이트입니다. static 한 사이트는 매우 빠르지만, 업데이트가 힘들다는 단점이 있습니다.

언제 getStaticProps를 사용해야 합니까?

• 페이지를 렌더링하는 데 필요한 데이터는 빌드 타임에서 이용가능해야합니다.
• 데이터를 공개적으로 캐시할 수 있습니다.
• 페이지는 SEO를 위해 미리 렌더링되어야 하고 매우 빨라야 합니다. getStaticProps는 성능을 위해 CDN에서 캐시할 수 있는 HTML 및 JSON 파일을 생성합니다.

빌드 때 만 변경되므로, 잦은 변경이 필요없는 페이지에 이용합니다

getStaticProps

getStaticProps 은 페이지가 빌드되고, nextjs가 해당 페이지를 export 한 후 일반 html로 될 때, 딱 한 번 만 실행됨

import Layout from "@components/layout";
import { readdirSync, readFileSync } from "fs";
import matter from "gray-matter";
import { NextPage } from "next";
import React from "react";

interface Post {
  title: string;
  date: string;
  category: string;
}
// getStaticProps 로 받은 props로 html 을 빌드해줍니다.
const Blog: NextPage<{ posts: Post[] }> = ({ posts }) => {
  return (
    <Layout title="Blog">
      <h1 className="font-semibold text-center text-xl mt-5 mb-10">
        Latest Posts:
      </h1>
      {posts.map((post, index) => (
        <div key={index} className="mb-5">
          <span className="text-lg text-red-500">{post.title}</span>
          <div>
            <span>
              {post.date} / {post.category}
            </span>
          </div>
        </div>
      ))}
    </Layout>
  );
};

export default Blog;
// 이 부분이 가장 먼저 실행됩니다.
export async function getStaticProps() {
  const blogPosts = readdirSync("./blog").map((file) => {
    const content = readFileSync(`./blog/${file}`, "utf-8");
    return matter(content).data;
  });
  return {
    props: {
      posts: blogPosts,
    },
  };
}