React.js vs Next.js
리액트에 대해 공부를 하고 Next.js라는 것에도 궁금해졌다.
두 차이를 비교해보려고 한다.
CSR, SSR
리액트는 Client Side Rendering으로 컴포넌트들을 모아 페이지를 구현하면 이를 웹브라우저상에서 해석하고 렌더링한다.
Next.js는 Server Side Rendering으로 서버 자체에서 렌더링한다.
console.log를 찍으면 React는 아래의 Client Side Console에 로그가 찍히며,
Next.js는 아래의 Server Side Console에 로그가 찍힌다.
서버 자체에서 렌더링 해준다는 말을 풀어 설명하면, 위의 사진에서 GET / 200 in 1046ms같은 로그가 남아있다.
- 웹브라우저에서
/로 GET 요청 - Node.js(Next.js) 서버가
/라우터에 맞는 아래의 데이터를 생성
<html>
~~
</html>- html, js, css 등 필요한 데이터들을 클라이언트에 반환
- 클라이언트는 이를 웹브라우저에서 번들링을 통해 해석한 후 렌더링
대충 이런 느낌이다.
또한 SSR이면서도 백엔드로도 개발을 할 수 있다.
RCC? RSC?
SSR의 개념을 도입하기 위해 React 18버전 부터 도입한 것이 React Client Component와 React Server Component이다.
Server Component는 데이터를 가져오거나, 백엔드에 접근하는 등 비동기적인 상호작용이 존재하는 Component이다. 하지만, 사용자의 클릭을 감지하거나 text 란에서 값을 변경하는 등 event listener와의 상호작용이나 useState같은 라이프사이클과 관련된 hooks는 지원하지 않는다.
Client Component는 비동기적인 상호작용 없이, 기존의 우리가 알던 event listener, hooks 들의 사용이 가능한 컴포넌트를 의미한다.
RCC는 클라이언트 상에서 렌더링 되는 컴포넌트이고, RSC는 서버 상에서 렌더링 되는 컴포넌트인 것이다.
Next.js 에서는 RSC를 통해 SSR를 구현한 것이다.
SEO
검색 엔진 최적화로 검색했을 때 상단으로 잘 나오도록 하는 것을 의미한다.
구글의 예시로 들자면, 저기있는 것들은 metadata이다.
html의 <meta>태그로 수정할 수 있다.
react에서는 이런 metadata를 다루기가 어렵다.
왜냐하면 SPA(Single Page Application)이기 때문에, 페이지마다 metadata를 따로 구현이 안되고 하나의 페이지에 하나의 metadata로 고정적으로 되기 때문이다.
React Helmet 같은 것으로도 할 수 있지만, next.js는 자체적으로 metadata를 편하게 수정할 수 있다.
Libarary vs Framework
리액트는 단순 라이브러리로써, DOM을 통해 Virtual DOM을 만들고 이를 조작하기 쉽도록 component 라는 개념을 도입한 라이브러리이다.
Next.js는 프레임워크로 좀 더 고차원적인 지원을 한다.
App Router로 파일이름을 page.tsx, layout.tsx, error.tsx 라고 지정하기만 하면, 라우팅이 자동으로 연동되어 에러 페이지나 로딩페이지, 정상페이지를 사용자에게 보여줄 수 있다. (File based Route라고도 부름)
이 뿐만 아니라, CSR과 SSR 중 특정부분을 선택해서 보여줄 수 있다든가, Fullstack으로 Server의 엔드포인트와 DB 접속을 지원한다든가 등 많은 기능들을 제공한다.
