'리액트에서 next.js로 이전하던중 생긴 이슈들' 블로그 참고
정적과 동적의 차이점으로는 언제 html 파일을 생성하는가

정적라우팅

• 프로젝트가 빌드하는 시점에 html파일들이 생성
• 모든 요청에 재사용
• 퍼포먼ㄴ스 이유로, next.js는 정적생성을 권고
• 정적 생성된 페이지들은 CDN에 캐시
• getStaticProps || getStaticPaths 사용

Link

• link는 래퍼 컴포넌트이다. href와 다른 라우팅 관련 props만 받아들인다.
• 스타일을 적용해야 한다면 하위에 있는 컴포넌트에 지정해야함(ex a tag)
• 컴포넌트나 div등을 link안에 배치할 수 있다
• as: 브라우저에서 보여짐
• 페이지가 새로고침됨

import Link from 'next/link'
<Link as={`/p/${props.id}`} href='/이동할 페이지'>
  <a> About page</a>
//또는
<button> About page</button>
</Link>

동적라우팅

• 매 요청마다 html을 생성
• 항상 최신 상태 유지
• getServerSideProps
• 매번 바뀌는 화면에 적용

레퍼런스

• pages 폴더에 post/[id] 폴더에 /[id].tsx를 위치하는식으로 동적라우팅 구현
  ex)
  파일경로 : /pages/post/create.tsx , URL : 도메인/post/create
  파일경로 : /pages/post/[pid].tsx , URL : 도메인/post/1,도메인/post/abc
  파일경로 : /pages/post/[categori]/[id].tsx , URL : 도메인/post/맛집/1
  파일경로 : /pages/post/[...slug].tsx , URL : 도메인/post/1/2,도메인/post/a/b/c

Pre-rendering

Static Generation 정적 생성,
미리 만들어 둬도 되는 경우

• 마케팅 페이지
• 블로그 게시물
• 제품 목록
• 도움말, 문서

Server-side Rendering 서버 사이드 렌더링,
항상 최신상태 유지

• 관리자 페이지
• 분석 차트

useRouter

• React Hook이여서 클래스와 함께 사용할 수 없다

import {useRouter} from 'next/router'

const () => {
const router = useRouter()
	return(
 	 <button onClick={() => router.push('/about')}></button>
	)
}

router 정의

• pathname: String, 현재경로를 담고있다, /pages
• query: Object, 개체로 구문 분석된 쿼리 문자열이다. 페이지에 데이터 가져오기 요구사항이 없으면 사전 렌더링중에 빈 개체가 된다
• asPath: String, 구성되지 않은 브라우저에 표시되는 경로(쿼리포함)
• isFallback: Boolean, 현재 페이지가 대체 모드인지 여부

router.push/router.replace

default: router.push(url, as, options)

• url: 이동하고자 하는 url
• as : url표시줄에 표시될 경로, 동적 경로를 미리 가져옴, 유저가 볼 수있는 주소(선택)
• options: 다음 구성 옵션이 있는 선택적 개체

1. 'scroll': 페이지 맨 위로 스크롤을 제어, default: true
2. shallow , getStaticProps: 다시 실행하지 않고 현재 페이지의 경로를 업데이트getServerSideProps 하거나 getInitialProps, default: false

• lacale: 새 페이지의 로케일을 나타낸다
• 페이지를 넘겨주면서 props를 내려주고 싶을때도 사용

#### router.prefetch
```router.prefetch(url, as)```
- 더 빠른 클라이언트 측 전환을 위해 페이지를 미리 가져온다.
- link가 없을때만 가능

#### router.beforePopState(url, as, options)
- 라우터를 작동하기전에 이벤트를 넣을때 사용
- cb: 들어오는 이벤트에 실행하는 기능

