Next.js / Data Fetching

Next.js?

: 웹 개발자에게 필요한 다양한 기능을 제공해주는 리액트 프레임워크

Next.js의 장점

1. SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다.
2. 파일 기반 라우팅(File-based routing)을 통해 Routing을 쉽게 구현할 수 있다.
3. 복잡한 Server 구축 없이도 API를 배포할 수 있다.
4. 초기 로딩 속도 개선을 위한 자동 Code Splitting(코드 분할) 등 최적화를 자동으로 지원한다.
5. 개발 환경 설정이 쉽고 간단하다.
   a. Linting, Compling, Bundling, Deploying을 위한 설정이 자동화 되어있다.
   b. Router, tailwind, typescript, lint 등 주요 기능들을 configuration 없이 사용 가능하다.

Data Fetching

SSR(Server-Side Rendering)

: getServerSideProps

• getServerSideProps 함수는 Server에서만 실행됩니다. Browser에서는 실행되지 않습니다.
• getServerSideProps 함수는 runtime에서만 실행됩니다.
• getServerSideProps에서는 context 객체를 통해, Post Page에서는 next router를 통해 URL Query 파라미터에 접근 가능합니다.
• getServerSideProps의 반환 값은 Post page의 props로 전달됩니다.

import { useRouter } from "next/router";

const Post = ({ post }) => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      Post: {id}
      <h2>{post.title}</h2>
      <p>{post.body}</p>
    </div>
  );
};

export default Post;

export async function getServerSideProps(context) {
  const { params } = context;
  const { id } = params;

  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`
  );
  const post = await response.json();

  return {
    props: {
      post,
    }, // will be passed to the page component as props
  };
}

SSG(Static-Site Generation)

: getStaticProps, getStaticPaths

getStaticProps

SSG를 원하는 페이지에 getStaticProps를 추가하면, 해당 페이지는 빌드할 때 렌더링 됩니다.

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
} 

• getStaticProps 함수는 Server에서만 실행됩니다. Browser에서는 실행되지 않습니다.
• getStaticProps 함수는 build 하는 그 순간만 실행됩니다.
• getStaticProps에서는 getServerSideProps에서 context를 통해 쉽게 query에 접근한 것과는 다르게 dynamic routing을 지원하려면 특별한 방법이 필요합니다.
• getStaticProps의 return 값은 Post page의 props로 전달됩니다.

getStaticPaths

: getStaticProps을 이용하는 페이지에서 dynamic routes를 제공하기 위해서 사용됩니다. 요컨데, 미리 어떤 paths를 Static Site Generation 할 지 정해두는 역할을 합니다

// Generates `/posts/1` and `/posts/2`
export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    fallback: false, // can also be true or 'blocking'
  }
}

// `getStaticPaths` requires using `getStaticProps`
export async function getStaticProps(context) {
  return {
    // Passed to the page component as props
    props: { post: {} },
  }
}

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

• getStaticPaths에서는 getStaticProps 가 있어야 실행되고, getStaticPaths의 return 값은 getStaticProps의 props로 전달됩니다.

fallback 설정

: 동적 경로를 이용한 Static 페이지를 만들 때 동작 방식을 결정하는 옵션

• false
  • getStaticPaths에서 제공하지 않은 페이지는 모두 404로 연결합니다.
• true
  • getStaticPaths에서 제공하지 않은 페이지를 요청한 경우, fallback 페이지를 보여주고, 해당 페이지를 서버에서 생성합니다. 그리고 해당 페이지를 보여줍니다.
• blocking
  • getStaticPaths에서 제공하지 않은 페이지를 요청한 경우, 페이지를 서버에서 생성을 한 이후 보여줍니다.

ISR(Incremental Static Regeneration)

: getStaticProps에 revalidate 속성만 추가해주면 됩니다

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

  return {
    props: {
      posts,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 10 seconds
    revalidate: 10, // In seconds
  }
}