[Next] 기본 개념(1)(feat. Route, SSG)

Route

• Next의 route는 file 이름을 이용한다.
• [] 를 이용한 dynamic route 생성 시 next의 route는 specific한 route 를 우선적으로 매칭한다.
• Catch All Routes
• Component Link(replace props)

Link

• path로 직접적인 접근을 한다면 data fetch가 된 상태의 html파일이 먼저 만들어짐.
• Link나 route를 이용하여 특정 path로 이동한다면 json 파일만 미리 가져오고, navigate가 되었을 때 그 fetch된 데이터로 ui를 구성한다.

SSG(Static Site Generation)

getStaticProps

export const getStaticProps = async () => {
  const fetchData = await fetch('https://jsonplaceholder.typicode.com/posts')
  const data = await fetchData.json()

  return {
    props: {
      data,
    },
  }
}

• 오로지 Server Side에서 작동한다.
• Page 폴더 파일 내에서만 실행된다. (Component 폴더 내에서는 실행되지 않는다.)
• Build 시에 실행된다.(Production 모드에서는 그렇지만, Development 모드에서는 수정 사항이 계속 생기기 때문에 매번 실행된다.)
• Server side 코드를 작성해줄 수가 있다. (Querying database)
• Client Side의 js bundle에는 코드가 들어가지 않게 된다.
• props key를 포함한 object로 return 가능하다.

getStaticPaths

export const getStaticPaths = async () => {
  const fetchData = await fetch(`https://jsonplaceholder.typicode.com/posts`)
  const data = await fetchData.json()

  return {
    paths: [
      {
        params: { practiceId: '1' },
      },
      {
        params: { practiceId: '2' },
      },
    ],
    fallback: 'blocking',
  }
}

• dynamic parameter를 지정해줄 때 쓴다.

fallback

• fallback이 false인 경우,

  getStaticPath에서 설정하지 않은 path로 이동할 경우 404페이지를 보여줌
  => getStaticPaths에 설정하는 path가 많지 않을 때 사용하면 seo 최적화와 속도 향상을 경험할 수 있음

• fallback이 true인 경우,

  1. 먼저 사용자에게 fallback 페이지를 보여줌
  2. 서버에서 static하게 페이지를 생성함
  3. 해당 페이지를 사용자에게 보여줌
  4. 다음부터 해당 페이지로 접속하는 사용자에게는 static한 페이지를 보여줌

• fallback이 'blocking'인 경우,

  1. fallback이나 loading 화면 없이 사용자에게 server side rendering한 static 페이지를 보여줌
  2. 이후부터 server side rendering한 static 페이지를 보여줌

Build

• 파일을 빌드한 후에 npm start를 한 후 네트워크 탭을 확인해보면

  직접 route 입력한 경우 => 준비된 html파일을 불러옴.
  Link로 연결된 경우 => 미리 데이터의 json파일이 불러와져서 최적화 됨. 이후 Link를 이용하여 dynamic route로 이동하여도 미리 불러온 json파일의 데이터를 이용해서 화면을 구성함.

SSG의 한계

• page의 갯수에 따라 building time이 비례해서 늘어남.
• cost implication 도 함께 좋지 않아짐.

  *getStaticPaths의 fallback true나 blocking을 이용해서 일부 페이지만 SSG하면 되지 않나 하는 생각이 들 수 있지만, 그건 어디까지나 dynamic page일 경우 가능함.
  => ecommerce site 의 경우

• stale data에 대한 우려가 있음. => 이를 방지하기 위해서는 새로운 변경사항이 있을 때 마다 build를 계속 해야함.

=> 이를 위해 사용할 수 있는 것이 ISR(Incremental static regeneration)

참고
https://www.youtube.com/watch?v=9P8mASSREYM&list=PLC3y8-rFHvwgC9mj0qv972IO5DmD-H0ZH&index=1