[Next.js] 블로그 데이터

블로그 데이터

이제 파일 시스템을 사용하여 앱에 블로그 데이터를 추가 해보겠습니다.

각 블로그 게시물은 마크다운 파일이 됩니다.

 

- 프로젝트 최상위에 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.

각 마크다운 파일의 맨 위에는 title 및 date가 있습니다.

이를 YAML Front Matter라고 하며, gray-matter라는 라이브러리를 사용하여 구문 분석 할 수 있습니다.

---

블로그 데이터 구문 분석 → getStaticProps

이제 pages/index.js에 이 데이터를 사용하여 페이지를 업데이트 하겠습니다.

 

아래와 과정을 거치며

- 각 마크다운 파일을 구문 분석하고 title, date 및 파일 이름( id, 게시물 url로 사용됨)을 가져옵니다.

- 인덱스 페이지에 날짜별로 데이터를 나열합니다.

 

사전 렌더링에서 이를 수행하기 위해서는 getStaticProps를 구현 해야 합니다.

---

다음 포스팅에서 이어집니다.

Learn | Next.js