[IT] React ( CSR ) vs Next ( SSR )

---

 

원래는 React 개발을 하고 있었는데 페이지별로 공유했을 때 META TAG 가 변경돼게 하고 싶었다.

이게 React 같은 경우에는 CSR 이라 안돼고, 그렇게 하고싶으면 NextJS SSR 를 이용해야 한다고 했다.

이때부터 내가 NextJS 개발을 이어하게 되는 계기가 되었다. 그리고 애초에 요즘에는 SSR 개발이 유행한다고 하더라. ( 뇌피셜임 )

그래서 간단하게 CSR 과 SSR 의 차이를 알아보자.

[ 그전에 React 의 강점을 살펴보고 싶으면 ? ]

[ReactJS] ReactJS 가 인기가 많은 이유

CSR (Client-Side Rendering):

클라이언트 사이드 렌더링은 초기 페이지 로딩 시 HTML과 기본 JavaScript 파일만 전송하고, 페이지의 내용은 JavaScript를 사용하여 동적으로 렌더링하는 방식이다.

[ 장점 ]

• 빠른 페이지 전환 : 페이지 간 전환 시 필요한 데이터만 요청하므로 페이지 전환 속도가 빠르다.
• 클라이언트 측 라우팅 : 라우팅 및 뷰 전환에 대한 경험이 좋다.
• 단순한 서버 요구사항 : 서버 사이드 렌더링보다 서버 측에서의 부하가 적다.

[ 단점 ]

• 초기 로딩 속도 : 초기 페이지 로딩 시에 필요한 JavaScript 파일을 다운로드하고 실행해야 하므로 느린 초기 로딩이 발생할 수 있다.
• SEO 문제 : 검색 엔진 최적화에 어려움이 있을 수 있다. 검색 엔진이 JavaScript 실행을 기다리지 않고 내용을 수집할 수도 있다.

내가 React 를 사용하지 않고 NextJS 를 사용하는 가장 큰 이유가 바로 SEO 문제 때문이다.

SSR (Server-Side Rendering):

서버 사이드 렌더링은 초기 페이지 로딩 시에 HTML을 미리 렌더링한 후 클라이언트로 전송하는 방식으로, React 기반의 프레임워크이다.

[ 장점 ]

• SEO 개선 : 검색 엔진이 페이지의 내용을 쉽게 수집하고 인덱싱할 수 있다.
• JavaScript 비활성화 시 사용 가능 : JavaScript가 비활성화된 브라우저에서도 내용을 볼 수 있다.

[ 단점 ]

• 서버 측 부하 : 서버에서 페이지를 렌더링해야 하므로 서버에 부하가 발생할 수 있다.
• 페이지 간 전환 속도 : 페이지 간 전환 시 추가적인 서버 요청이 필요하여 CSR보다 전환 속도가 느릴 수 있다.

제일 큰 장점은 React 기반이라는 것 같다. 그러다 보니 React 를 사용해봤다면 쉽게 입문할 수 있고, 금방 적응하고 작업할 수 있다.

그리고 요즘 SSR 유행하니, NextJS 가 어떤 장점을 가지고 있는지 정도는 알아두면 나중에 큰 도움이 될 것같다.

나는 SEO 때문에 SSR 방식의 NextJS 를 이용해 개발을 하고있다. 아무래도 요즘엔 SEO 가 중요한 것 같아서 SSR 로 개발하는 경우가 많다고 한다.

내가 아는 대기업에 다니시는 분들도 많은 분들이 SEO 를 강조하고 있다고 하니, 장단점을을 기억해두자 !!