워밍업 클럽 4기 프론트엔드 미션2 - 웹 렌더링의 다양한 방식

안녕하세요! 저는 짐코딩님의 'Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI)' 강의를 수강 중인 인프런 워밍업 클럽 4기 참여자입니다. 이번 스터디 과제로 웹 렌더링의 다양한 방식에 대해 정리하면서 궁금했던 SEO까지 정리를 해보았습니다.

웹 렌더링의 다양한 방식 이해하기: CSR, SSR, SPA, SSG, ISR

**웹 렌더링이란?**

웹 페이지의 HTML 콘텐츠를 최종적으로 만들어내는 과정으로

누가(서버/클라이언트) HTML을 만들고,

언제 HTML이 만들어지고,

어디서(서버/클라이언트) 데이터가 HTML이 통합되는지에따라 몇가지 방식이 있다.

1. SPA (Single Page Application)

한 페이지에 처음에 한 번 HTML, JS, CSS를 로드하고 이후에는 페이지 이동 없이 필요한 데이터만 받아서 렌더링

• 대부분 CSR 방식 사용해서 구현됨, Gmail, Facebook, Twitter, Trello 같은 서비스

• 장점:

   

  • 사용자 경험이 부드럽고 앱처럼 동작(새로고침 x)

  • 필요한 데이터만 요청해서 서버와 통신량 줄일 수 있음

  • 프론트엔드 개발자와 백엔드 개발자가 독립적으로 일할 수 있음

• 단점:

  • 초기 로딩 느림 (CSR일 경우)

  • SEO 대응이 어렵다 (CSR만 쓰면)

  • 여러 화면 상태를 관리하는 것이 복잡할 수 있음

MPA (Multi Page Application)

페이지마다 HTML이 분리되어 있는 고전적인 웹사이트 구조

1. SPA는 클라이언트 중심 구조

URL은 바뀌지만 페이지 전체가 새로고침 되지 않음

실제로는 JS로 필요한 부분만 바뀜

렌더링 방식:

• 기본은 CSR

• 최근에는 Next.js, Remix 등을 통해 SSR/SSG/ISR도 SPA 안에서 사용 가능

2. MPA는 서버 중심 구조

• 각 URL마다 서버에서 완전히 다른 HTML 페이지를 생성

• 렌더링 방식은 거의 항상 SSR (서버 템플릿)

(ex: /profile을 누르면 서버가 HTML을 새로 만들어서 보내줌)

2. CSR (Client Side Rendering)

모든 렌더링을 브라우저에서 처리 (HTML은 <div id="root"></div>만 있고, 나머지는 JS로 만듦)

• 서버가 거의 비어있는 HTML 파일과 소스(JavaScript 번들)를 제공하면 브라우저에서 JS를 다운로드하고 실행해서 렌더링 함

• 장점:

  • 한 번 로딩 된 후에는 페이지 전환이 부드러움(새로고침 발생 x)

  • 서버에 자주 요청하지 않으니 서버 부담이 적음

  • 클릭, 드래그 같은 다양한 상호작용이 빠르고 부드러움(JS 로딩 후 렌더)

• 단점:

  • 초기 화면이 늦게 나옴 (JS 로딩 후 렌더)

  • 검색엔진에 약함

  • JS가 꺼져있는 환경에서는 렌더링이 안 됨

3. SSR (Server Side Rendering)

서버에서 완성된 HTML을 만들어 클라이언트에 전달

• 페이지 접근시 서버가 요청을 받아서 HTML 내용을 완성해서 브라우저에 보내줘서 렌더링하고 JS를 로드해 버튼 클릭 기능 추가(하이드레이션)

• 장점:

  • 초기 로딩 빠름

  • SEO에 강함(완성된 HTML 렌더)

  • JavaScript가 꺼져 있어도 내용 볼 수 있음

• 단점:

  • 요청마다 서버 렌더링 → 서버 부담 증가

  • 페이지 이동시 새로고침 -> 깜빡임

  • 서버에서 클라이언틀로 보내는 데이터 양이 많아짐

4. SSG (Static Site Generation)

빌드할 때 미리 HTML을 만들어 배포 (정적 페이지)

• 웹사이트 빌드시 모든 페이지의 HTML을 미리 만들어 CDN 같은 곳이 올려놓고 사용자 접속시 이 HTML을 바로 보내주고 렌더링후 JS 로드해 버튼 같은 기능 활성화

• 장점:

  • 속도 매우 빠름 (CDN으로 배포 가능)

  • 서버 없이 배포 가능(해킹 위험 적음, 서버 비용 저렴)

  • 검색엔진이 매우 강함

• 단점:

  • 데이터가 자주 바뀌는 페이지에는 부적합(매번 빌드해야 함)

  • 사용자마다 다른 내용 보여주기 어려움

  • 모든 페이지를 미리 빌드해야 하므로 페이지 수가 많으면 느림

5. ISR (Incremental Static Regeneration)

SSG를 일정 간격으로 서버에서 재생성

• 빌드시 HTML을 미리 만들고 개발자가 설정한 시간이 지나면 새 페이지를 생성하는 동안 기존 페이지 보여주다가 완료하면 새 페이지 보여줌

• 장점:

  • SSG처럼 빠르면서도 최신성 유지 가능

  • 트래픽이 많고 데이터가 자주 바뀌는 서비스에 적합

  • 변경된 페이지만 다시 생성하므로 전체 사이트 다시 빌드 안해도 됨

