서버 측 렌더링에 대한 마케터 가이드
게시 됨: 2021-07-26프로그래밍 언어는 이해하기 쉬운 개념이 아닙니다. 특히 SEO 작업이 주로 비기술적 측면에 초점을 맞춘 경우에는 더욱 그렇습니다. 그러나 여기에 기술적 SEO에 대한 것이 있습니다. 이에 대한 지식은 더 나은 검색 엔진 순위를 위해 웹사이트가 변경해야 하는 사항을 이해하는 데 도움이 됩니다.
Google이 페이지 경험 업데이트의 일부인 Core Web Vitals를 6월에 출시함에 따라 기술적 SEO를 자세히 살펴보지 않은 모든 마케터는 지금 그렇게 하기를 원할 것입니다.
웹 사이트가 JavaScript 프레임워크를 기반으로 구축된 경우 파고들어야 할 부분 중 하나는 서버 측 렌더링입니다.
서버 측 렌더링이란 무엇입니까?
서버 측 렌더링은 웹 페이지를 검색하고, 코드를 가져오고, 화면에 내용을 표시하는 프로세스입니다. 이 모든 것이 서버에서 발생합니다.
SSR에서:
- 서버는 렌더링 준비가 된 응답을 브라우저에 보냅니다.
- 브라우저는 페이지를 렌더링하여 볼 수 있도록 만든 다음 브라우저에서 JavaScript를 다운로드합니다.
- 그런 다음 브라우저는 페이지를 볼 준비가 되었을 때 React를 실행하고,
- 그러면 웹 페이지가 상호 작용할 준비가 됩니다.
모든 일이 일어나는 방식은 다른 유형의 렌더링에 더 나은 옵션이 되었습니다: 클라이언트 측 렌더링(JavaScript가 브라우저에 의해 렌더링되는 곳, 일명 클라이언트) 및 동적 렌더링(사용자가 클라이언트-서버에서 렌더링된 콘텐츠 및 검색 엔진을 가져오는 곳) 서버 측 렌더링된 콘텐츠 가져오기). Google조차도 웹 개발자가 서버 측 렌더링을 선택하도록 권장합니다.
왜요?
[사례 연구] Google의 봇 크롤링 관리
사례 연구 읽기SSR의 장점
- 사용자의 인터넷 연결이 느릴 때 웹 페이지를 로드하는 데 도움이 됩니다.
- 페이지를 빠르게 로드하여 더 나은 사용자 경험에 기여합니다.
- 전체 HTML 페이지를 생성하여 시간이 많이 소요되는 데이터 가져오기 프로세스를 방지합니다.
- 사용자가 구세대 스마트폰과 같이 전력이 부족한 기기를 가지고 있는 경우에도 모든 요소와 함께 페이지를 로드할 수 있습니다.
- 검색 엔진이 페이지를 정확하게 크롤링하고 인덱싱할 수 있기 때문에 SEO 성능에 기여합니다. 봇은 JS를 이해하기 때문에 페이지를 쉽게 크롤링할 수 있습니다.
전반적으로 SSR은 사이트 방문자가 페이지가 기기에 표시될 때까지 기다리지 않기 때문에 온라인 고객에게 더 나은 서비스를 제공하는 데 도움이 됩니다. 또한 신속한 페이지 전환은 사용자가 빈 페이지를 얻지 않도록 하여 즉시 사이트를 사용할 수 있도록 합니다.
Google은 사용자 경험을 중심으로 구축된 알고리즘 개선으로 보다 정확한 결과를 제공하기 위해 캠페인을 강화하고 있으므로 SSR은 클라이언트-서버 렌더링에 비해 SEO 성능에 더 좋습니다.
그러나 디지털 마케팅의 다른 모든 것과 마찬가지로 단일 접근 방식이 모든 사람에게 효과가 있는 경우는 드뭅니다. 어떤 경우에는 서버 측 렌더링이 문제가 될 수 있습니다. Google이 말했듯이 SSR 은 "은빛 총알이 아닙니다."
SSR의 단점
- 동일한 애플리케이션을 두 번(클라이언트에서 한 번, 서버에서 한 번) 수행하기 때문에 많은 작업이 필요합니다.
- 첫 번째 바이트까지 시간이 지연될 수 있습니다.
- 타사 JS(예: 사용자 생성 콘텐츠, 제품 리뷰 등) 또는 정적 HTML에 없는 콘텐츠를 렌더링할 수 없으므로 내부 링크 또는 페이지 품질에 영향을 미칠 수 있습니다. 봇은 그들을 볼 수 없습니다
- URL이 업데이트되지 않으면 봇이 새 기사를 볼 수 없어 트래픽이 누락될 수 있습니다.
SSR의 또 다른 주요 측면은 렌더링이 서버에서 발생하기 때문에 비즈니스 비용을 의미한다는 것입니다. 그러나 이러한 유형의 렌더링이 핵심 성능 최적화에 기여할 수 있기 때문에 투자할 수 있는 비용입니다.
SSR이 CWV와 관련된 이유는 무엇입니까?
웹 개발자와 SEO는 CWV 출시를 기대하며 몇 달 동안 작업했습니다. 설문 조사에 응한 SEO 대행사의 약 60%가 고객의 CWV 점수를 개선하는 데 바빴습니다. SSR을 사용하는 경우 기대치를 충족하기 위해 상당한 작업을 수행하지 않아도 됩니다.
SSR은 속도를 촉진하기 때문에 웹사이트는 이미 메트릭 중 하나인 LCP(Large Contentful Paint)로 잘 작동할 수 있습니다.
LCP는 인지된 로딩 경험에 중점을 둡니다. 웹 페이지의 가장 큰 이미지나 텍스트가 뷰포트에 표시될 때 페이지 로드 시간을 측정합니다. 좋은 점수를 얻기 위해 목표로 하는 것은 2.5초 미만에서 75% 페이지 로드입니다.
좋은 LCP를 얻기 위한 주요 과제는 JS 및 CSS를 렌더링 차단하는 것입니다. 느린 리소스 로드 시간, 느린 서버 응답 및 클라이언트 측 렌더링.
SSR로의 전환은 문제가 CSR에 국한되지 않을 수 있으므로 LCP 점수를 개선하기 위한 한 가지 솔루션일 뿐입니다. 웹 개발자와 협력하여 먼저 LCP가 지연되는 원인을 식별하는 것이 좋습니다.
페이지 소스가 의미가 없는 코드를 드러내면(개발자가 알려줄 것입니다), 문제는 CSR일 수 있습니다. 개발자가 TTFB가 좋지 않음을 발견하면 느린 서버 응답 시간을 처리할 수 있습니다.
다른 CWV 메트릭은 다음과 같습니다.
- 응답성에 중점을 둔 First Input Delay,
- 시각적 안정성에 중점을 둔 누적 레이아웃 전환.
둘 다 SSR과 관련이 없으므로 SSR이 부분적으로 LCP를 처리하므로 더 많은 노력을 기울여야 할 메트릭입니다.
SSR이 웹 페이지를 올바르게 렌더링하는지 확인하는 방법
SSR이 페이지를 올바르게 렌더링하는지 여부를 확인하는 가장 좋은 방법은 도구를 사용하는 것입니다. 그 중 하나가 모바일 친화성 테스트입니다. 웹페이지가 Googlebot에 어떻게 표시되는지에 대한 스냅샷을 제공하고 렌더링 중 오류가 있는 경우 이를 표시하는 도구입니다.
Google Search Console에는 검색 엔진이 페이지를 렌더링하는지 여부를 확인할 수 있는 URL 검사 도구도 있습니다. 차단된 JavaScript 또는 CSS와 관련된 누락된 콘텐츠 또는 오류를 확인하는 데 사용합니다.
무료 Chrome 확장 프로그램인 View Render Source로 이동할 수도 있습니다. 브라우저가 원래 HTML에서 작동하는 DOM으로 페이지를 렌더링하는 방법을 알려줍니다. 이 확장은 JS가 렌더링 시 페이지를 수정한 방법에 대한 하이라이트와 함께 원시 버전과 렌더링된 버전의 차이점을 보여줍니다.
시도할 또 다른 Chrome 확장 프로그램은 SiteCrawler입니다. JS 지원 크롤러는 사이트맵, 링크 및 이미지를 크롤링하고 HTML 전용 페이지와 JS 지원 페이지를 비교합니다.
마무리
대부분의 SEO 작업에는 클라이언트나 브라우저에 이미 "전달"된 페이지에 대한 최적화가 포함됩니다. 그러나 해당 페이지가 클라이언트에 "가져오는" 방법과 그 방법을 개선할 수 있는 방법을 조사하면 사용자는 웹사이트에서 더 나은 시간을 보낼 수 있습니다.
봇은 페이지를 올바르게 크롤링합니다. 페이지의 색인이 생성됩니다. 귀하의 사이트는 더 나은 검색 엔진 순위를 가지고 있습니다.
소비자 행동의 변화와 함께 검색 엔진 업데이트는 웹사이트에도 변화를 요구합니다. CWV의 곧 출시될 예정인 지금은 SEO 노력에 영향을 미칠 기술적인 측면인 SSR을 살펴보기에 좋은 시기입니다.