SSG를 사용하면 좋은 페이지

ssg(build time) vs SSR(request time)

ssg: 빌드 타임에 미리 정적 파일 생성

ssr: 특정 url 접근할 때 그때서야 pre-render

next-js 둘 다 제공함.

next.js활용하면 페이지별로 Pre-rendering 방식 선택 가능.

getStaticProps -> ssg

getServerSideProps -> ssr

---

-Marketing pages

-blog post

-E-commerce product listings

-Help and documentation

정적으로 만들어 놓으면 업데이트될 때 동안 한동안 변하지 않는 것들을 상대로 하면 좋다.

적용 여부 선택 기준

사용자가 페이지를 요청하기 전에 Pre-render 할 수 있는가?

Yes라면 SSG(로그인하기 전에도 볼 페이지를 미리 정할 수 있으면)

No 라면 SSR 혹은 ISR 혹은 CSR(로그인 구분 하고 나서 Pre-render)

---

만약에 SSG를 쓰고 있다가 SSR로 바꾸려고 하더라도 굉장히 편하다

getStaticProps에서 getServerSideProps로만 바꿔주면 되기 때문에..

ssg의 2가지 케이스

1. 외부 데이터 없이(외부 API, 외부 DATA, DB) 없이 정적인 것) pre-rendering

2. 외부 데이터를 가져와서(외부의 DB, API, DATA) pre-rendering

2번을 공부하기 위해 다른 파일을 읽어보자

https://nextjs.org/learn/basics/data-fetching/blog-data 들어가서

아래 코드들을 복사하자. 그리고 blog파일의 root에 "post" Folder를 만든 후

pre-rendering.md File 생성한다. 그 이후 아래 코드를 넣어준다.

---
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.

이후 하나 더.. ssg-ssr.md file도 만들어서 아래 코드를 복사 붙여 넣기 한다.

---
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: 'When to Use Static Generation v.s. Server-side Rendering'

date: '2020-01-02'

---

이렇게 -으로 감싸진 것을 YAML Front Matter라고 한다. Head component에 넣어야 되는 Meta data처럼, 이 블로그 글에 대한 metadata를 담고 있다.

이 파일을 해석하기 위해선 yarn add gray-matter명령어를 설치해야 한다.

그리고 https://nextjs.org/learn/basics/data-fetching/implement-getstaticprops에 가서 6page에 있는 걸 복사. 이후 Root에 lib Folder 만들고,

post.js 생성

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

//Service가 돌고 있는 root 즉 blog에 있는,'posts' 파일(md file저장 해놓은 곳)
const postsDirectory = path.join(process.cwd(), 'posts');

export function getSortedPostsData()/*정렬된 데이터를 가져옴*/ {
  // Get file names under /posts
  //fs는 파일 시스템을 읽어오는 node.js의 라이브러리다.
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames.map((fileName) => {
    // Remove ".md" from file name to get id
    // .md를 제거하면 pre-rendering ssg-ssr만 남고

    //그것을 id로 삼는다.
    const id = fileName.replace(/\.md$/, '');

    // Read markdown file as string
    //fileName은 여전히 md가 있다.
    //fullPath는 root에서 pre-rendering.md가 만들어질거고
    const fullPath = path.join(postsDirectory, fileName);
    //직접 utf-8형식으로 읽어서 fileContents에 담는다.
    const fileContents = fs.readFileSync(fullPath, 'utf8');
    //담고난 뒤엔 -으로 감싸진 부분만 해석 하기 위해  grey-matter 설치했다.

    //matter로 감싸주면 matterResult로 metadata를 다 읽어낸다.
    // Use gray-matter to parse the post metadata section
    const matterResult = matter(fileContents);

    // Combine the data with the id
    //id는 파일 이름이었고, 그것을 빼내주는 것이 getSortedPostsData 함수다.
    return {
      id,
      ...matterResult.data,
    };
  });
  // Sort posts by date
  //날짜가 느린것을 앞에보내고 날짜가 빠른 것을 앞에 보내는 것
  //즉 최신 순이다.
  return allPostsData.sort((a, b) => {
    if (a.date < b.date) {
      return 1;
    } else {
      return -1;
    }
  });
}

이후 index.js에서

import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import { getSortedPostsData } from '../lib/post'
import utilStyles from '../styles/utils.module.css'

//ssr로 바꾸고 싶으면 getServerSideProps로 바꾸면 끝임
export async function getStaticProps() {
  //ssg Data가 담겨져 있다.
  const allPostsData = getSortedPostsData()

  return {
//ssg가 담겨있는 props retrun
props: {
  allPostsData,
},
  }
}

export default function Home({ allPostsData }) {
  return (
    
      
        {siteTitle}

I love coding 😍

(This is a sample website - you’ll be building a site like this on {' '} our Next.js tutorial.)

Blog

• {title}
  {id}
  {date}

        
    
  )
}
//allPostsData를 map으로 돌면서 id key로 주고 title,id(파일이름),date를 준다.

---

CSR로 바꾸는 방법

root경로의 pages 폴더에서 에서 api 폴더를 하나 더 만들고

posts.js 파일 생성. 이후 아래 참조.

//getSortedPostsData 가져온다.
import { getSortedPostsData } from "../../lib/post"

export default function handler(req, res) {
    const allPostsData = getSortedPostsData()
    res.status(200).json({allPostsData})
}

이후 index.js로.. 여기서 getSortedPostsData import를 제거해줘야 한다.

import Head from 'next/head'
import { useEffect } from 'react'
import Layout, { siteTitle } from '../components/layout'
import utilStyles from '../styles/utils.module.css'
import React, { useState } from 'react';
//ssr로 바꾸고 싶으면 getServerSideProps로 바꾸면 끝임
//export async function getStaticProps() {
//ssg Data가 담겨져 있다.
//const allPostsData = getSortedPostsData()
//return {
//ssg가 담겨있는 props retrun
//props: {
//allPostsData,
//},
//}
//}

//CSR로 바꾸는 방법. 
export default function Home() {
const [allPostsData, setAllPostsData] = useState([])
useEffect(()=>{
  //posts에서 response가 오면 json으로 바꿔주고.data가 오면 A
  fetch('/api/posts')
  .then((res) => res.json())
  .then((data) => setAllPostsData(data.allPostsData))
}, [])

  return (
    
      
        {siteTitle}

I love coding 😍

(This is a sample website - you’ll be building a site like this on {' '} our Next.js tutorial.)

Blog

• {title}
  {id}
  {date}

        
    
  ) 
}

//allPostsData를 map으로 돌면서 id key로 주고 title,id(파일이름),date를 준다.

이렇게 CSR로 바꾸면 File System에서 읽은 값들이 Client Network tap에 보인다.