#### shallow routing
- 새로고침 하지 않고 url을 불러올 수 있는 next/js의 기능, 페이지 리렌더링 
- next.js에서 라우팅이 일어나면 getServerSideProps, getStaticProps, getInitialProps를 실행시키지만 이를 실행시키지 않고 현재 url을 업데이트 하는 것이 shallow routing 이다
- 위에 router.push 참고
- shallow: true 값을 주면 활성화가 된다
```js
import { useEffect } from 'react'
import { useRouter } from 'next/router'

function Page() {
  const router = useRouter()

  useEffect(() => {
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
  }, [router.query.counter])
}

export default Page

data fetching

레퍼런스
상황에 따라 맞는 api 사용하기

정적생성 : 사전 렌더링/정적페이지에 사용
getStaticProps() : 빌드할 때 데이터를 가져옴
getStaticPaths() : 데이터를 기반으로 사전 렌더링(pre-render) 할 동적 경로를 지정
getStaticProps()와 getStaticPaths() 는 항상 짝으로 사용하자
SSR
getServerSideProps() :

getStaticProps()

• 서버-사이드-렌더링(SSR: server-side-render)에서만 사용되는 api, 즉, js번들에 포함하지 않음
• pages 폴더에서만 사용
• 페이지를 사전 렌더링(SEO 적용) & 캐시 될 수 있음
• 페이지의 데이터가 빌드시 구성됨, (사용자의 요청X)
  예: 블로그 페이지가 컨텐츠 관리 시스템(CMS)에서 블로그 게시물 목록을 가져와야 할 때

getStaticPaths()

• pages폴더에 동적라우팅이 구현되어 있을때 getStaticPaths()를 사용한다면 렌더링 할 경로목록을 정의
• getStaticPaths에 지정된 경로를 정적으로 사전 렌더링함
• page폴더에서만 사용
• getStaticProps와 함께사용하며, getServerSisdeProps와 함께 사용할 수 없음

paths 키

• paths: 필수 키, 미리 렌더링 되는 키를 결정
• 지정한 경로 이외 루트경로로 이동시키기: catch-all-routes 검색

fallback 키

• 기본 false
• false 설정시, 경로 지정 페이지만 사전 렌더링, 없는 경로접근시 404페이지 렌더링
• true 설정시,
  1. fallback 페이지 렌더링하여 로딩페이지 렌더링
  2. getStaticProps를 실행하여 필요데이터를 가져옴
  3. 가져온 데이터를 미리 렌더링된 정적페이지를 보여줌, 서버에서만 실행된다

import { GetStaticPaths } from 'next'
export async function getStaticPaths() {
  return {
    paths: [
      // { params: { ... } }, // See the "paths" section below
      { params: { id: '1' } }, // pages/post/[id].tsx
      { params: { categori: '맛집',id :'1' } }, // pages/post/[categori]/[id].tsx
      { params: { slug: ['a','b','c'] } }, // pages/post/[...slug].tsx => /post/a/b/c
      { params: { slug: false }} // pages/[[...slug]] 폴더일때, 사이트 루트 페이지로 설정,  
    ],
    fallback: true or false // See the "fallback" section below
  };
}

getServerSideProps()

• pages폴더에만 사용
• 서버사이드(서버환경)에서만 실행, getInitialProps()는 양쪽 다 실행되지만, getServerSidProps()는 무조건 서버에서만 가능하다
• 페이지 렌더링전 꼭 필요한 data-fetch, 매 페이지 요청시마다 호출
• context객체는 params, req, res, query, preview, previewData 키를 포함
• 윈도우에 사용하게 되면 에러남
• 자동으로 렌더링시 불러온다(보통 통신에 자주 쓰임)

getServerSideProps vs getStaticProps

getServerSideProps

• page가 요청 받을 때 마다 호출됨
• SSR 개념
• pre-render가 꼭 필요한 동적 데이터가 있는 페이지에서 사용

getStaticProps

• 빌드시 딱 한번 호출되므로 이후 수정이 불가능
• SSG(Static Site Generation) 개념
• 빌드 후 바뀌지 않는 내용(고정된 내용)이 있는 page가 있는 경우에만 사용