Next.js는 무엇인가

Next.js란?

Page 기반 라우팅

Pre-rendering

• SSG (default) : 빌드 시 HTML 파일을 구성

• SSR : 해당 page에서 getServerSideProps()를 사용할 시, 요청을 받을 때마다 서버에서 HTML을 새로 구성해 반환

SSR (Server Side Rendering)

hydrate

getServerSideProps()

function Page({ data }) {
  // 데이터를 통해 페이지 렌더링...
}

export async function getServerSideProps() {
  // 페이지를 요청할 때마다 매번 실행된다.
	// 데이터를 받아온다.
  const res = await fetch(`https://.../data`)
  const data = await res.json()

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

export default Page

CSR(Client Side Rendering)

1. URL을 입력하여 미리 렌더링된 페이지를 받고 useEffect()를 통해 데이터를 추가로 불러오는 경우

2. <Link/>나 router.push()를 사용하여 페이지 전환이 일어나는 경우

getStaticProps와 getServerSideProps

1. getStaticProps(): 빌드 타임에 getStaticProps()가 실행되면 HTML과 함께 JSON 파일도 생성된다. 이 JSON 파일은 next/link나 next/router를 통해 CSR 화면 전환 시 사용된다 getStaticProps를 사용하는 페이지로 이동할 때, 해당 JSON 파일을 받아와 페이지 컴포넌트의 props로 사용한다.

2. getServerSideProps(): next/link나 next/router를 통해 페이지 전환 시 Next.js가 getServerSideProps를 실행하여 서버에 API 요청을 보낸다.

SSG(Static Site Generation)

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

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
  }
}

export default Blog

revalidate

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    revalidate: 10, // 초
  }
}

getStaticPaths()

// pages/posts/[id].js

function Post({ post }) {
  // post 렌더링 하는 코드
}

export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  return { props: { post } }
}

export default Post

fallback 옵션

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: true, // true || false || "blocking"
  };
}

• false: 404 페이지를 반환한다.

• true: 먼저 페이지의 fallback 버전을 보여주고 getStaticProps를 통해 요청을 보내서 HTML 파일과 JSON 파일을 만든다. 만들어지면 브라우저는 JSON 파일을 받아서 렌더링한다. 이후 Next.js는 만들어진 HTML 파일을 미리 렌더링된 페이지 목록에 추가한다. 이후 요청부터는 미리 렌더링된 HTML 파일을 반환한다.

• blocking: true와 비슷하게 작동하지만, 파일을 렌더링하는 동안 fallback 버전을 보여주는 것이 아니라 SSR처럼 작동하여 HTML 파일을 생성하고 반환한다. 이후 요청부터는 생성된 HTML 파일을 반환한다.

Fallback Page

// pages/posts/[id].js
import { useRouter } from 'next/router'

function Post({ post }) {
  const router = useRouter()

  if (router.isFallback) {
    return <div>Loading...</div>
  }

  // post 렌더링 하는 코드 생략...
}

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    fallback: true,
  }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  return {
    props: { post },
    revalidate: 1,
  }
}

export default Post

요약