✔ Next.js를 사용하는 이유
React VS Next.js
React는 라이브러리, Next.js는 React의 프레임워크
라이브러리란?
- 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임
즉, 특정기능을 모아둔 코드 혹은 함수들의 집합이며 코드 작성 시 활용 가능한 도구
프레임워크란?
- 원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격 즉, 뼈대를 의미한다.
- 사용자는 코드를 작성하여 애플리케이션을 개발한다.
여기서 앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분을 프레임워크가 관리한다.
💡 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유
React는 애초에 잘 되어 있는 편인데, 왜 Next.js까지 필요한 걸까?
결론부터 말하면
Next.js를 사용하는 가장 큰 이유가 바로 SSR 때문이다.
📌 CSR, SSR이란?
CSR(Client Side Rendering)은 클라이언트 측에서 렌더링을 하는 방식, SSR(Server Side Rendering)은 서버측에서 렌더링하는 방식
=> 참고: CSR, SSR, SSG
기본적으로 React는 Client Side Rendering(CSR)을 한다.
이는 HTML 파일을 하나만 받아와서 작동하다 보니 각각의 페이지에 대한 정보를 담기 힘들어 SEO(검색 엔진 최적화)에 취약하고, 첫 로드시 모든 로직이 담겨있는 JS를 다운로드하다 보니 첫 진입 시 로딩 속도가 길다는 단점이 있다.
반면, Next.js는 pre-rendering을 통해 미리 데이터가 렌더링된 페이지를 가져올 수 있게 해주므로 사용자에게 더 좋은 경험을 주고, 검색 엔진에 잘 노출될 수 있도록 해주는 SEO에서도 장점을 얻을 수 있다.
pre-rendering은 SSR 뿐만 아니라 정적 사이트 생성,SSG(Static Site Generate)도 가능하게 해준다.
Next.js 없이는 SSR이 힘들까?
Next.js없이도 SSR 페이지를 만들 수 있다.
물론 Next.js 없이도 SSR 페이지를 만들 수 있지만, 리팩토링 등 꽤 비용이 드는 작업일뿐더러 복잡하기 때문에 보통 깔끔하게 Next.js를 도입하는 편이다.
✨ 이외에 추가적인 Next.js의 기능
직관적인 페이지 기반 라우팅 시스템
next.js는 pre-rendering 뿐만 아니라 페이지 기반 라우팅 시스템도 제공한다.
프로젝트의 가장 바깥 폴더인 /pages 폴더에 컴포넌트를 export 하면 폴더명이 페이지 route가 된다.
페이지간 빠르고 매끄러운 전환을 위한 client-side navigation
Next.js는 <Link /> 컴포넌트를 통해 페이지간의 빠르고 매끄러운 이동을 가능하게 한다.
HTML의 <a>와 달리 페이지를 리로딩하지 않고도 페이지간 이동이 가능하고, <Link /> 컴포넌트가 뷰포트에 보였을 때 관련 페이지를 백그라운드에서 미리 가져다 놓기 때문에 사용자가 링크를 클릭했을 때, 매우 빠르게 해당 페이지로 이동할 수 있게 해준다.
Code Splitting (코드 분할)
대부분의 사용자들은 웹페이지가 3초 이상 로딩될 시 이를 느리다 판단한다.
코드 분할은 웹의 첫 페이지가 로딩될 때, 거대한 javascript patload를 보내는 것이 아니라, 번들을 여러 조각으로 조각내어서 처음에 가장 필요한 부분만 전송해 주는 방식을 통해 어플리케이션 로드 타임을 줄여준다.
코드 분할은 webpack, parcel, rollup 등의 모듈 번들러도 지원하고 있는 기능이지만, Next.js를 사용하면 별도의 설정없이 자동으로 프로젝트에 적용된다.
✍ 요약
- React는 라이브러리, Next.js는 React의 프레임워크
- 기본적으로 React는 Client Side Rendering(CSR)이며, Next.js를 사용하는 가장 큰 이유가 바로 SSR 때문이다.
🥄 참조링크
