[하루한개념] CSR, SSR로 알아보는 nextJS

개요

next JS를 공부하려고 노마드 코더 인강을 틀었는데 nextJS에 대한 제대로 된 설명 없이 바로 실습으로 들어가려고 하시길래 "nextJS가 일단 뭔데...?"라는 생각으로 검색을 시작해봤습니다.

 

본론

---

기본 주제 : next JS가 무엇인가?

nextJS는 SSR을 지원하는 react 프레임워크입니다. 여기서 SSR과 React의 개념을 조금 짚고 넘어가려고 합니다.

 

---

React란 무엇인가?

 react는 페이스북에서 만든 컴포넌트 단위로 UI를 구성할 수 있게 한 자바스크립트 라이브러리를 말한다. 기본적으로 SPA(Single Page Application)를 지원하며 CSR 방식으로 화면을 전환한다. 

 

SSR(Server Side Rendering)과 CSR(Client Side Rendering)은 뭔데?

 SSR은 서버에서 렌더링 하는 것을 말하며 이와 같이 언급되는 개념으론 클라이언트에서 렌더링하는 CSR이 있다. 여기서 렌더링이라는 개념을 제대로 짚고 넘어가자면, 렌더링은 HTML, CSS, JS등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말한다. 

 

 렌더링의 과정은 정리하면 다음과 같다.

1. Dom Tree, CSSOM Tree 생성 : Dom Tree(Document Object Model Tree)와 CSSOM Tree (Cascading Style Sheet Object Model Tree)를 만든다.
2. Rendering Tree 생성 : Rendering Tree(Dom Tree + CSSOM Tree)를 만든다.
3. Layout : 크기, 위치를 절대적인 픽셀크기로 변환한다.
4. Paint : 브라우저가 화면에 요소들을 출력한다.

 

 SSR과 CSR을 비교하면, SSR은 렌더링된 HTML문서가 클라이언트로 전송되면 이를 브라우저가 출력하는 방식이고, CSR은 서버로 부터 브라우저가 정적 자원을 받아 필요한 컴포넌트를 구성하여 출력하는 방식이다. 이러한 방식의 차이로 CSR보다 SSR의 초기로딩 속도가 빠르지만 페이지 전환 시에는 CSR이 더 부드럽고 빠르게 전환된다. (CSR은 자원을 이미 갖고있기 떄문에 전환이 빠름. 반면 SSR은 페이지 전환할때마다 서버로부터 렌더링된 페이지를 받기에 비교적 느리고 끊기는 걸 느낄 수 있다.) 그리고, SSR은 서버로 부터 렌더링된 문서를 받아서 넘어가기 때문에 SEO(Search Engine Optimization)가 되어있어 검색 노출이 비교적 쉽지만 서버에 요청하는 횟수가 많아 부담이 크다는 단점이 있다.

 

NEXT JS는 그럼 무엇인가?

앞서 next JS가 "SSR을 지원하는 React 프레임워크"라고 언급했다. React는 CSR방식으로 화면을 전환하는데, SSR방식을 지원한다는게 무슨 의미인지 이 둘을 이해하며 혼란스러웠다. 이에 대한 해답은 작동방식을 알면서 해결이 되었고 nextJS가 이 둘의 장점을 가진 프엔을 한다면 한번은 꼭 배워야할 느낌이 들었다.

 

nextJS의 작동방식은 초기에 서버 접속 시엔 SSR방식으로 받으며 CSR의 SEO최적화 문제와 초기 로딩 속도가 느리다는 문제를 해결하고, JS를 다운받아 React를 실행한 뒤, 페이지 전환 시에는 CSR방식으로 서버가 아닌 브라우저에서 처리함으로써 SPA의 장점을 얻는 방식이었다.

 

즉, next JS는 SPA(React)의 장점과 SSR의 장점을 같이 제공함으로써 더 나은 프로그래밍 세상을 연 방식이었다!

 

마무리

공부하면서 스토리를 만든 걸 한번 다 적어봤는데 이해가 되셨을지 모르겠네요...! 그래도 SSR과 CSR, Rendering, NextJS가 왜 좋은지 정도는 가볍게 개념 정리하는 수준으로 알고가셨으면 좋겠습니다!