[Next.js] React.js 와 Next.js의 차이점

백광현·2022년 7월 22일

💡1. Framework vs. Library

React.js는 라이브러리이고, Next.js는 React.js의 프레임워크이다.

이 둘의 궁극적인 차이점은 "응용 프로그램의 흐름 주도권을 누가 가지고 있느냐"이다.

프레임워크란 ?

원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 의미한다.

애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 연동과 같은 기능들을 위해 어느 정도 뼈대(구조)를 제공하며 이러한 뼈대 위에서 사용자는 코드를 작성하여 애플리케이션을 개발. 앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분은 프레임워크가 관리하며, 사용자는 프레임워크가 정해준 방식대로 클래서, 메서드들을 구현하면 됩니다.

라이브러리란?

소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임. 즉 특정 기능을 모와둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미.

⭐️ React.js는 라이브러리 이다.

💡 2. CSR vs SSR

create-react-app 로 만든 React.js는 CSR(Client-Side-Rendering)

create-next-app 로 만든 Next.js는 SSR(Server-Side-Rendering)

이 둘의 차이는 유저가 브라우저에서 보는 화면인 UI를 어디서 만들어 주는지에 따라 구분된다.

CSR은 클라이언트, SSR은 서버에서 화면을 구성한다.

React의 동작 방식(CSR)

유저와 서버, 브라우저 각각의 입장을 나눠서 생각하면 이해하기가 쉽다. (브라우저는 유저와 앱의 연결통로)

유저가 브라우저를 통해 앱에 접속하면,
앱은 브라우저에게 javascript 정보가 들어있는 빈 html 문서을 전달한다. 즉, 브라우저에게 javascript파일을 전달하는 것으로 볼 수 있다.
브라우저는 javascript파일을 다운로드하고 동시에 유저는 빈 화면을 보게 된다(접속에 대한 응답).
브라우저에서 js 파일의 다운로드가 끝나면, 리액트 코드가 있는 js파일을 실행한다.
브라우저에 있는 리액트 코드가 UI를 렌더링한다. (동적으로 렌더링)
유저는 드디어 앱이 보여주고자 했던 화면을 보게 된다.

즉, 브라우저가 javascript 코드를 가지고 있지 않거나, 요청 중인 상태라면 UI를 구성할 수 없고, 유저는 빈 화면을 보게 된다. 리액트 코드가 실행되기 전까지는 유저 화면에 아무것도 보이지 않는 것이다. 이렇게 클라이언트 측에서 UI를 빌드하는 것을 CSR 방식이라 한다

CSR의 장점

초기 로드만 완료되면 이후 렌더링은 빠르다.
클라이언트에서 처리하니 서버에 요청할 것이 적음 -> 서버 부담이 적다.

단점

SEO(Search Engine Optimization)에 좋지않다.
초기 HTML 파일이 비어있기 때문에 데이터 수집 어려움
서버에서 렌더링한 후에 보여지기 때문에 초기 로드가 오래 걸린다.

Next 동작 방식 (SSR)

유저가 브라우저를 통해 앱에 접속하면,
서버에서 리액트를 실행한다.
리액트는 UI를 렌더링한다.
렌더링된 결과를 통해 브라우저에게 HTML을 제공한다. 이때 유저는 앱의 초기화면을 보게 된다(접속에 대한 응답).
이후 브라우저는 리액트 코드가 있는 Javascript 파일을 다운받고 실행시킨다. 이때부터 일반적인 리액트 앱과 같이 CSR의 동작(동적 렌더링)을 하게 되고 이 과정을 hydration이라고 한다.
즉, 서버에서 UI를 모두 구성한 후 유저에게 응답해 화면을 보여주는 방식으로, 화면이 pre-rendering되어 유저는 인터넷 속도에 상관없이 화면에 뭔가 나오는 것을 볼 수 있다. 이렇게 서버 측에서 UI를 렌더링하는 것을 SSR 방식이라 한다.

cf) hydration - 리액트 코드가 브라우저에 이미 존재하는 HTML과 동기화하여 앱이 동적으로 상호작용할 수 있도록하는 과정