현대 웹 개발에서 React의 확산이 증가하는 것은 무시할 수 없습니다. React 및 기타 유사한 라이브러리(예: Vue.js)는 보다 단순한 접근 방식(예: WordPress 테마 사용)으로는 요구 사항을 충족할 수 없는 복잡한 개발이 필요한 대규모 비즈니스를 위한 사실상의 선택이 되고 있습니다.
그럼에도 불구하고 SEO는 처음에는 React와 같은 라이브러리를 수용하지 않았습니다. 검색 엔진이 JavaScript를 효과적으로 렌더링하는 데 어려움을 겪고 HTML 소스 내에서 사용 가능한 콘텐츠가 선호되기 때문입니다. 그러나 Google과 React가 JavaScript를 렌더링하는 방법이 개발되면서 이러한 복잡성이 단순화되어 SEO가 더 이상 React 사용을 방해하지 않게 되었습니다. 하지만 여전히 몇 가지 복잡성이 남아 있는데, 이 가이드에서 이에 대해 살펴보겠습니다.
React란 무엇일까요?
React는 웹 및 모바일 애플리케이션 구축을 위해 Meta(이전 Facebook)에서 개발한 오픈 소스 JavaScript 라이브러리입니다. React의 주요 특징은 선언적이고, 컴포넌트 기반이며, DOM을 더 쉽게 조작할 수 있다는 것입니다.
구성요소를 이해하는 가장 간단한 방법은 구성요소를 WordPress와 같은 플러그인으로 생각하는 것입니다. 이를 통해 개발자는 MUI 또는 Tailwind UI와 같은 구성 요소 라이브러리를 사용하여 신속하게 디자인을 구축하고 페이지에 기능을 추가할 수 있습니다.
React를 사용한 렌더링, 짧은 역사
React는 앱 셸 모델을 구현합니다. 즉, 전부는 아니더라도 대부분의 콘텐츠가 기본적으로 클라이언트 측 렌더링(CSR)됩니다. CSR은 서버(HTML 소스)의 초기 HTTP 응답 내에서 전체 페이지의 콘텐츠를 보내는 서버가 아닌 HTML에 기본적으로 React JS 라이브러리가 포함되어 있음을 의미합니다.
또한 JSON 데이터가 포함된 기타 JavaScript나 React 구성 요소가 포함된 JS 파일에 대한 링크도 포함됩니다. HTML 소스를 확인하면 사이트가 클라이언트 측에서 렌더링되었는지 빠르게 알 수 있습니다. 그렇게 하려면 마우스 오른쪽 버튼을 클릭하고 “페이지 소스 보기”(또는 CTRL + U/CMD + U)를 선택하세요.
HTML 줄이 많이 표시되지 않으면 응용 프로그램이 클라이언트 측 렌더링일 가능성이 높습니다. 그러나 마우스 오른쪽 버튼을 클릭하고 "요소 검사"(또는 F12/CMD + ⌥ + I)를 선택하여 요소를 검사하면 브라우저에서 생성된 DOM(브라우저가 JavaScript를 렌더링한 위치)을 볼 수 있습니다. 결과적으로 사이트에 HTML이 많이 포함되어 있는 것을 볼 수 있습니다.
첫 번째의 appMountPoint ID를 기록해 두세요. 단일 페이지 애플리케이션(SPA)에서 이와 같은 요소를 흔히 볼 수 있으므로 React와 같은 라이브러리는 HTML을 어디에 삽입해야 하는지 알고 있습니다. Wappalyzer와 같은 기술 감지 도구도 라이브러리 감지에 탁월합니다. React를 사용하여 만든 웹 사이트는 서버 측 렌더링(SSR)이라고 불리는 PHP와 같은 언어를 사용하여 서버에 컨텐츠 렌더링의 무거운 작업을 맡기는 보다 전통적인 접근 방식과 다릅니다.
SSR 이전에 개발자들은 이를 더욱 단순하게 유지했습니다. 그들은 변경되지 않는 정적 HTML 문서를 만들어 서버에서 호스팅한 다음 즉시 보냅니다. 서버는 아무것도 렌더링할 필요가 없었고, 브라우저는 렌더링할 것이 거의 없었습니다. SPA(React를 사용하는 SPA 포함)는 이제 이 정적 접근 방식으로 다시 돌아오고 있습니다. 이제 브라우저가 URL을 요청하기 전에 JavaScript를 HTML로 사전 렌더링하고 있습니다. 이 접근 방식을 정적 사이트 생성(SSG)이라고 하며 정적 렌더링이라고도 합니다.
실제로 SSR과 SSG는 유사합니다. 주요 차이점은 브라우저가 URL을 요청할 때 SSR을 사용하는 경우와 SSG를 사용하여 빌드 시 콘텐츠를 사전 렌더링하는 프레임워크를 사용하는 경우 발생한다는 것입니다. SSR은 더 동적이지만 서버가 사용자의 브라우저에 콘텐츠를 보내기 전에 콘텐츠를 렌더링하는 동안 추가 대기 시간으로 인해 속도가 느려질 수 있습니다. SSG는 콘텐츠가 이미 렌더링되었기 때문에 더 빠릅니다. 즉, 사용자에게 즉시 제공될 수 있습니다.
Google이 페이지를 처리하는 방법
React의 기본 클라이언트 측 렌더링 접근 방식이 SEO 문제를 일으키는 이유를 이해하려면 먼저 Google이 페이지를 크롤링하고, 처리하고, 색인을 생성하는 방법을 알아야 합니다.
역사적으로 React 및 기타 JS 라이브러리의 문제는 Google이 렌더링 단계를 제대로 처리하지 못했기 때문에 발생했습니다. 몇 가지 예는 다음과 같습니다.
- JavaScript를 렌더링하지 않음 – 오래된 문제이지만 Google은 2008년에 제한된 방식으로만 JavaScript 렌더링을 시작했습니다. 그러나 여전히 2009년에 생성된 JavaScript 사이트에 대한 크롤링 체계에 의존했습니다. (Google은 이후 이 체계를 더 이상 사용하지 않습니다.)
- 렌더링 엔진(Chromium)이 최신 버전이 아님 - 이로 인해 최신 브라우저 및 JavaScript 기능에 대한 지원이 부족해졌습니다. Googlebot이 지원하지 않는 자바스크립트 기능을 사용한 경우 페이지가 올바르게 렌더링되지 않아 콘텐츠 색인 생성에 부정적인 영향을 미칠 수 있습니다.
- Google의 렌더링 지연 – 경우에 따라 이는 최대 몇 주가 지연되어 콘텐츠 변경 사항이 색인 생성 단계에 도달하는 시간이 느려질 수 있음을 의미합니다. 이는 대부분의 사이트에 대한 콘텐츠를 렌더링하기 위해 Google에 의존하는 것을 배제했을 것입니다.
다행히도 Google은 이제 이러한 문제의 대부분을 해결했습니다. Googlebot은 이제 상시 지원됩니다. 즉, 항상 Chromium의 최신 기능을 지원합니다.
React의 일반적인 SEO 문제
지난 5년 동안 Google은 JavaScript 콘텐츠 처리 방식을 혁신해 왔지만 완전히 클라이언트 측에서 렌더링된 사이트에는 고려해야 할 다른 문제가 발생했습니다. React와 SEO로 모든 문제를 극복할 수 있다는 점에 유의하는 것이 중요합니다. React JS는 개발 도구입니다. React는 WordPress 플러그인이든 선택한 CDN이든 개발 스택 내의 다른 도구와 다르지 않습니다. 이를 구성하는 방법에 따라 SEO가 저하되거나 향상되는지가 결정됩니다. 궁극적으로 React는 사용자 경험을 향상시키기 때문에 SEO에 좋습니다.
마치며
불행하게도 React 애플리케이션을 사용하면 기술적 SEO가 확인해야 할 이미 많은 문제가 있습니다. 하지만 Next.js와 같은 프레임워크 덕분에 SEO 작업이 이전보다 훨씬 더 간단해졌습니다. 이 가이드가 React 애플리케이션을 사용할 때 SEO로서 고려해야 할 추가 고려 사항을 더 잘 이해하는 데 도움이 되었기를 바랍니다.
함께 보면 좋은 글
SEO 키워드 : 페이지가 실제로 타겟팅 해야하는 개수(2023)
우리가 권장하는 사항은 다음과 같습니다. 하나의 기본 키워드와 주어진 주제를 전체적으로 다룰 수 있는 충분한 보조 키워드를 선택하세요. 이번 포스팅에서는 SEO 키워드를 선정할 때 페이지
sonsound1000.com