처음 웹 프론트엔드 코드를 작성할 때부터 리액트와 넥스트를 함께 사용해서 배워 이 둘의 차이점에 대해서 정확하게 알지 못하고 있다. 그래서 둘의 차이점을 알고 그 특징에 대해서 알아보려고 한다.
리액트(React)와 넥스트(Next.js)
리액트는 라이브러리이고, 넥스트는 프레임워크이다.
정확히는 리액트라는 라이브러리에서 좀 더 편하게 사용하기 위해서 넥스트가 나왔다고 생각하면 된다. 둘의 차이를 이해하기 위해서는 응용 프로그램의 흐름에 대한 주도권을 누가 가지고 있는지 알아야 한다.
CSR vs SSR
이 둘의 차이는 유저가 브라우저에서 보는 화면인 UI를 어디서 만들어 주는지에 따라 구분된다.
CSR은 클라이언트, SSR은 서버에서 화면을 구성한다.
CSR : create-react-app, react는 Client Side Rendering
SSR : create-next-app, next.js는 Server Side Rendering
리액트의 동작 방식 Client Side Rendering(CSR)
- 유저가 브라우저를 통해 앱에 접속.
- 앱은 브라우저에 js 정보가 들어있는 빈 html 문서를 전달. 즉, 브라우저에게 js를 전달.
- 브라우저는 js를 다운로드. 유저는 빈 화면을 보고 있음.
- 브라우저에서 js 다운로드가 끝나면 리액트 코드가 있는 js를 실행.
- 브라우저의 리액트 코드가 UI를 렌더링.
- 유저에게 정보가 담긴 화면을 보여줌.
Next의 동작 방식 Server Side Rendering(SSR)
- 유저가 브라우저를 통해 앱에 접속.
- 서버에서 리액트를 실행.
- 리액트는 UI를 렌더링.
- 렌더링된 결과를 브라우저에 html로 전달. 유저에게는 앱의 기본화면이 제공.
- 브라우저는 리액트 코드가 있는 js 파일을 다운받고 실행. 이 과정부터 리액트처럼 CSR의 동적 렌더링이 일어난다. (hydration)
SSR에서는 서버에서 먼저 UI를 구성한 후에 화면에 보여주는 방식으로 pre-rendering이 일어나기 때문에 유저는 인터넷 속도와는 상관없이 화면에 무언가 나오는 모습을 볼 수 있다.
Hydration
리액트 코드가 브라우저에 이미 존재하는 HTML과 동기화하여 앱이 동적으로 상호작용할 수 있도록하는 과정을 의미한다.
React와 Next의 장단점
| CSR | SSR | |
|---|---|---|
| 장점 | 초기 로드 완료 시 이후 렌더링 속도가 빠르다. | 검색 최적화(SEO, Serch Engine Optimization)에 좋다. |
| SSR에 비해 서버의 부담이 적다. | CSR에 비해 클라이언트의 부담이 적다. | |
| 초기 로딩이 빠르다. | ||
| 단점 | 검색 최적화(SEO, Serch Engine Optimization)에 좋지 않다. | 모든 요청에 대해서 html을 새로 만들어 내려주기 때문에 속도저하 및 새로고침이 일어난다. |
| 서버에서 렌더링 후 보여지기 때문에 초기 로딩이 느리다. | 페이지를 요청할 때마다 새로고침이 일어나 ux가 떨어진다. |
