😢 내가 겪은 문제
원래는 작년까지만 해도 ReactJS 개발을 했었다. 하지만 SEO 의 중요함을 깨닫고 SSR 개발을 진행하려고 했다.
그중 React 기반의 NextJS 를 알게 돼었고, 지금까지 NextJS 개발을 이어오고 있다.
요즘엔 SEO 의 중요성이 강조되면서 같이 SSR 프레임워크가 인기가 같이 높아지고있다고 한다.
그래서 SSR 의 인기가 많아지는 이유를 여러 방면에서 살펴 보려고 한다. 다음과 같은 이유가 있다고 한다.
SEO (Search Engine Optimization) 개선 : 검색 엔진은 페이지의 내용을 수집하고 인덱싱하는데 HTML 내용을 기반으로 작업한다. CSR (Client-Side Rendering)의 경우 초기 로딩 시에는 빈 페이지가 보여지고 JavaScript가 실행된 후에 내용이 동적으로 채워지므로 검색 엔진의 크롤러가 내용을 잘 수집하지 못하는 경우가 있다. 하지만 SSR을 사용하면 서버에서 렌더링된 HTML을 제공하기 때문에 검색 엔진이 내용을 쉽게 수집할 수 있게 된다.
초기 로딩 속도 개선 : CSR은 초기에 필요한 JavaScript 및 리소스를 다운로드하고 실행해야 하므로 초기 로딩 속도가 느릴 수 있다.
SSR은 서버에서 초기 페이지 렌더링을 수행하기 때문에 사용자가 더 빠르게 내용을 볼 수 있다.
사용자 경험 향상 : 빠른 초기 로딩과 함께 사용자가 빈 화면을 보는 대신 콘텐츠가 빠르게 표시되므로 사용자 경험이 향상된다.
JavaScript 비활성화 대응 : 일부 사용자는 보안이나 개인정보 보호를 위해 JavaScript를 비활성화시키는 경우가 있다.
SSR은 이러한 사용자들도 페이지의 내용을 볼 수 있도록 도와줍니다.
성능 및 네트워크 부하 감소 : CSR의 경우 브라우저에서 JavaScript를 실행하는 과정이 필요하므로 브라우저 성능에 영향을 줄 수 있다.
또한 서버 사이드에서 렌더링을 수행하면 브라우저와 서버 간의 데이터 전송 양이 줄어들어 네트워크 부하도 감소시킨다.
근데 요즘에는 컴퓨터 성능이 너무 뛰어나서 네트워크 부하는 유저가 체감할 정도의 차이는 없다고 개인적으로 생각한다.
CSR 도 좋지만, 나는 결국 SEO 대응하기 위해서 NextJS 가 아니더라도 SSR 프레임워크를 이용해야 한다고 생각한다.
'Javascript > Next' 카테고리의 다른 글
| [NextJS] NextJS 모바일 시스템공유 하는방법 (0) | 2023.08.17 |
|---|---|
| [NextJS] 이미지 다운로드 하는 방법 (0) | 2023.08.17 |
| [NextJS] Syled-components props 전달 하는 방법 (0) | 2023.08.16 |
| [NextJS] NextJS Typescript 프로젝트 생성 (0) | 2023.08.14 |
| [NextJS] NextJS 에 티처블 머신(Teachable Machine) 붙이기 (0) | 2023.08.09 |