[ Next.js - DeepDive ] - getStaticProps

getServerSideProps는 유저의 요청이 발생할 때마다 일어난다는 겁니다. 다만 지금부터 알아볼 getStaticProps는 딱 한 번 실행됩니다. 페이지가 빌드되고, nextjs가 페이지를 export한 후 일반 html로 될 떄 실행됩니다. 

 

이제 본격적으로 getStaticProps를 사용해보도록 하겠습니다. 우리가 posts/[ 블로그 번호~~ ]를 markdown언어로 작성하고 SSG를 적용하기로 했습니다. 기존에 SSR를 사용하면 매 요청마다 getServerSideProps가 실행되었습니다. 하지만 getStaticProps는 빌드타임시 다 한번 실행됩니다.

 

getStaticProps안에 기존의 Prisma모델을 싹다 때려박아서 모든 블로그 post를 제공하고, 여기에서 HTML을 생성할 수 있습니다. 이는 쉽게 구현할 수도 있습니다. 다만 이렇게 하지 않고, 다르게 했습니다. 그래야 더 많은것을 배울 수 있고, 다른 파일을 참조해서 SSG를 구현할 수 있기 때문입니다.

 

/pages/blog.tsx

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

interface Post {
  title: string;
  date: string;
  category: string;
}

const Blog: NextPage<{ posts: Post[] }> = ({ posts }) => {
  return (
    <Layout title="bloNextPage" seoTitle="Blog">
      <h1 className="mb-10 mt-5 text-center text-lg font-semibold">
        Latest Post:
      </h1>
      <ul>
        {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>
        ))}
      </ul>
    </Layout>
  );
};

export async function getStaticProps() {
  const blogPosts = readdirSync("./posts").map((file) => {
    const content = readFileSync(`./posts/${file}`, "utf-8");
    return matter(content).data;
  });
  console.log(blogPosts);
  return {
    props: {
      posts: blogPosts,
    },
  };
}

export default Blog;

 

/posts/01-firstpost.md

---
title: Welcome Everyone
date: 2022.02.02
category: thoughts
---

# Welcome everyone!

THis is my first blog post!

Thank you for reading!

/posts/02-back-home.md

---
title: Back home
date: 2022.02.02
category: home
---

# Back home

Get fat.

/posts/02-my-trip-to-egypt.md

---
title: Egypt to great
date: 2022.02.02
category: travel
---

# Travel more. Buy less stuff.

Get fat.

간단한 mark down으로 블로그 포스트를 만들었습니다. 우리는 또한 markdown을 파싱하기 위해 gray-matter를 깔고 blog.tsx파일에서 다른 폴더의 markdown을 불러와서 파싱한 후에, 렌더링하는 작업 순으로 진행했습니다.

 

또한 blog.tsx를 작성할 때 주의해야 할 점이 있습니다. 빌드타임에서는 nextjs에서 blog.tsx와 posts가 같은 레벨에 있기 때문에 ../posts가 아니라 ./posts로 작성해 주어야 합니다.

다음과 같이 정상작동하는 것을 보실 수 있습니다. 그리고 npm run build를 해서 진짜 blog.html이 잘 생성되었는지 확인해 보도록 하겠습니다./

이렇게 나오는 것을 보실 수 있습니다.

그리고 빌드타임에서 위 모양을 확인해보면 각각의 역할이 상세히 나옴을 보실 수 있습니다.

람다는 아마 api폴더들과 /profile과 /페이지가 이전에 getServerSideProps를 통해 SSR + SWR를 구현했기 때문에, 람다로 표현될 것입니다. 또한 채워지지 않은 원은 Static페이지인데, 말 그대로 아무것도 아닌 파일들을 Nextjs가 html로 파싱한 페이지를 말합니다. 그 외에도 지금 만든 /blog는 채워진 원인데, 이는 SSG로 만들어진 페이지를 의미합니다.