새 프로젝트를 기획면서 그동안 배워보고 싶었던 기술 스택들을 적용해보려 한다. 그 첫번째 주자는 Next.js이다.
React Framework for Production
Next.js는 특정 규칙을 따라 코드를 적합한 곳에 넣어야 하는 framework로 React library의 개발을 별도의 설정이나 모듈 다운없이 도와준다는 장점이 있다. 공식 문서에서 이야기하는 기능은 아래와 같다.
- Pre-rendering & Hydration
: SSR 지원 - File-system Routing
: pages 폴더 내에서 라우팅 지원 - Image-optimization
:next/image로 Image component 지원 - Built-in CSS
: 스타일시트 전역 적용 시pages/_app.js에 import - Code splitting & bundling
: 프로젝트 빌드 시pages/하위 컴포넌트 파일들은 자동으로 code splitting 되어 각각이 하나의 JS bundle이 됨. dynamic import 사용. - Zero config (Webpack & Babel)
: 개발과 빌드를 위한 설정을 따로 하지 않아도 됨. TS를 위한 패키지 재설치 불필요 - Fast refresh
: 개발 중 컴포넌트 수정 시에도 페이지 전체가 아니라 컴포넌트만 리렌더링
이 중 가장 주요한 기능인 Pre-rendering & Hydration에 대해 자세히 알아보고, 새 프로젝트에서 Next.js를 선정한 이유를 설명하려 한다.
1. Hybrid SSG and SSR pre-rendering(+CSR)
새로운 기술을 공부할 때 가장 중요한 것은 "이전 기술의 어떠한 단점을 보완했는가?" 이다. Next.js는 2 가지의 렌더링(SSG,SSR) 지원하는 하이브리드 방식을 채택하여 기존 React의 CSR 방식의 문제점을 해결하는 강력한 장점을 가진다.
SPA를 위한 React의 CSR의 단점(SEO)을 보완 ➡️ Next.js는 SSG+SSR hybrid 지원
1-1. Web application 비교: MPA vs SPA
이 개념을 이해하기 위해서는 웹의 발전 과정을 이해해야 한다. 초기 웹은 단순히 정보를 제공하는 정적(static)으로 제공되고 있었으므로 서버에 이미 배포되어 있는 HTML 파일을 받아오는 방식(SSG)을 사용하고 있었으며, 새 페이지 요청 시 서버에서 전체 페이지를 다운받아야하는 MPA 구조를 가졌다. 그러나 기술의 발전으로 JS 기반 동적(dynamic) 웹이 등장하면서, MPA는 작은 컴포넌트만 변경되어도 페이지 전체가 re-redering되어 "깜빡임"이라는 좋지 않은 사용자 경험을 야기하였다.
이를 보완하기 위해 모던 웹에서는 동적으로 HTML을 생성하는 SPA 개념이 등장하였으며, 우리가 사용하는 React, Vue, Angular는 모두 SPA 개념을 사용하고 있다. SPA는 최초에 모든 정적 리소스를 한 번에 받은 후 페이지 갱신 시 필요한 컴포넌트만을 재생성하는 방식(CSR)을 사용하여 "깜빡임이 없는" UX 구현했다. 그러나 CSR은 초기 빈 HTML을 가져오고, 뷰를 동적으로 생성할 때 주소창 url이 변경되지 않아 치명적인 SEO 이슈가 존재했다.
1-2. 렌더링 비교: SSG vs SSR vs CSR
CSR의 SEO를 돕기위해 Next.js는 기본적으로 모든 페이지를 pre-rendering하며 SSG와 SSR 두 가지 방식을 지원하며 이는 사용자가 결정할 수 있다. Pre-rendering은 페이지를 정적 상태로 미리 사용자에게 보여주는 것이고, JS가 로딩된 후 HTML과 코드를 매칭하는 과정을 hydration이라고 한다.
- SSG(추천): 이미 배포된 HTML(빌드 시 생성)을 서버가 전달. 매 요청마다 재사용. 정적페이지에 사용됨.
export getStaticProps (and getStaticPaths if necessary) - SSR: HTML이 요청에 의해 서버에서 생성됨. 동적 페이지에 사용
export getServerSideProps
Next.js는 최초에는 pre-rendering(SSG, SSR)으로 SEO 이슈를 해결하고, 사용자의 상호작용이 발생할 경우 CSR을 사용하여 UX를 향상시키도록 작동한다.(표의 노란색 영역이 Next.js의 작동 방식입니다.)
2. 기술 선정 이유
이번 프로젝트는 페이지를 배포하고 도메인 호스팅까지 완료하여 수익성을 창출하려 한다. 따라서 SEO를 통한 검색 엔진 노출이 중요하여 pre-rendering이 중요하게 작용한다. 또한 노마드 코더의 Next.js 기초 강의를 수강하면서 짧은 시간이었지만 file-system routing의 편리함과 React 패키지들을 따로 받지 않아도 된다는 점에서 굉장한 강점을 느꼈다. Next.js를 사용하면 더 효율적으로 짧은 시간 내에 개발이 가능하며, 추가로 공부하고 싶었던 react hook이나 redux도 적용 가능하다.
참고자료
Next.js document
NextJS, 그게 뭔데?
Next.js 기본 개념 훑어보기
next.js 기본 개념 알아보기
SPA vs MPA와 SSR vs CSR 장단점 뜻정리
데이터 가져오기 기초(SSR, SSG, CSR)
CSR, SSR, SSG 조화를 이루다.
서버사이드 렌더링 (개발자라면 상식으로 알고 있어야 하는 개념 정리 ⭐️)
Next.js란?
표는 직접 작성하였으며, 표 1-1의 그림은 Single Page Application & Routing에서 발췌하였습니다.
