[Next.js] Next.js의 역할

내가 공부하려고 정리하는 글

1. React에서 고려해야 하는 부분들을 해준다

• 웹팩과 같은 번들러로 코드를 번들
• 바벨과 같은 컴파일러를 사용해 변환(브라우저에 적용되지 않을 수 있는 코드들을 문법에 맞도록 변환)
• 코드스플리팅으로 production 최적화
• 성능 또는 SEO를 위한 pre-render (SSR, CSR 사용)

*웹팩 : 애플리케이션에 필요한 모든 파일(모듈)을 병합하고 압축해서 하나의 결과물(번들)을 생성해주는 도구로써, 애플리케이션의 성능 및 로드 시간을 줄여주는 역할을 한다.

*바벨 : es6 버전 이하의 자바스크립트나 jsx, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환시켜 IE나 다른 브라우저에서 동작할 수 있도록 하는 역할을 한다. (= 컴파일러)

*코드스플리팅 : 지금 당장 필요한 코드가 아니라면, 따로 분리시켜서 나중에 필요할 때 불러와서 사용할 수 있다. 이를 통해 페이지의 로딩 속도 개선
(ex. js로 개발하면 기본적으로 하나의 파일에 모든 로직이 들어간다. 이 때, spa나 프로젝트의 규모가 커질수록 js 파일의 용량도 커질 것이다. 용량이 커지면, 그만큼 인터넷이 느린 환경에서는 페이지 로딩 속도가 느려진다.)

2. Next.js가 제공하는 기능

• 직관적인 페이지 기반 라우팅 기능
• Pre-render, SSR, SSG을 페이지 기반으로 지원
• SSG(Static Site Generation) : 빌드 타임(npm run build)에 html을 각 페이지별로 생성해놓고, 요청이 왔을 때 생성된 html을 반환한다. => 정적 사이트 생성
• SSR(Server Side Rendering) : 서버에 요청이 올 때마다 해당하는 html 문서를 그때그때 생성해서 반환한다.

3. SSG과 SSR

• SSG
  • 정적 사이트 생성
    • 빌드 시에 정적인 html 파일들이 서버에 생성된다.
    • 유저가 페이지를 요청했을 때, 이미 생성해놓은 html 파일을 반환하면 되므로, 이 html 파일들을 재사용 가능하다.
    • 이미 생성된 html 파일이 있기 때문에, 다른 유저가 url로 요청했을 때, 어떠한 작업도 하지 않고 html만 반환하면 되므로 응답속도가 매우 빠르다. (초기 렌더링 속도)
  • 사용하기 적절한 경우
    • 외부 요청에 의해 변하지 않는 페이지 (랜딩 페이지). 즉, 많이 변하지 않는 데이터를 갖는 페이지를 미리 만들어 놓을 때 사용된다.
      • 한 번만 만들어 놓으면 html을 반환하기만 하면 됨.
    • 블로그, e-커머스 상품리스트 등 (공식문서)
  • pre-render 시나리오 (데이터가 존재할 시)
    • 1. 페이지가 외부 데이터에 의존적인 경우
      • api 요청을 통해 페이지 내부를 채우는 경우 getStaticProps 사용
    • 2. 페이지의 path가 외부데이터에 의존적인 경우
      • 상세페이지의 경우 상품 클릭 시 id 값에 해당하는 요청을 보내 이에 대한 응답으로 페이지 내용을 채우는 경우
      • getStaticProps + getStaticPaths 함께 사용
• SSR
  • 사용하기 적절한 경우
    • 외부 요청에 의해 내부 내용이 변하는 페이지(게시글 목록)

4. Pre-render

• pre-render를 할 것인지 하지 않을 것인지에 따라 서버 사이드 렌더링이냐 클라이언트 사이드 렌더링이냐가 결정된다.
• pre-render를 하면 빌드 타임에 데이터 요청을 보내 그 때 얻은 결과로 정적 페이지 생성을 한다.
• pre-render를 하지 않으면 뼈대만 미리 SSG로 만들어 놓고, 나머지 데이터들은 브라우저에서 js가 로드될 때 수행되어 채워진다.
• ssg를 하더라도 요청에 따른 정적페이지를 또 생성할 수 있는 방법이 존재한다.

※ 공식 문서에는 데이터의 변동이 자주 일어나는 경우 pre-render 하지 않고 클라이언트 사이드에서 렌더링하는 것을 권장한다.

참고 사이트

https://watermelonlike.tistory.com/180#recentComments
너무 잘 정리 되있어서 작성하며 다시 한 번 헷갈리는 부분들을 이해할 수 있었다 !!