[Next.js] Next.js가 무엇이고 왜 사용할까요?

 

Next.js는 무엇인가요?

Next.js는 SPA에서 SSR을 가능하게 해주는  React 프레임워크입니다. 기본적으로 CSR을 하는 React 어플리케이션은 SEO에 취약합니다. Next.js를 도입하면 프리 렌더링을 통해 SSR 또는 SSG를 가능하게 해주기 때문에 성능과 SEO에 좋습니다.

이 외에도 페이지 기반 라우팅, 번들을 줄여주는 코드 스플리팅 기능*, 이미지 최적화 기능을 제공하여 어플리케이션의 퍼포먼스를 끌어올리고 SPA의 단점을 보완할 수 있습니다.

⚠️ 주의점

• SPA 방식이 모두 CSR인 것은 아니다. -> Next.js을 사용하면 SPA를 SSR로 구현할 수 있다. 🤸‍♀️

Next.js는 용량이 커지면 로딩속도가 느려지는 것을 대비하여 파일을 분리하는 코드 스플리팅을 자동적으로 해준다. 

Next.js 기능

• SSR 제공을 통한 SEO(Search Engine Optimization) 향상
• Babel, Webpack 설정 커스터마이징 가능
• HMR(Hot Module Replacement)을 지원하는 웹팩 기반 환경
• Express나 Node.js와 같은 http 서버와 함께 구현 가능
• 코드스플리팅 (Code-splitting)을 통한 더욱 빠른 페이지 로드
• 간단한 클라이언트 사이드 라우팅 제공
• API route 제공
• Built-in CSS Support

NEXT는 브라우저에 렌더링 할 때 기본적으로 pre-redering(사전 렌더링)을 한다고 소개합니다.(이는 NEXT의 default로 설정되어 있다).

pre-rendering이란?  각 페이지들을 사전에 미리 HTML 문서로 생성하여 가지고 있는 것이다.

즉 Pure React에서 CSR 방식은 번들링 된 js가 클라이언트 단에서 모든 추가 렌더링을 담당했다면 Next의 pre-rendering 시스템에서는 빌드 타임 때 해당하는 페이지 별로 각각의 HTML 문서를 미리 생성해 가지고 있다가 서버로 요청이 들어올 때 알맞은 페이지를 반환해준다.

 

▼ Next에서 pre-rendering을 하기 위해 두 가지 형식을 제안 ▼

1. Static-Generation (추천) : HTML을 빌드 타임에 각 페이지별로 생성하고 해당 페이지로 요청이 올 경우 이미 생성된 HTML 문서를 반환한다.
2. Server-Side-Rendering : 요청이 올 때 마다 해당하는 HTML 문서를 그때 그때 생성하여 반환한다.

Next라는 프레임워크를 사용하면 CSR + (SSR 또는 SSG) 전략으로 운용할 수 있다고 볼 수 있다.
이에 대해 Next 공식문서에서는 만약 데이터의 변동이 매우 빈번하게 일어난다면, 굳이 (데이터에 대한) pre-rendering을 취하지 말고 기존 pure react에서 처럼 data-fetching을 통해 클라이언트 사이드에서 렌더링 할 것을 권고하고 있다.

 

CSR/SSG/SSR 적용 사이트 예시

1. 굳이 SEO 적용 또는 데이터 pre-rendering이 필요 없다면 CSR 방식 -> 유저와의 인터렉트는 많지만 실시간 업데이트는 필요없고 검색엔진에 노출되지 않아도 되는 경우(유저의 개인정보라든가)
2. 정적 문서로 충분한 화면이면서 빠른 HTML 문서 반환이 필요하다면 SSG 방식 -> 유저와의 인터렉트가 없는 경우
3. 매 요청마다 달라지는 화면이면서 서버 사이드로 이를 렌더링 하고자 한다면 SSR 방식 -> 실시간 업데이트가 필요한 경우

Next.js 참고 사이트: 사이트 주소

[FE] SSR(Server-Side-Rendering) 그리고 SSG(Static-Site-Generation) (feat. NEXT를 중심으로)