본문 바로가기
카테고리 없음

Basic Features > Pages 2 [공식 문서로 공부하는 Next.js]

by 룰루리랄라리 2022. 1. 6.

기본적인 특징 1 (next.js 9.3 version) : Pages - 2

 

Static Generation (추천)

페이지를 정적으로 생성하는 경우 HTML은 빌드 시 생성됩니다.
즉, 다음 빌드를 실행할 때 페이지 HTML이 생성된다는 말입니다.
이 경우 HTML은 각 요청에서 재사용되고, CDN에서 캐시 할 수 있습니다.

 

Static Generation (데이터가 없는 경우)

기본적으로 Next.js는 데이터를 가져오지 않고, 정적 생성을 사용하여 페이지를 미리 렌더링 합니다.

이 경우 데이터가 없으므로 Next.js는 빌드 시 페이지당 하나의 HTML 파일을 생성합니다.

function About() {
  return <div>About</div>
}

export default About

Static Generation (데이터가 있는 경우)

  1. 페이지 콘텐츠가 외부 데이터에 따라 달라지는 경우 : getStaticProps
  2. 페이지 경로가 외부 데이터에 따라 달라지는 경우 : getStaticPaths, getStaticProps

 

페이지 콘텐츠가 외부 데이터에 따라 달라지는 경우


블로그 페이지가 렌더링 되기 전에 데이터를 가져와서 페이지에 출력을 시켜줘야 합니다.
pre-render에서 이 게시물의 리스트를 가져오기 위해 getStaticProps라는 비동기 함수를 사용합니다.
getStaticProps는 빌드 시 호출되며 pre-render시 가져온 데이터를 페이지에 props로 전달할 수 있습니다.

function Blog({ posts }) {
  // Render posts...
}

// This function gets called at build time
export async function getStaticProps() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog

 

페이지 경로가 외부 데이터에 따라 달라지는 경우

 

Next.js는 동적 경로가 있는 페이지를 만들 수 있습니다.
예를 들어 id를 기반으로 블로그 게시물을 표시하기 위해 pages/posts/[id].js 라는 파일을 생성할 수 있습니다.
하지만 빌드시 pre-render를 하려는 경우 외부 데이터에 따라 달라질 수 있습니다.

 

예시) DB에 id가 1인 게시물을 추가했을 경우, 빌드를 할 때 id가 1인 게시물을 pre-render 하고 싶을 것입니다.
따라서 미리 렌더링 되는 페이지 경로는 외부 데이터에 따라 달라집니다.
이를 처리하기 위해 동적 페이지에서는 getStaticPaths라는 비동기 함수를 export 할 수 있습니다.
getStaticPaths는 빌드 시 호출되며 pre-render 할 경로를 지정할 수 있습니다.

//이 함수는 빌드 시 호출됩니다.
export async function getStaticPaths() {
  // 게시물을 가져오려면 외부 API를 호출하세요.
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // 게시물을 기반으로 사전 렌더링할 경로를 가져옵니다.
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

   // 빌드 시 이러한 경로만 미리 렌더링합니다.
   // {fallback: false}는 다른 경로가 404여야 함을 의미합니다.
  return { paths, fallback: false }
}

 

또한 pages/posts/[id].js에서 getStaticProps를 export 해야 id를 가진 게시물에 대한 데이터를 가져와 페이지를 미리 렌더링 할 수 있습니다.

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

export async function getStaticPaths() {
  // ...
}

// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Pass post data to the page via props
  return { props: { post } }
}

export default Post

 

언제 정적 생성을 사용해야 하나요??

모든 요청에 ​​대해 서버가 페이지를 렌더링 하도록 하는 것보다 훨씬 빠르기 때문에 가능하면 정적 생성(데이터에 관계없이)을 사용하는 것이 좋습니다.

pre-render가 가능한 페이지들은 정적 생성으로 만드는 게 좋습니다.


하지만 정적 생성은 자주 업데이트되는 데이터를 보여주거나, 모든 요청에 따라 콘텐츠가 변경되는 페이지에 좋은 방법이 아닙니다.

 

  • Client-side 렌더링과 함께 정적 생성 사용 : 페이지의 일부 사전 렌더링을 건너뛴 다음에 client-side JavaScript를 사용할 수 있습니다.
  • Server-side 렌더링 사용 : Next.js는 각 요청에 대해 페이지를 미리 렌더링 합니다. 페이지를 캐시 할 수 없기 때문에 속도가 느려지지만 pre-render 된 페이지는 항상 최신 상태입니다.

 

Server-side Rendering(SSR, Dynamic Rendering)

Server-side Rendering은 각 요청 시 HTML이 생성됩니다.
페이지에서 Server-side Rendering을 사용하기 위해서는 getServerSideProps라는 비동기 함수를 export 해야 합니다.
getServerSideProps는 모든 요청에 대해 서버에서 호출됩니다.

 

예를 들어 페이지에서 자주 업데이트되는 데이터(외부 API를 이용해서 가져온 데이터)를 미리 렌더링해야 한다고 가정할 때,
이 데이터를 Page에 전달하기 위해 getServerSideProps를 사용할 수 있습니다.

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

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Page

getServerSideProps는 getStaticProps와 유사하지만 차이점은 getServerSideProps가 빌드 시간이 아니라 모든 요청에 ​​대해 실행된다는 점입니다.

 

 

요점

  • 정적 생성: 사용자의 요청에 앞서 미리 렌더링 할 수 있는 페이지에 적합합니다. HTML은 빌드 시 생성되며 각 요청에서 재사용됩니다. 페이지에서 정적 생성을 사용하도록 하려면 페이지 구성 요소를 export 하거나 getStaticProps(및 필요한 경우 getStaticPaths)를 export 합니다. 클라이언트 측 렌더링과 함께 사용하여 추가 데이터를 가져올 수도 있습니다.
  • 서버 측 렌더링: HTML은 각 요청에 대해 생성됩니다. 페이지에서 서버 측 렌더링을 사용하도록 하려면 getServerSideProps를 내보냅니다. 서버 측 렌더링은 정적 생성보다 성능이 느려지므로 반드시 필요한 경우에만 사용해야 합니다.

댓글

티스토리툴바