NextJS 시작하기
NextJS를 시작하기 전에 ReactJS와 NextJS의 차이점을 알고 넘어가면 좋습니다.
Framework VS Library
ReactJS: 라이브러리입니다.
NextJS: ReactJS의 프레임워크입니다.
- Framework
원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능들을 갖추고 있는 뼈대를 의미합니다.
애플리케이션 개발 시 필수적인 코드, 알고리즘, DB연동과 같은 기능들을 위해 어느 정도 뼈대를 제공하며 이러한 뼈대 위에서 사용자는 코드를 작성하여 애플리케이션을 개발합니다. 앱 / 서버등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분으 프레임워크가 관리해주며, 사용자는 플레임워크가 정해준 방식대로 구현하면 됩니다. - Library
소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원들의 모임입니다. 즉 특정 기능을 모아둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미합니다.
CSR VS SSR
ReactJS: create-react-app로 만든 ReactJS는 CSR( Client Side Rendering )입니다.
NextJS: create-next-app로 만든 NextJS는 SSR( Serveer Side Rendering )입니다.
위 둘의 차이점은 유저가 브라우저에서 보는 화면인 UI를 어디서 만들어 주느냐에 따라 구분됩니다.
CSR은 클라이언트에서, SSR은 서버에서 화면을 구성합니다.
CSR의 동작 방식
유저, 서버, 브라우저 각각의 입장을 나누어 이해합니다. ( 브라우저 = 유저와 앱의 연결로 )
- 유저가 브라우저를 통해 앱에 접속합니다.
- 앱은 브라우저에게 Javascript의 정보가 들어있는 빈 HTML문서를 전달합니다. ( 브라우저에게 Javascript파일을 전달합니다. )
- 브라우저는 Javascript파일을 다운로드하고 동시에 유저는 빈 화면을 보게됩니다. ( 접속에 대한 응답입니다. )
- 브라우저에서 Javascript파일의 다운로드가 끝나면 React Code가 있는 Javascript파일을 실행합니다.
- 브라우저에 있는 React Code가 UI를 렌더링하니다. ( 동적 렌더링 )
- 유저는 앱이 보여주고자 했던 화면을 보게 됩니다.
즉, 브라우저가 Javascript코드를 갖고있지 않거나, 요청중인 상태라면 UI를 구성할 수 없으며, 유저는 빈화면을 보게됩니다.
리액트가 실행되기 전까지 유저 화면에 아무것도 보이지 않는 것입니다. 이렇게 클라이언트 측에서 UI를 빌드하는 것을 CSR방식이라고 합니다.
CSR의 장점
- 초기 로드에 성공하면 이후 렌더링이 빠릅니다.
- 클라이언트에서 처리하기 때문에 서버에 요청할 것이 적습니다. ( 서버의 부담이 적습니다. )
CSR의 단점
- SEO( Search Engine Optimization )에 좋지 않습니다. ( 초기 HTML파일이 비어있기 때문에 데이터 수집에 어려움이 있습니다. 검색엔진.. )
- 초기 로드가 오래 걸립니다.
- 외부 라이브러리에 의존할 경우가 많습니다.
SSR 동작 방식
유저, 서버, 브라우저 각각의 입장을 나누어 이해합니다. ( 브라우저 = 유저와 앱의 연결로 )
- 유저가 브라우저를 통해 앱에 접속합니다.
- 서버에서 React를 실행시켜줍니다. ( React는 UI를 렌더링합니다. )
- 렌더링된 결과를 통해 브라우저에게 HTML을 제공합니다. ( 이 때, 유저는 앱의 초기화면을 보게됩니다. [ 접속에 대한 응답 ] )
- 이후, 브라우저는 React Code가 있는 Javascript파일을 다운받고 실행시킵니다. ( 이때부터 일반적인 React앱과 같이 CSR의 동작을 하게되며 이 과정을 Hydration이라고합니다. )
Hydration: React Code가 브라우저에 이미 존재하는 HTML과 동기화하여 앱이 동적으로 상호작용할 수 있도록하는 과정입니다.
즉, 서버에서 모든 UI를 구성한 후, 유저에게 응답해 화면을 보여주는 방식으로, 화면이 Pre-Rendering되어 유저는 인터넷 속도에 상관없이 화면에 무언가 나오는 것을 볼 수 있습니다. 이렇게 서버 측에서 UI를 렌더링하는 것을 SSR 동작 방식이라고 합니다.
SSR의 장점
- SEO ( Search Engine Optimization )에 좋습니다. ( HTML파일에 모든 정보가 포함되기 때문입니다. )
- 초기 로딩이 빠릅니다.
- 클라이언트의 부담이 CSR의 비해 적습니다.
SSR의 단점
- 서버에서 전체 앱을 미리 렌더링하기 때문에 컴포넌트 로딩이 오래 걸리면 유저는 빈 화면을 보게됩니다.
- 모든 요청에 대해 필요한 부분을 수정하는 것이 아닌 새로운 HTML페이지를 내려주기 때문에 속도 저하나 새로고침이 발생합니다.
- 페이지를 요청할 때마다 새로고침되어서 UX가 다소 떨어집니다.
NextJS의 특징
코드 스플리팅
일반적인 리액트 싱글페이지에서는 초기 렌더링때 모든 컴포넌트를 내려받습니다. 하지만 규모가 커지고, 용량이 커지면 로딩속도가 지연될 수 있는 문제점이 있습니다.
NextJS는 이러한 문제점을 개선해서 필요에 따라 파일을 불러올 수 있도록 여러 개의 파일을 분리하는 코드 스플리팅을 사용하였습니다. 폴더구조에 pages폴더 안에 라우트들이 들어가며, Components폴더에는 React Component들이 들어가게 됩니다.
ex ) 브라우저가 실행되고, 사용자가 접속을 하면 첫 페이지는 index page만 불러오게 되고, 그 이후에 다른 페이지로 넘어갔을 때는 해당 페이지만 불러오게 됩니다.
파일기반 내비게이션 기능
ReactJS에서는 루트를 위해서 react-router-dom이라는 라이브러리를 사용하여 라우팅 설정을 해주어야 합니다.
그로 인해 페이지의 경로에 대해 직접 설정을 해주어야 하지만, NextJS는 파일 시스템 기반 라우팅을 사용합니다. 폴더의 경로에 따라 페이지의 경로가 설정되어 구축이 빠르고 관리가 편리한 장점이 있습니다.
Hot Code Reloading을 지원하는 개발 환경
NextJS 개발 환경에서는 코드 변경 사항이 저장되면 응용 프로그램을 자동으로 다시 로드합니다. 개발 모드일 때 소스코드를 저장하면 브라우저 오른쪽 하단에 애니메이션 아이콘이 생기며, 이는 NextJS가 응용 프로그램을 컴파일하고 있다는 것을 의미합니다
styled-jsx 지원
NextJS는 자체 CSS-In-JS인 styled-jsx를 지원합니다. 기본적으로 제공하는 기능이기 때문에 스타일을 서버 사이드 렌더링 하기 위한 설정이 필요하지 않습니다.