[Next.js] Pre-rendering

With·2021년 10월 10일

next.js

Next.js의 기본 특징

모든 페이지를 Pre-rendering 한다. (SSR으로 작동)
검색 엔진 최적화 (SEO)
page 별로 SG를 할지, SSR를 할지 개발자가 선택할 수 있다.
CSR 으로 동작하게 하고자 한다면 link 또는 router를 사용한다.

Pre-rendering (SG, SSR)

차이점

언제 html 파일을 생성하는가?

SG : 프로젝트가 build 되는 시점에 html 파일을 생성한다.
SSR : 빌드가 되고, 사용자의 Request가 있을 때마다 html 파일을 생성한다.

SG (Static Generation)

유저가 요청하기전에 html 페이지를 만들어놔야 한다면 SG 사용

프로젝트가 빌드되는 (npm run build) 시점에 html 파일들이 생성
생성된 html 파일은 모든 요청에 재사용
- 파일들을 미리 만들어 놓고, 요청이 들어올때마다 응답함
퍼포먼스를 이유로 하여, Next.js에서는 SG 사용을 권고
정적 생성된 페이지들은 CDN에 캐시
getStaticProps, getStaticPaths 를 이용해서 구현
용도
- 요청할때마다 html 파일을 다시 만들필요가 없는 경우
- 블로그 게시물
- 제품 목록
- 도움말, 문서
- 마케팅 페이지

SSR (Server Side Rendering)

유저가 요청할 때마다 html 파일을 다시 생성해야 한다면 SSR사용

매 요청마다 html 파일들을 생성 ⇢ 항상 최신 상태를 유지
CDN에 캐시되지 않음
getServerSideProps를 이용해서 구현
용도
- 항상 최신상태를 유지해야 하는 경우
- 관리자 페이지
- 분석 차트

Next.js의 Pre-rendering

`getServerSideProps`

export const getServerSideProps = async (context) => {
  return {
    props: {}
  }
}

getServerSideProps는 서버에서만 동작하고 브라우저에서 동작하지 않음
- 서버란, Next.js에서 구동되는 Front server를 의미함
getServerSideProps는 요청시에만 실행된다. 그리고 해당 페이지는 return된 props와 함께 Pre-render 된다.
해당 페이지가 next/link 또는 next/router를 통해 요청된다면, next.js는 API 요청을 서버로 보내고 getServerSideProps 를 실행한다. 그리고 hmtl파일을 response 해주는 것이 아니라, json 을 return한다. 그리고 이 json이 page render에 사용된다.

`getStaticProps`

기본 코드 패턴

`getStaticPaths`

동적 라우팅을 사용하는 경우에 SG 구현을 하고자 한다면 사용한다. getStaticProps 와 같이 사용해야 한다.

key
pahts : 가장 처음에 html 파일 생성을 해놓을 것들을 지정할 수 있다.
fallback : paths에 없는 페이지에 대한 대응 여부를 결정한다. true 일때는 paths에 없는 경로라고 해도 html파일을 생성하여 브라우저에 렌더링한다. false 일때는 없는 페이지로 간주하여 404를 띄운다.
특징
- dev환경에서는 생성한 html을 응답하지 않고, 매번 html 파일을 생성한다.
기본적인 코드 패턴

// Component
const Post = ({item}) => {
  return (
    <>
   	
    </>
  )
}
export default Post;


// next.js의 동적 라우팅에서 SG를 구현할 때는 getStaticPaths를 사용해야 한다.
export async function getStaticPaths(){
  return {
    paths : [ // paths에 지정된 것들은 html이 build 될때 생성되기 때문에 빠르다.
      { params : {id: '1'} },
      { params : {id: '2'} },
    ],
    fallback : true
    /* fallback를 true로 변경하면 paths 목록에 있지 않은 것들도 최초 접속 시, 
    정적 생성을 하여 server page 폴더안에 추가됨. 
    그래서 두번째 접속부터는 생성된 html 파일을 응답한다. */
  };
}

export async function getStaticProps(context){
  const id = context.params.id;
  const apiUrl = 'http://...'
  const { data } = await.Axios.get(apiUrl);
 
  return {
    props: {
      item : data
    }
  }
}