카테고리 없음

SPA와 SSR의 차이 및 통합 방식 정리

taytay 2025. 1. 9. 09:44

1. SPA (Single Page Application)

  • 특징:
    • 한 번에 모든 페이지를 하나의 JS 파일로 번들링하여 클라이언트에 전달.
    • 최초 로딩 시 시간이 오래 걸릴 수 있음.
    • 새로고침 없이 매끄럽게 페이지 전환 가능 (클라이언트 사이드 라우팅).
    • 사용자가 데이터를 요청할 때 필요한 부분만 동적으로 업데이트.
    • 장점:
      • 빠른 페이지 전환, 사용자 경험 개선.
      • 서버 요청 횟수 감소 → 서버 부하 감소.
    • 단점:
      • 초기 로딩 속도가 느림 (특히 번들 파일 크기가 클 경우).
      • SEO(검색 엔진 최적화) 문제 발생 가능 (클라이언트에서만 렌더링되기 때문).

 

2. SSR (Server Side Rendering)

  • 특징:
    • 서버에서 HTML을 렌더링한 후 클라이언트에 전달.
    • 페이지를 새로고침하면서 각 요청마다 서버가 HTML과 데이터를 렌더링.
    • 장점:
      • SEO에 유리 (검색 엔진이 완성된 HTML을 크롤링 가능).
      • 초기 로딩 속도가 빠름 (HTML이 바로 렌더링되므로).
    • 단점:
      • 서버 부하가 클 수 있음 (각 요청마다 렌더링 수행).
      • 페이지 전환 시 매끄럽지 않음 (새로고침 발생).

 

3. SPA + SSR 통합 방식 (Next.js와 같은 프레임워크)

  • 현대적 SSR:
    • SSR을 전적으로 사용하는 대신, 필요한 페이지만 SSR로 처리하고 나머지는 SPA 방식으로 동작.
    • 클라이언트에서 자주 사용하는 페이지는 SPA처럼 빠르게 전환 가능.
    • 초기 화면 로딩은 서버에서 처리(SSR) → 사용자 경험 개선.
    • 예: Next.js의 Hybrid Rendering (Static Generation + Server-Side Rendering).
  • 장점:
    • SSR로 초기 로딩 속도와 SEO 문제 해결.
    • SPA 방식의 매끄러운 전환 경험 유지.
    • 서버 부담 감소 (최적화된 데이터 요청 및 페이지 렌더링).

4. 네이버와 같은 사례

  • 전통적 SSR:
    • 네이버는 리액트를 사용하지 않고 전통적인 SSR 방식을 활용.
    • 각 페이지를 요청할 때마다 서버에서 렌더링된 HTML을 전달.
    • 장점:
      • HTML이 완성된 상태로 전달 → SEO 최적화.
      • 초기 로딩 속도가 빠름 (단순한 구조에서는 유리).
    • 단점:
      • 페이지 전환 시 새로고침 → 사용자 경험이 SPA보다 떨어질 수 있음.
      • 서버 부하가 증가할 가능성.

5. 리액트에서 페이지 전환 (useNavigate vs Link)

  • useNavigate:
    • JavaScript 코드 내부에서 프로그래밍적으로 페이지 이동을 제어.
    • 예: navigate('/signup')처럼 동작.
  • Link 컴포넌트:
    • JSX에서 링크를 렌더링할 때 사용.
    • 새로고침 없이 페이지를 이동하며, SEO와 접근성까지 고려.
    • 예: <Link to="/signup">회원가입</Link>.

결론

  • 네이버는 전통적인 SSR 방식을 사용하여 서버에서 HTML을 완전히 렌더링한 후 제공.
  • 현대 웹 개발에서는 SPA와 SSR의 장점을 결합한 Next.js와 같은 프레임워크를 통해 최적화된 사용자 경험과 성능을 제공.
  • 리액트를 사용하는 경우, SPA 방식이 기본이지만 SSR(Hydration) 방식과 병행하여 초기 로딩 속도와 SEO를 개선하는 것이 일반적.