• 단점:

  • 완전히 실시간으로 반영되진 않음

  • Next.js에 의존

언제 어떤 걸 써야 할까?

정리

렌더링 방식 요약

SEO에 대해 알아보기

SEO란?

검색엔진이 해당 페이지를 얼마나 잘 인식하고, 색인하고, 순위에 반영할 수 있느냐에 대한 기술적 차이

SEO에 강하다는 건?

검색엔진 최적화(SEO)에 강하다 = 검색엔진(예: 구글, 네이버 등)이

웹페이지의 내용을 빠르고 정확하게 색인(indexing) 할 수 있고, 검색 결과에서 상위 노출되기 좋은 구조라는 뜻이다.

검색엔진이 페이지를 인식하는 과정

• 크롤링(Crawling): 검색엔진 로봇이 사이트를 방문해 페이지 구조와 콘텐츠를 수집

• 렌더링(Rendering): 수집한 HTML, JS, CSS를 실제로 브라우저에서 보는 형태로 해석

• 색인(Indexing): 콘텐츠를 분석해 검색DB에 등록

• 랭킹(Ranking): 검색어와 관련된 페이지들을 평가해서 순서를 정함

👉 이 중 렌더링과 색인 단계에서 문제가 생기면 SEO가 약해짐

렌더링 방식에 따른 SEO 영향

1. SSR (서버 사이드 렌더링) 🔥 SEO에 강함

• HTML을 서버에서 미리 만들어 보냄 → 검색봇이 즉시 콘텐츠 확인 가능

• 메타태그, OG 태그, 구조화 데이터 모두 즉시 제공 가능

2. CSR (클라이언트 사이드 렌더링) 🔥 SEO에 약함

• HTML에는 <div id="root"></div> 만 있음 → 실제 콘텐츠는 JS 실행 후 생성됨

• 검색봇이 JS를 실행하지 않으면 콘텐츠를 못봄

• 검색에 안 잡히거나, 검색 결과에 제목/내용 없음

• 구글은 JS 실행이 가능하긴 하지만 렌더링 비용이 크고, 늦게 색인됨 → 여전히 SEO에 불리함

(구글: "If you care about SEO, don’t rely only on client-side rendering.")

3. SSG (Static Site Generation) 🔥 SEO에 매우 강함

• HTML이 정적으로 존재함 → 검색봇이 빠르게 인식 가능

• 속도도 빠르고 콘텐츠도 완전한 상태

4. ISR (Incremental Static Regeneration) 🔥 SEO에 강함 (SSG 수준)

• - HTML이 정적으로 존재 + 주기적으로 갱신됨

추가 SEO에 영향을 주는 요소

• <title>, <meta name="description"> 등 메타태그 유무

• <h1>, <p>, <a> 등 의미 있는 HTML 구조

• 페이지 로딩 속도 (Core Web Vitals)

• 모바일 최적화 여부

• 중복 콘텐츠 및 링크 구조

• sitemap.xml, robots.txt

➡ CSR에서는 이걸 JS로 렌더링하기 때문에, 검색엔진이 실행을 못하면 아예 안 보임

검색엔진 로봇이 사이트를 수집하는 방식

구글: Googlebot

네이버: Yeti

Bing: Bingbot

1. 🕒 언제 방문하나요? (크롤링 타이밍)

검색봇이 사이트를 방문하는 시점은 다음과 같이 결정됨:

⏱ 인기 있는 사이트는 몇 분~수 시간마다,

소규모 개인 블로그는 수일~수주 간격으로 방문할 수 있음.

2. 🛠 어떻게 수집하나요? (크롤링 & 렌더링 방식)

🔹 1단계: 크롤링 (Crawling)

• HTML, CSS, JS 등의 리소스 파일을 요청

• <a href="...">, sitemap.xml 등으로 링크를 따라 이동

🔹 2단계: 렌더링 (Rendering)

• JS 실행 → 실제 페이지 내용을 브라우저처럼 구성

• DOM 생성 → 콘텐츠 수집 가능 여부 판단

📌 CSR 페이지는 이 렌더링 과정이 없으면 "빈 페이지"로 인식됨.

🔹 3단계: 색인 (Indexing)

• 수집된 콘텐츠를 분석하여 검색 데이터베이스에 저장

• 문서의 주제, 키워드, 제목, 링크, 이미지 등을 평가

3. 🔍 크롤링 방식 예시

✅ 정적 페이지 (SSG, SSR)

<!-- HTML 파일 -->
<html>
  <head>
    <title>강아지 입양 정보</title>
    <meta name="description" content="귀여운 강아지들을 소개합니다.">
  </head>
  <body>
    <h1>푸들, 시츄, 리트리버</h1>
  </body>
</html>

→ Googlebot: HTML 바로 수집 → 색인 가능

❌ 클라이언트 사이드 렌더링 (CSR)

<!-- 초기 HTML -->
<html>
  <body>
    <div id="root"></div> <!-- 비어 있음 -->
    <script src="bundle.js"></script>
  </body>
</html>

Googlebot은 JS도 실행하긴 하지만:

렌더링 비용이 크고

실패할 확률도 있으며

느리게 색인됨 (며칠~몇 주 지연될 수 있음)

4. 📁 크롤링 제어 도구들

정리