SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유

SSR을 사용해야 하는 이유

React를 사용하다 보면 SSR이 필요하다는 생각을 하게된다. 해당 페이지를 사용자들이 검색했을때 사용자들에게 해당 페이지가 노출이 되기위해서는 구글봇이나 네이버 봇이 우리 페이지의 정보를 가져가야한다. 하지만 봇은 해당 페이지가 로드되기전에 HTML파일과 robots.txt정보만을 가져간다 CSR을 사용하면 해당 페이지가 다 나오기전에 봇이 떠나기 떄문에 해당 문제를 해결하기 위해SSR을 사용해야 한다는 결론이 나온다. 그래서 이번에 SSR에 대해 알아 보려고한다.

 

SSR을 사용하는 이유

초기 페이지 로딩 속도 향상

SSR의 주요 장점 중 하나는 초기 페이지 로드 속도를 향상시키는 기능입니다. SPA에서 클라이언트의 브라우저는 페이지를 렌더링하기 전에 JavaScript 및 CSS 파일을 다운로드하고 실행해야 합니다. 이 프로세스는 특히 느린 네트워크 또는 장치에서 대기 시간을 유발할 수 있습니다. SSR을 구현함으로써 서버는 서버 측에서 초기 페이지를 미리 렌더링하고 완전히 렌더링된 HTML을 클라이언트로 보냅니다. 이렇게 하면 브라우저가 파일을 다운로드하고 실행하는 데 필요한 시간이 최소화되어 초기 페이지 로드 속도가 훨씬 빨라집니다.

 

 

SEO 및 인덱싱 강화

검색 엔진 최적화는 웹 애플리케이션이 마땅히 받아야 할 가시성을 확보하는 데 중요합니다. SPA는 페이지 렌더링 후 콘텐츠가 JavaScript를 통해 동적으로 로드되기 때문에 초기 HTML 콘텐츠가 최소화되거나 존재하지 않기 때문에 이 영역에서 종종 문제에 직면합니다. 이는 검색 엔진 크롤러가 콘텐츠를 정확하게 인덱싱하는 것을 방해하고 SEO에 부정적인 영향을 미칠 수 있습니다. SSR은 완전히 렌더링된 HTML을 클라이언트에 전송하여 검색 엔진이 콘텐츠를 쉽게 크롤링하고 이해할 수 있도록 하여 이 문제를 해결합니다. 이렇게 하면 검색 결과에서 애플리케이션의 가시성이 크게 향상되고 SEO 노력이 향상됩니다.

 

사용자 경험 및 체감 성능 개선

SPA는 일단 로드되면 원활하고 대화형 사용자 환경을 제공하지만 초기 로드 단계에서는 체감 성능이 느려질 수 있습니다. 사용자는 JavaScript가 실행되고 페이지 콘텐츠가 렌더링될 때까지 빈 화면이나 로딩 표시기가 나타날 수 있습니다. SSR은 서버에서 볼 수 있는 콘텐츠가 있는 미리 렌더링된 페이지를 제공하여 이 문제를 해결합니다. 이를 통해 JavaScript가 다운로드되고 실행되는 동안 사용자가 무언가를 보고 상호 작용할 수 있으므로 체감 성능이 더 빨라지고 사용자 경험이 향상됩니다.