Next.js의 Pre-rendering

• Next.js는 모든 페이지를 Pre-rendering한다
  • 즉, Next.js는 클라이언트측의 자바스크립트가 로드되기 전에 미리 HTML을 생성한다
• Pre-rendering은 더 나은 성능과 SEO에 최적화 되어 있다.

 

Next.js 공식페이지

 

Static Generation , Server-side Rendering

Next.js에는 Static Generation, Server-side Rendering 두가지 형태의 Pre-rendering 방식을 제공한다

두가지 Rendering 방식의 차이점은 페이지에 대한 HTML을 언제 생성 하느냐에 따른 차이이다.

 

Static Generation - HTML은 빌드 시 생성되며 사용자 요청에 따라 재사용된다.

Server-side Rendering - HTML은 사용자 요청마다 생성된다

 

Next.js를 사용하면 각 페이지에서 사용 할 Pre-rendering 방식을 선택할 수 있다.

• 사용자의 요청에 의한 데이터의 이용 없이 페이지를 구성하는 정적 페이지를 생성하는 경우에는 Static Generation을 사용하는 것을 권장한다. 예) 회사 소개 페이지, 마케팅 페이지
• 페이지에서 자주 업데이트 되는 데이터를 보여줘야하고, 사용자 요청마다 페이지의 내용이 변경되어야 하는 경우라면 Server-side Rendering를 이용하면 된다

성능상의 이유로 가능하다면 Static Generation을 사용하는 것이 좋다.

정적으로 생성된 페이지는 CDN에서 캐시할 수 있다.

 

Next.js 공식페이지

 

Static Generation without data

일부 페이지는 Pre-rendering을 위해 외부 데이터를 가져와야 한다

데이터를 받아오는 방식에는 두가지 방식이 있으며 하나가 될 수도 있고 경우에 따라 둘 다 적용 될 수 있다.

 

Next.js 공식페이지

 

페이지 콘텐츠가 외부 데이터를 따른다면 getStaticProps

페이지 경로가 외부 데이터를 따른다면 getStaticPaths

 

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// 이 함수는 빌드 타임 때 호출된다
export async function getStaticProps() {
// 데이터를 받기 위해 외부 API 호출
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // { props: { posts } }를 리턴하고 Blog 컴포넌트가 posts를 props로 받도록 한다
  return {
    props: {
      posts,
    },
  }
}

 

getStaticPaths

Next.js를 사용하면 동적 경로 가 있는 페이지를 만들 수 있다

-  pages/posts/[id].js

 

 [id].js 파일 빌드 시 pre-rendering 하려는 부분은 외부 데이터에 따라 다를 수 있다.

getStaticPath를 사용하여 원하는 경로의 페이지를 빌드 타임 때 pre-rendering 하도록 설정할 수 있다

동적라우팅 + getStaticProps를 원할 때 사용한다

 

function Post({ post }) {
  // Render post...
}

// 이 함수는 빌드 시 호출된다 
export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

// pre-render할 Path를 얻는다
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // paths 배열에 해당하는 경로의 페이지만 빌드 타임에 pre-rendering
  // { fallback: false } 다른 routes들은 404
  return { paths, fallback: false }
}

// 이 함수도 빌드 시 호출된다 
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // params는 post.id를 포함하고 있다
	// 경로가 /posts/1이면 params.id는 1이다
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

// 외부에서 받은 데이터를 props로 전달 
  return { props: { post } }
}

 

Server-side Rendering

 

getServerSideProps는 매 페이지 요청마다 데이터를 서버로부터 가져온다

 

function Page({ data }) {
  // Render data...
}

// 모든 요청마다 호출된다
export async function getServerSideProps() {
  // API 호출 
  const res = await fetch(`https://.../data`)
  const data = await res.json()

// 받은 데이터는 props를 통해 전달된다
  return { props: { data } }
}

export default Page

 

보시다시피 getServerSideProps은  getStaticProps 와 유사 하지만  getServerSideProps 는 모든 요청에 대해 실행된다는 것이다.

 

 

reference

https://nextjs.org/docs/basic-features/pages#pre-rendering