[React] 싱글 페이지 애플리케이션(SPA): 단일 HTML 페이지 애플리케이션

📌 싱글 페이지 애플리케이션 (Single-page application, SPA)

: 단일 HTML 페이지로 구성된 웹 애플리케이션

• 처음에 한번 페이지를 로드한 후, 새로운 데이터를 요청하거나 페이지 전환을 하더라도 새로고침 없이 동적으로 필요한 데이터만 불러오는 방식
• 사용자가 페이지 사이를 이동할 때 서버에 전체 페이지를 요청하는 것이 아니라, 기존 페이지를 유지한 채 필요한 데이터만 교체
• 브라우저(클라이언트) 측에서 리액트를 사용해 사용자가 요청에 따른 페이지 컴포넌트를 렌더링하여 전통적인 웹 프로그램을 브라우저 단에서 처리할 수 있다.

• React에서 SPA를 구현할 때 주로 React Router라는 라이브러리를 사용해 라우팅을 처리
  
• AJAX 
  : 페이지를 변경하지 않고 동일한 페이지에서 오로지 자바스크립트를 통해 페이지의 내용물을 바꾸는 것
  - 페이지 전환 시 비동기적으로 데이터를 가져오고, 이 데이터를 페이지에 반영해 새로고침 없이 콘텐츠를 업데이트한다.
• URL 관리
  - SPA에서는 실제로는 페이지가 변경되지 않지만, URL을 동적으로 변경하여 사용자가 서로 다른 페이지에 있는 것처럼 보이게 할 수 있다.
  - 이때 pushState와 같은 브라우저 API를 사용해 URL을 제어합니다.

 

 

✅ SPA의 장단점

• 장점
  
  • 효율성: 필요한 영역만 부분적으로 갱신
  • 페이지 전환: 페이지 간 전환이 부드럽고 빠름
  • 사용자와의 상호작용: 사용자와의 상호작용에 반응성이 높고, 부드러운 애니메이션을 제공
• 단점
  
  • 초기 로딩 시간: 처음 페이지를 로드할 때 많은 자바스크립트 파일을 다운로드해야 하므로, 초기 로딩 속도가 느려질 수 있습니다.
  • SEO 문제: 클라이언트에서 모든 렌더링이 이루어지기 때문에, 검색 엔진 크롤러가 자바스크립트를 실행하지 못하면 페이지의 콘텐츠를 제대로 인식하지 못할 수 있습니다.

 

 

 

✅ SPA의 작동 흐름

1. 초기 로드
   : 사용자가 처음 SPA를 요청하면, 서버는 하나의 HTML 파일과 필요한 자바스크립트 파일을 전송한다.
   
2. 라우팅
   : 페이지 사이를 이동할 때, 서버는 새로운 페이지를 보내지 않고 자바스크립트로 동적으로 콘텐츠를 변경한다.
3. 데이터 요청
   : 필요할 때마다 서버에 데이터 요청을 보내고, 서버는 데이터를 응답 받는다.
   - 이때 전체 HTML이 아닌 JSON 형태로 데이터를 주고 받는다.
4. DOM 업데이트
   : 받은 데이터를 사용하여 클라이언트 측에서 DOM을 업데이트하고, 페이지가 동적으로 바뀌는 것처럼 보이게 만든다.

 

 

---

📌 클라이언트 사이드 렌더링(CSR) & 서버 사이드 렌더링(SSR)

 

✅ 클라이언트 사이드 렌더링(Client-Side Rendering, CSR)

: HTML을 서버에서 받는 대신 JavaScript가 클라이언트(브라우저)에서 실행되어 페이지의 콘텐츠를 동적으로 생성하는 방식

• 전통적인 SPA 방식 중 하나

 

 

☑️ CSR 작동 방식

• 초기 요청 시: 사용자가 웹사이트에 접속하면 서버는 HTML, CSS, 자바스크립트 등 기본 파일을 한번에 클라이언트(브라우저)로 보냅니다.
• 렌더링: 브라우저가 자바스크립트를 실행하여 웹 페이지의 구조(DOM)를 생성하고 렌더링을 담당합니다. 이때 처음 요청한 HTML 파일은 빈 껍데기일 수 있고, 자바스크립트가 실행되면서 페이지가 그려집니다.( 렌더링이 클라이언트 측에서 발생 )
• 페이지 전환: 새로운 페이지로 이동하거나 추가 데이터를 가져올 때, 브라우저는 서버와 비동기적으로 통신하여 필요한 데이터만 받아옵니다(AJAX 요청). 전체 페이지를 다시 로드하지 않고, 클라이언트 측에서 동적으로 페이지를 업데이트합니다.

 

 

