원래는 React 개발을 하고 있었는데 페이지별로 공유했을 때 META TAG 가 변경돼게 하고 싶었다.
이게 React 같은 경우에는 CSR 이라 안돼고, 그렇게 하고싶으면 NextJS SSR 를 이용해야 한다고 했다.
이때부터 내가 NextJS 개발을 이어하게 되는 계기가 되었다. 그리고 애초에 요즘에는 SSR 개발이 유행한다고 하더라. ( 뇌피셜임 )
그래서 간단하게 CSR 과 SSR 의 차이를 알아보자.
[ 그전에 React 의 강점을 살펴보고 싶으면 ? ]
[ReactJS] ReactJS 가 인기가 많은 이유
😢 내가 겪은 문제 나는 원래 Spring JAVA 개발을 했다. 짝꿍인 jQuery 와 함께 웹 프론트 개발을 처음 시작했었다. 대한민국은 자바 공화국이라 스프링만 할줄 알아도 밥굶을일은 없다고 들었다. 근
8735.tistory.com
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 를 강조하고 있다고 하니, 장단점을을 기억해두자 !!
'IT' 카테고리의 다른 글
| [IT] Tree Shaking ? webPack ? (1) | 2023.10.26 |
|---|---|
| [IT] 프라미스(Promise) 란 ? ( async / await ) (0) | 2023.09.04 |
| [IT] Png to favicon 이미지 파비콘으로 만드는 사이트 추천 (0) | 2023.08.22 |
| [IT] Image ReSize 해주는 아주 좋은 무료 사이트 (0) | 2023.08.21 |
| [IT] UDP • TCP • IP 는 무엇이고 차이점은 무엇일까 ? (0) | 2023.08.08 |