React.js vs Next.js

⭐️ React 란?

UI 자바스크립트 라이브러리로 SPA(Single Page Application)의 UI를 생성하는데 집중한 라이브러리입니다. 

SPA의 UI를 만드는 자바스크립트 라이브러리이다보니, SPA 제작을 하는 다른 프레임워크(Angular, Vue)에 비해 부족한 부분이 있습니다. 

예) 리액트는 페이지 전환 기능을 제공하지 않기 때문에 react-router와 같은 추가적인 라이브러리를 사용해야 합니다.

 

⭐️ React 의 특징

단방향 데이터 바인딩

단 하나의 Watcher가 자바스크립트의 데이터 갱신을 감지하여 사용자의 UI 데이터를 갱신합니다. 사용자가 UI를 통해 자바스크립트의 데이터를 갱신할 때는, 이벤트를 통해 갱신하게 됩니다. 하나의 Watcher를 사용하기 때문에 양방향 데이터 바인딩이 가지는 성능적인 이슈를 해결하고 더 확실하게 데이터를 추적할 수 있게 해줍니다.

 

양방향 데이터 바인딩

사용자 UI의 데이터 변경을 감시하는 Watcher와 자바스크립트 데이터의 변경을 감시하는 Watcher가 UI와 자바스크립트를 자동으로 동기화 시켜주는 방식입니다. 사용자는 자바스크립트 내의 데이터 변경과 UI에 데이터 변경에 관한 동기화를 신경쓰지 않고 프로그래밍 할 수 있습니다.

하지만 하나의 데이터 동기화에 두 개의 Watcher가 사용되고 데이터가 많아지면 동기화를 위해 수많은 Watcher가 생성되므로 성능 저하가 발생할 수 있습니다.

 

JSX (Javascript XML)

자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수를 바로 사용할 수 있는 템플릿 언어입니다.

 

가상 돔 (Virtual DOM)

브라우저 렌더링 과정이 모두 끝나고 DOM의 조작이 일어나면 리플로우와 리페인트가 일어나게 되는데, DOM의 각 노드에 대한 연산 과정을 다시 수행함으로써 많이 수행될수록 웹 서비스의 성능이 저하되는 문제가 발생합니다.

 

그래서 리액트는 리플로우와 리페인트가 자주 수행되는 문제를 해결하기 위해 화면에 표시되는 DOM과 동일한 DOM을 메모리상에 만들고, DOM 조작이 발생하면 메모리 상에 생성한 가상 돔에서 모든 연산을 수행한 후 실제 DOM에 반영하여 리플로우와 리페인트 연산을 최소화함으로써 성능을 최적화 시켰습니다.

 

예)

사용자가 장바구니에 물건을 추가하는 과정에서, 리스트에 물건이 하나 추가되고 전체 장바구니 물건의 개수가 늘어납니다.

가상 돔이 없는 경우, 리스트에 물건이 추가되기 위해 리플로우/리페인트 연산이 한 번 발생하고, 전체 물건 개수를 표시하기 위해 연산이 한번 더 발생하게 됩니다.

하지만 리액트는 가상 돔에서 물건 개수 표시와 물건 추가를 모두 가상 돔에서 계산을 하고 계산 결과를 가상 돔으로 전달하여 리플로우/리페인트 연산을 한 번만 수행하도록 합니다.

 

리플로우 (Reflow)와 리페인트(Repaint)

브라우저 렌더링 과정을 모두 마치고 자바스크립트를 사용하여 DOM을 조작하게 되면, 각 노드의 좌표를 계산하기 위해 레이아웃 과정이 다시 실행되고(Reflow), 그 이후 색상을 입히기 위해 페인팅 과정이 다시 진행되게 됩니다.(Repaint)

 

브라우저 렌더링 과정은 https://peachsoong.tistory.com/85 에 부연 설명되어 있습니다.

 

컴포넌트 기반

재사용이 가능한 독립된 모듈인 컴포넌트로 이루어져 있다.

재사용이 가능하여 생산성을 향상시키고, 테스트하기 쉬워 유지 보수를 쉽게 할 수 있도록 도와준다.

 

 

⭐️ Next.js 란?

React.js는 라이브러리고 Next.js는 리액트의 프레임워크이다. 특히 리액트에서 검색 엔진 최적화(SEO, Search Engine Optimization)를 위한 SSR(Server Side Rendering) 또는 SSG를 가능하게 해주는 프레임워크이다.

리액트에서 SSR을 사용하려면 웹 서버 생성, 웹팩 설정, 데이터 로딩, 코드 스플리팅 등 복잡한 과정을 필요로 하지만 Next.js는 이러한 설정 없이 SSR을 사용할 수 있다.

 

라이브러리, 프레임워크?

라이브러리는 어플리케이션을 만들 때 필요한 함수와 같은 자원의 모임이고,

프레임워크는 코드를 작성하는 기본적인 틀을 제공해서 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경이다.

 

