[면접 준비] Redux의 사용 이유 / CSR, SSR의 차이점과 Next.js의 사용 이유

Redux란?

 

자바스크립트(JavaScript) 상태 관리 라이브러리입니다.

 

* 사용 이유

구조가 복잡하다고 판단되는 경우 상태 관리를 단방향 데이터 흐름체계로 만들기 위해 사용합니다.

 

https://hanamon.kr/redux%EB%9E%80-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/

보고 내용 추가 예정

 

---

CSR? SSR?

 

* CSR

클라이언트에서 렌더링 되는 방식으로, 처음 요청시 비어있는 HTML에 모든 리소스들을 다운받고 추가 요청시 그 부분만 데이터를 받아서 html 템플릿과 결합시켜 화면에 보여주게 됩니다.

장점은 모든 리소스들을 다운 받기때문에 렌더링이 빠르고, 필요한 데이터만 요청하기 때문에 서버의 부담이 적습니다.

단점은 처음에 모든 리소스들을 다운 받기 때문에 초기 로딩이 느리고, 초기 html은 컨텐츠가 비어있는 상태이기 때문에 SEO에 취약합니다.

 

* SSR

서버에서 렌더링 되는 방식으로, 클라이언트에서 요청을 하면 서버에서 데이터까지 갖춘 html을 클라이언트에 전달하게 됩니다.

장점은 웹페이지 로드시 한번의 요청으로 페이지를 구성하기 때문에 처음 로딩이 짧고, 컨텐츠가 구성되어 있는 HTML을 서버에서 받기 때문에 SEO에 최적화 되어있어 검색 결과에 더 높은 순위를 차지할 수 있게 됩니다.단점은 페이지 이동, 클릭 이벤트 요청이 생길 경우 요청하고 전달받는 과정을 계속 반복하기 때문에 불필요한 렌더링이 많아 서버 과부하가 생길 수 있습니다.

 

※ SEO란?

검색 엔진 최적화라고 하며, 구현 방법에 따라 구글 검색 시 검색 결과에 더 높은 순위를 차지할 수 있게 합니다.

---

Next.js란?

 

SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크입니다.

 

* 사용 이유
pages 폴더 밑에 폴더 및 파일을 구성하면 자동으로 라우팅 처리가 되어 개발에 편리하고, 처음 웹페이지 로드 시 SSR로 SEO를 최적화하며 클라이언트와 상호작용 할 때는 CSR을 사용하여 필요한 데이터만 요청 할 수 있기 때문에 SSR과 CSR의 장점을 다 적용 할 수 있습니다.