☑️ CSR 장단점

• 장점
  
  • 빠른 사용자 경험
    : 초기 로드 이후 페이지 전환이 빠르고 부드러워서, 네이티브 애플리케이션과 유사한 사용자 경험을 제공
  • 네트워크 효율성
    : 필요한 데이터만 서버에서 받아오기 때문에 전체 페이지를 다시 로드하지 않아 네트워크 자원을 절약
• 단점
  
  • 초기 로딩 시간
    : 처음 페이지를 로드할 때 많은 자바스크립트 파일을 다운로드해야 하기 때문에 초기 로딩 속도가 느림
  • SEO 문제
    : 클라이언트에서 모든 렌더링이 이루어지기 때문에, 검색 엔진 크롤러가 자바스크립트를 실행하지 못하면 페이지의 콘텐츠를 제대로 인식하지 못할 수 있음

 

✅ 서버 사이드 렌더링(Server-Side Rendering, SSR)

: 서버에서 HTML을 생성한 후 클라이언트로 보내는 방식

• SPA의 SEO 문제를 해결하기 위한 대안으로 많이 사용된다.
  ➡︎ Next.js 같은 프레임워크가 지원한다.

 

 

☑️ CSR 작동 방식

• 초기 요청 시: 사용자가 페이지를 요청하면 서버에서 필요한 데이터를 받아와서 완전한 HTML 페이지를 생성한 후 클라이언트로 전송합니다.
• 렌더링: 브라우저는 서버에서 받은 완전한 HTML을 즉시 렌더링하므로, 사용자에게 빠르게 초기 콘텐츠를 제공합니다.
• 페이지 전환: 이후의 페이지 전환이나 데이터 요청은 다시 자바스크립트를 사용해 CSR 방식으로 처리될 수 있습니다. 즉, 초기 로딩은 서버에서 이루어지지만 이후에는 SPA처럼 동작합니다.

 

 

☑️ SSR 장단점

• 장점
  
  • 빠른 초기 렌더링
    : 클라이언트는 완전한 HTML을 받아 바로 렌더링할 수 있기 때문에 초기 페이지 로딩 속도가 빠름
  • SEO 친화적
    : 검색 엔진은 서버에서 이미 렌더링된 HTML 페이지를 가져가기 때문에 콘텐츠를 더 잘 인식할 수 있음
• 단점
  
  • 서버 부하 증가
    : 서버에서 매번 HTML을 생성해야 하므로 서버의 부하가 증가할 수 있음
  • 복잡성 증가
    : CSR에 비해 설정과 구조가 더 복잡하고, 서버와 클라이언트 모두에서 렌더링을 관리해야 하기 때문에 개발이 어려울 수 있음

 

---

✅ 클라이언트 사이드 렌더링(CSR)  vs  서버 사이드 렌더링 (SSR)

	클라이언트 사이드 렌더링(CSR)	서버 사이드 렌더링(SSR)
렌더링 위치	브라우저에서 자바스크립트를 통해 렌더링	서버에서 HTML을 완성한 후 클라이언트로 전송
초기 로딩 시간	느림⬇️ (큰 자바스크립트 파일을 로드해야 함)	빠름⬆️ (완전한 HTML을 받아 바로 렌더링 가능)
페이지 전환 속도	빠름⬆️ (초기 로드 이후에는 비동기적으로 데이터를 불러옴)	빠름⬆️ (초기 이후에는 SPA처럼 동작)
SEO	SEO에 불리❌ (검색 엔진 크롤러가 자바스크립트를 실행하지 않으면 어려움)	SEO에 유리⭕ (서버에서 HTML을 렌더링하기 때문)
서버 부하	서버 부하 감소⬇️	서버 부하 증가⬆️ (매 요청마다 HTML을 생성해야 하기 때문)
복잡성	간단함	복잡한 설정과 관리 필요

 

 

---

 

 

SPA란? 웹 개발 트렌드 SPA의 특징부터 구현 방법까지 모두 알려드립니다! I 이랜서 블로그

 

서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)의 비교

 

Client-side Rendering