July 10, 2025

🚀 SEO 친화적이지 않은 클라이언트 사이드 렌더링(CSR) 남용: 검색 엔진의 외면

SEO/접근성

아키텍처

렌더링전략

JavaScript

Summary

클라이언트 사이드 렌더링(CSR)만으로 웹사이트를 구축할 경우, 검색 엔진 크롤러가 JavaScript를 완전히 실행하지 못하거나 느리게 처리하여 SEO에 치명적인 영향을 줍니다. SEO에 중요한 페이지에는 SSR, SSG 또는 하이브리드 렌더링 전략을 사용하여 검색 엔진 친화적인 콘텐츠를 제공하고 사용자 경험을 개선해야 합니다.

Why Wrong?

클라이언트 사이드 렌더링(CSR)은 초기 로딩 시 빈 HTML을 제공하고 JavaScript가 실행된 후에야 콘텐츠를 동적으로 생성합니다. 이 방식은 모던 웹 애플리케이션에 유연성을 제공하지만, 검색 엔진 최적화(SEO) 측면에서는 치명적인 약점을 가집니다. 특히 Google 외의 다른 검색 엔진 크롤러들은 JavaScript를 완벽하게 실행하고 파싱하는 데 한계가 있거나, 처리 속도가 매우 느릴 수 있습니다. 이는 크롤러가 페이지의 실제 콘텐츠를 제대로 인덱싱하지 못하게 하여, 검색 결과에 노출되지 않거나 낮은 순위를 기록하게 만듭니다. 또한, 사용자가 빈 화면을 보는 시간이 길어져 Core Web Vitals(LCP, FID) 점수가 낮아지고 사용자 경험(UX)에도 부정적인 영향을 미칩니다. 소셜 미디어 플랫폼 또한 서버에서 제공되는 HTML 콘텐츠를 기반으로 미리보기를 생성하기 때문에, CSR 방식만으로는 적절한 미리보기가 나타나지 않을 수 있습니다.

How to Fix?

SEO에 민감한 페이지나 초기 로딩 속도가 중요한 페이지의 경우, 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)과 같은 렌더링 전략을 고려해야 합니다. SSR은 서버에서 미리 HTML을 생성하여 클라이언트에 보내주므로, 크롤러가 즉시 콘텐츠를 파싱할 수 있게 하고 사용자에게도 빠른 초기 화면을 제공합니다. SSG는 빌드 시점에 모든 페이지를 HTML 파일로 생성하여 CDN에 배포함으로써, 매우 빠른 응답 속도와 뛰어난 SEO 효율을 보장합니다. React 기반의 Next.js나 Vue 기반의 Nuxt.js와 같은 프레임워크는 SSR/SSG 기능을 쉽게 통합할 수 있도록 지원하며, '하이드레이션(Hydration)'을 통해 서버에서 생성된 HTML을 클라이언트 사이드에서 인터랙티브하게 만듭니다. 이를 통해 검색 엔진 친화적이면서도 풍부한 사용자 경험을 동시에 제공할 수 있습니다.

Before Code (Bad)

// src/pages/ProductList.jsx
import React, { useState, useEffect } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const response = await fetch('/api/products');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setProducts(data);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    };
    fetchProducts();
  }, []); // 빈 의존성 배열로 컴포넌트 마운트 시 한 번만 실행

  if (loading) return <div>상품 목록을 불러오는 중...</div>;
  if (error) return <div>에러 발생: {error.message}</div>;

  return (
    <div>
      <h1>🛍️ 인기 상품 목록</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            <h2>{product.name}</h2>
            <p>{product.description}</p>
            <span>가격: {product.price}원</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

// public/index.html (이 예시는 CSR의 일반적인 시작점임을 보여줌)
// <div id="root"></div>
// <script src="/src/index.js"></script> // JavaScript가 로드되고 실행되어야 콘텐츠가 보임

After Code (Good)

// pages/products/index.js (Next.js를 활용한 SSR/SSG 예시)

import React from 'react';

function ProductList({ products }) {
  // products는 이미 서버에서 데이터를 가져와 props로 전달된 상태
  return (
    <div>
      <h1>🛍️ 인기 상품 목록</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            <h2>{product.name}</h2>
            <p>{product.description}</p>
            <span>가격: {product.price}원</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

// SSR (Server-Side Rendering)
// 요청 시마다 서버에서 데이터를 가져와 페이지를 미리 렌더링
export async function getServerSideProps() {
  // 이 코드는 서버에서 실행됩니다.
  const response = await fetch('http://localhost:3000/api/products'); // 실제 API 엔드포인트
  const products = await response.json();

  return {
    props: {
      products, // props로 컴포넌트에 전달
    },
  };
}

// 또는 SSG (Static Site Generation)
// 빌드 시점에 데이터를 가져와 정적인 HTML 파일 생성 (자주 변하지 않는 데이터에 적합)
/*
export async function getStaticProps() {
  const response = await fetch('http://localhost:3000/api/products');
  const products = await response.json();

  return {
    props: {
      products,
    },
    revalidate: 60, // 60초마다 ISR(Incremental Static Regeneration) 시도
  };
}
*/

export default ProductList;

// 결과적으로 브라우저는 JS가 실행되기 전부터 완전한 HTML 콘텐츠를 받게 됩니다.
/*
<!-- 서버에서 렌더링된 HTML 예시 (Next.js 결과) -->
<body>
  <div id="__next">
    <div>
      <h1>🛍️ 인기 상품 목록</h1>
      <ul>
        <li>
          <h2>상품 1</h2>
          <p>상품 1에 대한 설명</p>
          <span>가격: 10000원</span>
        </li>
        <li>
          <h2>상품 2</h2>
          <p>상품 2에 대한 설명</p>
          <span>가격: 20000원</span>
        </li>
      </ul>
    </div>
  </div>
  <!-- 이후 Next.js의 클라이언트 측 JS가 로드되어 Hydration 진행 -->
</body>
*/

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 기본 개념과 작동 방식, 그리고 각 방식의 장단점을 명확히 이해할 수 있습니다. 이는 안티패턴의 근본적인 원인을 파악하는 데 도움이 됩니다.

https://developer.mozilla.org/en-US/docs/Glossary/Client-side_rendering

Google 검색 엔진이 JavaScript 기반 웹사이트를 어떻게 처리하는지에 대한 공식 가이드입니다. 검색 엔진 크롤링의 한계와 SEO를 개선하기 위한 실제적인 조언을 얻을 수 있습니다.

https://developers.google.com/search/docs/crawling-indexing/javascript/understand-javascript-seo-basics?hl=ko