📚 최신 업데이트 24.03.14
Next.js란?
- React 웹 프레임워크
- SSR, SSG, ISR과 같은 기능 제공
- 확장가능, 유지보수가 쉬운 웹 애플리케이션을 위한 방법 제공
Next.js의 탄생 배경
- 과거 웹 페이지는 SSR기반으로 동작, 페이지가 여러개로 구성된 Multi-Page-Form을 사용
- 하지만 스마트폰의 등장으로, 모바일에 최적화된 형태의 웹 페이지 필요성 증가
💡 왜 SPA가 등장했을까?
과거)
전통적인 웹사이트는 지금과 달리 하나의 문서(HTML)에 전달되는 정보의 양이 적었고,
버튼을 클릭했을때 일부 영역만 변경되어도 서버에서는 완전히 새로운 페이지를 재렌더링하여 전송해주는 방식
문제)
웹 시장이 발전하면서 한 페이지에 해당하는 정보의 양이 매우 커졌고,
이를 매번 서버에서 새로운 페이지를 전송해주는 것이 버거워지기 시작함
해결방안)
SPA는 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 변경해 표시하는 어플리케이션.
브라우저는 최초 한 번 서버에 요청하여 전체 페이지를 로드하고,
이후에 발생하는 변경사항은 ajax같은 데이터 바인딩하는 방식으로 동작.
이를 통해 사용자에게 빠른 인터랙션 제공
CSR이 가능한 SPA 등장
- SPA는 한 개의 페이지에서 여러 동작이 이뤄진다
- SPA를 지원하는 React, Angular, Vue와 같은 최신 프레임워크 등장
React는 기본적으로 Client-Side에서만 작동하는 문제점
✅ client-side rendering이란, 서버로부터 빈 HTML과 UI를 구성하기 위한 JS를 전달받아 화면을 렌더링한다.
모든 렌더링 작업이 완료되기 전까지 빈화면이다
✅ pre-rendering이란, 서버에서 각 페이지의 HTML파일을 미리 생성하여 사용자에게
화면을 보여준다. 이후에 Hydration을 통해 동적인 UI로 바뀐다.
Next.js에서는 디폴트로 모든 페이지가 pre-rending된다.
✅ Next.js에서 pre-rendering 방식을 사용하는건 SSR, SSG이다.
- Server-side Rendering: 각 요청마다 HTML 생성
- Static Site Generation: 빌드 타임시 생성, pre-rendering된 HTML은 각 요청마다 재사용
- CSR로 실행되므로 SEO효과를 보기 어렵다
- 초기 렌더링시 시간이 오래걸린다
이를 해결하기 위해 Next.js 등장
- 웹 앱을 서버에서 미리 렌더링해두는 방법으로 Vercel이 Next.js를 만들었다.
Next.js 작동원리
- 사용자가 처음 서버에 페이지 접속을 요청하면, SSR방식으로 렌더링 될 HTML 전송
- 브라우저에서 JS 파일을 다운로드, React 실행
- 사용자와 클라이언트가 상호작용하며, 다른 페이지 이동 시 CSR의 방식으로 브라우저에서 처리
Next.js 장점
- SEO 장점
- 사이트의 데이터를 크롤링할 때, 검색 엔진 봇들이 JS를 해석할 수 없어, HTML을 크롤링 한다.
- CSR은 브라우저에서 페이지를 구성하기 전까지는 HTML에 아무것도 존재하지 않으므로 데이터 수집이 어렵고, 검색엔진 노출이 어렵다
- SSR은 서버 측에서 화면을 그려 보내주기 때문에 HTML에 이미 컨텐츠들을 포함하고 있어, 크롤링 봇의 데이터 수집이 용이해진다.
코드분할 관점에서의 장점
- 일반적인 React SPA에서는 초기 렌더링 시 모든 컴포넌트를 내려 받는다
- 이는 규모가 커지고, 용량이 커지면 로딩 속도가 지연되는 문제를 발생
- Next.js는 필요에 따라 파일을 불러올 수 있도록 여러 파일로 분리하는 방식으로 문제를 개선
- webpack, parcel등의 모듈 번들러에서도 지원하는 기는이지만, next.js 사용시 별도의 설정 없이 자동으로 프로젝트에 적용된다.
- dynamic import를 통해 모듈이 호출될 때만 해당 모듈이 import된다
pre-rendering
- next.js는 pre-rendering을 통해 미리 데이터가 렌더링된 페이지를 가져올 수 있다
- 이를 통해 UX를 개선하고, SEO에도 특화된 사이트를 만들 수 있다
- SSR, SSG를 가능하게 하고, SSR과 CSR의 혼합 사용도 가능하게 한다
