[Next.js] (5) - 사전렌더링 (SSR, SSG)

👉  Next.js 다양한 사전 렌더링

1. 서버사이드 렌더링 (SSR)
   • 가장 기본적인 사전 렌더링 방식
   • 요청이 들어올 때 마다 사전 렌더링을 진행함
2. 정적 사이트 생성(SSG)
   
   • 빌드 타임에 미리 페이지를 사전 렌더링 해 둠
3. 증분 정적 재생성 (ISR)
   • 향후에 다룰 사전 렌더링 방식

 

 

👉  SSR - 서버 사이드 렌더링 (요청이 들어올 때 마다 사전 렌더링을 진행)

export const getServerSideProps = () => {
  // 컴포넌트보다 먼저 실행, 컴포넌트에 필요한 데이터 불러오는 함수
  // 오직 서버측에서만 한 번 실행
  const data = 'hello'

  return {
    //단 하나의 객체를 리턴, props 프로퍼티값을 넣어야함
    props: {
      data,
    },
  }
}

props: InferGetServerSidePropsType<typeof getServerSideProps> 
//getServeSideProps 반환값 타입을 자동으로 추론해준다.

 

👉  브라우저에서만 실행을 원하는 경우

• useEffect() 를 이용해서 페이지가 mount 된 이후에 불러 올 수 있도록 함

 

👉  SSG - 정적 사이트 생성 (Build Time 에 미리 만들어 놓음!)

• 사전 렌더링에 많은 시간이 소요되는 페이지더라도 사용자의 요청에는 매우 빠른속도로 응답 가능
• 최신 데이터 반영은 어렵다. - 정적인 페이지에 적합한 기능

 

 

출처: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs/dashboard

한 입 크기로 잘라먹는 Next.js(15+) 강의 | 이정환 Winterlood - 인프런