Next

1. Next.js? React?

• React.js는 라이브러리를 표방
  • React공식 홈페이지에서도 A JavaScript library for building user interfaces라는 설명을 확인할 수 있습니다.

1-1 프레임워크와 라이브러리의 차이

프레임워크	라이브러리
기반구조	개발 편의 도구들
제어 주도권을 프레임워크가 가짐	제어 주도권을 사용자가 가짐
자유도가 상대적으로 적음	자유도가 상대적으로 큼

=> 정리하면

• 리액트의 경우 개발자가 상태를 어떻게 관리를 하고 싶은지에 대한 주도권을 가질 수 있습니다.
• 반면, 넥스트의 경우 페이지 이동을 어떻게 처리할지에 대한 내용은 넥스트.js에서 이미 방법을 제시하고 그 기반 구조를 만들어 놓았습니다.

1-2 프레임워크의 장점

• 개인이 해야할 고민들을 프레임워크 개발자가 미리 하고 반영합니다.
• 특정 디자인 패터이나 동작, 기능들을 위한 정의와 방식을 정리해둡니다.
• 여러 개발자가 함께 협업할 때 기준점이 됩니다.

1-3 왜 Next.js를 사용할까?

=> 프론트 엔드 개발자들이 가진 고민에 대해 적절한 해결책을 제공

• 규모가 있는 서비스 구조 설계를 어떻게 할 것인가?
• 개발환경/ 코드분할 / 파일 기반구조
• SEO(검색 엔진 최적화)
• 프론트엔드에 필요한 간단한 API구성
• 손쉬운 배포 시스템 Vercel

2. Next.js가 제시하는 3+1 데이터 페칭 방법

2-1 SSR

• 서버가 데이터를 가져와서 그림
• getServerSideProps

import Head from "next/head";

export async function getServerSideProps() {
  return {
    props: { time: new Date().toISOString() },
  };
}

export default function Home({ time }) {
  return (
    <main>
      <h1 className="title">{time}</h1>
    </main>
  );
}

2-2 CSR

• 브라우저에서 데이터를 가지고와서 그린다.
• 담당하는 다른 함수는 없으며, 기존 React와 사용법이 동일하다.

2-3 SSG(Static-Site Generation)

• 정적인 사이트를 생성
• getStaticProps
  • (with getStaticPaths)
  • 개발환경에서는 SSG가 제대로 동작하디 않고 마치 SSR처럼 동작
    • 따라서 SSG를 보기 위해서는 build를 해야합니다.
  • 데이터페칭은 ?
    • build하는 시점에, 데이터를 다 가져와서 우리가 보여줄 static한 페이지를 미리 생성해놓습니다.
  • 그렇다면 SSG가 왜 필요할까?
    • SSR의 경우 페이지에 접근할 때마다, 서버가 동작하게 됩니다. 따라서 데이터 페칭을 많이하고 여러사용자가 접근을 하는 경우 서버에 부하가 많이 걸리게 됩니다.
    • 반면 SSG를 사용하면 정적인 페이지에 한정되기는 하지만, 그 페이지의 경우 이미 만들어진 페이지기 때문에 서버의 부하없이 서비스를 제공할 수 있습니다.
      (ex 블로그)

getStaticProps: 미리 정적인 화면을 그려놓음
getStaticPaths: 미리 그려놓아야할 path를 알기 위해 사용

2-4 ISR(Incremental Static Regeneration)

• (특정 주기로) 데이터를 가져와 다시 그려준다.
• 증분 정적 사이트를 재생성
• getStaticProps with revalidate

export async function getStaticProps() {
  return {
    props: { time: new Date().toISOString() },
    revalidate: 1, //1초마다 데이터 재페칭
  };
}

• 제품을 판매하고, 업데이트 해야하는 경우 SSG의 장점과 SSR의 장점을 적절하게 이용할 수 있습니다.