Next.js 동작 과정

SSR과 CSR에 대해서는 https://peachsoong.tistory.com/91 에서 부연 설명을 보실 수 있습니다.

https://medium.com/@msj9121/next-js-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EA%B3%A0-%EC%93%B0%EC%9E%90-8727f76614c9

 

초기화면 접속 (SSR 방식 이용)

1. 사용자가 홈페이지에 접속하면 클라이언트는 이를 확인하고 서버로 요청을 보냅니다. (Server Side Rendering)
2. 서버에서는 DOM 요소들을 빌드하여 HTML, CSS가 미리 구성된 파일을 클라이언트에게 전달합니다. (Pre-rendering, initial load)
   (initial load: javascript 동작이 없는 HTML을 먼저 화면에 보여주는 것을 의미)
3. 이 과정에서 클라이언트는 javascript 파일을 수행하여 클라이언트에게 전달합니다. (Hydration)
   (hydration: initial load 이후 요청이 오면 chunk 단위로 JS 파일을 HTML에 연결하는 과정)

페이지 이동이 발생하는 경우 (CSR 방식 이용)

1. 페이지 이동 및 동작이 발생하는 경우에는 CSR 방식을 통해 서버를 거치지 않고 브라우저에서 페이지를 이동합니다.

 

SSR(Server Side Rendering)과 SSG(Static-Site-Generation)?

위의 과정에서 서버에서 pre-rendering하는 것까지가 next.js의 특징이며, pre-rendering을 동적으로 해서 페이지를 생성하느냐 정적으로 페이지를 생성하느냐의 차이가 SSR과 SSG의 차이입니다.

 

SSR은 유저가 페이지를 요청할 때마다 그에 맞는 HTML 문서를 생성해서 반환합니다.

항상 최신 상태를 유지해야하는 웹 페이지나, 분석 차트, 게시판 등 사용자의 요청마다 동적으로 페이지를 생성해 다른 내용을 보여줘야 하는 경우에 사용됩니다.

 

SSG는 빌드를 진행할 때 pages 폴더에서 작성한 각 페이지들에 대해 각각의 문서를 생성해서 static한 파일로 생성합니다.

해당 페이지에 대한 요청이 발생하게 되면 이 페이지들을 재생성하는게 아니라 이미 생성이 된 페이지를 반환하는 형태로 동작합니다. 

따라서 React의 CSR보다 응답 속도가 빠르다는 장점이 있고, Next.js에서도 SSG의 형태로 사용하는 것을 지향하고 있습니다.

마케팅 페이지, 블로그 게시물 등 정적 생성된 정보를 각 요청에 동일한 정보로 반환하는 경우에 SSG를 사용합니다.

 

Next.js에서 SSG를 사용하려면 getStaticProps를 사용하면 됩니다.

 

 

⭐️ Next.js를 사용해야 하는 이유

사전 렌더링 및 서버사이드 렌더링

Next.js는 초기 페이지를 pre-rendering을 통해 미리 데이터가 렌더링 된 페이지를 가져올 수 있게 해주므로, 초기 페이지 로딩 속도가 빨라져 사용자에게 더 좋은 사용자 경험을 주고 SEO에서도 장점을 얻을 수 있다.

 

페이지 기반 라우팅 시스템

pages 폴더에서 컴포넌트를 export하면 하위의 폴더 명이 페이지의 route가 된다.

 

SPA의 장점을 유지

첫 페이지를 SSR 방식을 이용하여 처리한 후 다른 페이지로 이동할 때는 CSR 방식을 채택하므로 SSR의 장점과 동시에 SPA의 장점을 유지할 수 있다.

 

client-side navigation

<Link /> 컴포넌트가 뷰포트에 보였을 때 관련 페이지를 백그라운드에서 미리 가져다 놓기 때문에 사용자가 Link를 클릭했을 때 빠르게 해당 페이지로 이동할 수 있다.

 

Code Splitting

코드 분할을 통해 웹의 첫 페이지가 로딩될 때 거대한 javascript payload를 보내는 것이 아니라, 번들을 여러 조각으로 조각내어 처음에 필요한 부분만 전송해 주는 방식을 통해 어플리케이션 로드 타임을 줄여준다.

webpack 등의 모듈 번들러도 지원하고 있는 기능이지만 next.js를 사용하면 별도의 설정없이 자동으로 프로젝트에 적용된다.

(dynamic import를 사용하여 모듈이 호출될 때만 모듈을 import 함)

 

References

• https://dev-yakuza.posstree.com/ko/react/create-react-app/react/
• https://velog.io/@syoung125/Next.js-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90-1-Next.js-%EB%9E%80-Next.js%EB%A5%BC-%EC%99%9C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C-Next.js%EC%9D%98-%EC%9E%A5%EC%A0%90%EC%9D%80
• https://adjh54.tistory.com/52
• SSR과 SSG의 차이 https://narup.tistory.com/235