[공식문서] NextJS - Pre-rendering and Data Fetching #6

간단한 블로그 아키텍처 만들기

우리 예제의 블로그 게시물은 애플리케이션 디렉토리의 로컬 마크다운 파일로 저장됩니다(외부 데이터 소스에서 가져오는 것이 아닙니다). 따라서 파일 시스템에서 데이터를 읽어와야 합니다.

 

이 섹션에서는 파일 시스템에서 데이터를 읽는 블로그를 만드는 단계를 살펴보겠습니다.

 

마크다운 파일 생성

먼저 루프 폴더에 posts(이것은 pages/posts와 동일하지 않습니다)라는 새로운 최상위 디렉토리를 만듭니다. 그런 다음 posts 내에 pre-rendering.md 및 ssg-ssr.md 두 개의 파일을 만듭니다.

 

이제 다음 코드를 posts/pre-rendering.md에 복사하세요.

---
title: 'Two Forms of Pre-rendering'
date: '2020-01-01'
---

Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.

- **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.
- **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.

Importantly, Next.js lets you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

그런 다음 코드를 posts/ssg-ssr.md에 복사하세요.

---
title: 'When to Use Static Generation v.s. Server-side Rendering'
date: '2020-01-02'
---

We recommend using **Static Generation** (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.

You can use Static Generation for many types of pages, including:

- Marketing pages
- Blog posts
- E-commerce product listings
- Help and documentation

You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.

On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.

In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.

각 마크다운 파일은 제목과 날짜를 포함하는 맨 위의 메타데이터 섹션을 가지고 있음을 알 수 있습니다. 이를 gray-matter라는 라이브러리를 사용하여 구문 분석을 할 수 있습니다.

 

gray-matter 설치

먼저 gray-matter를 설치하세요. gray-matter는 각 마크다운 파일의 메타데이터를 구문 분석할 수 있게 해주는 라이브러리입니다.

npm install gray-matter

 

파일 시스템에서 데이터를 읽는 유틸리티 함수 생성

다음으로 파일 시스템에서 데이터를 구문 분석하는 유틸리티 함수를 만듭니다. 이 유틸리티 함수를 사용하여 다음을 수행하려고 합니다.

 

• 각 마크다운 파일을 구문 분석하고 제목, 날짜 및 파일 이름(id로 사용됨)을 가져옵니다.
• 날짜별로 정렬된 인덱스 페이지에서 데이터를 나열합니다.

루트 디렉토리에 lib라는 최상위 디렉토리를 만듭니다. 그런 다음 lib내에 posts.js라는 파일을 만들고 이 코드를 복사하여 붙여넣습니다.

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

const postsDirectory = path.join(process.cwd(), 'posts');

export function getSortedPostsData() {
  // Get file names under /posts
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames.map((fileName) => {
    // Remove ".md" from file name to get id
    const id = fileName.replace(/\.md$/, '');

    // Read markdown file as string
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');

    // Use gray-matter to parse the post metadata section
    const matterResult = matter(fileContents);

    // Combine the data with the id
    return {
      id,
      ...matterResult.data,
    };
  });
  // Sort posts by date
  return allPostsData.sort((a, b) => {
    if (a.date < b.date) {
      return 1;
    } else {
      return -1;
    }
  });
}

참고사항:
Next.js에서는 lib 폴더에 페이지 폴더와 마찬가지로 이름이 할당되지 않습니다. 따라서 lib 또는 utils를 사용하는 것이 일반적인 관례입니다.
위의 코드가 무엇을 하는지 이해할 필요는 없으며 Next.js를 배우기 위해 함수는 블로그 예제를 작동시키기 위한 것입니다. 그러나 더 자세히 알고 싶다면 다음을 참조하십시오.

• fs는 파일 시스템에서 파일을 읽을 수 있는 Node.js 모듈입니다.
• path는 파일 경로를 조작할 수 있는 Node.js 모듈입니다.
• matter는 각 마크다운 파일의 메타데이터를 구문 분석할 수 있는 라이브러리입니다.
• Next.js의 lib 폴더는 페이지 폴더와 달리 이름이 지정되지 않습니다. 따라서 lib 또는 utils를 일반적으로 사용합니다.

블로그 데이터 가져오기

이제 블로그 데이터가 구문 분석되었으므로 이를 인덱스 페이지(pages/index)에 추가해야 합니다. 이를 위해 Next.js 데이터 가져오기 방법 중 하나인 getStaticProps()를 구현하는 방법을 다음 섹션에서 배우겠습니다.

Next .js 공식문서 - getStaticProps() 사용해서 블로그 데이터 가져오기

다음 페이지에서 진행해 보겠습니다!