[React] 렌더링방식(CSR)과 웹 어플리케이션 구조(SPA)

웹 프론트엔드 자바스크립트 프레임워크, React

---

자바스크립트의 복잡한 생태계

 

자바스크립트 그 자체로는 프레임워크가 아닌 언어에 불과하다. 웹 개발의 목적에 따라 수많은 라이브러리와 프레임워크가 등장하게 되었고, 서로 최고라고 주장하는 다양한 기술들이 매번 새롭게 출현하고있다.

React.js도 이러한 배경에서 등장한 웹 프론트엔드 라이브러리이다. 특히, React는 프론트엔드 개발에서 매우 중요한 위치를 차지하며, 사실상 Java처럼 프론트엔드 개발에 표준처럼 사용되고 있다.

 

웹 어플리케이션 구조

시작에 앞서 이전에 포스팅한 글을 참고하자. (예전 작성 글이라 가독성이 별로 안좋아서 이 글에서 다시 정리)

https://1000sang-dev.tistory.com/13

프론트 웹 개발의 필수 개념: 자바스크립트 프레임워크부터 SSR까지

 

SPA (Single Page Application) 

SPA(Single Page Application)는 단일 페이지 어플리케이션을 의미하며, React, Vue, Angular는 대표적인 SPA를 구축하기 위한 프레임워크이다.

 

SPA의 특징

• 클라이언트 측에서 동적으로 페이지를 생성한다. 브라우저에서 자바스크립트를 사용하여 페이지 이동 없이 화면을 동적으로 업데이트 한다.
• 모바일 앱처럼 빠르고 부드러운 화면 전환을 제공하여 실시간 사용자 인터페이스가 중요한 웹 페이지에 적합하다.

SPA의 주요 장점 중 하나는 빠른 경로 전환(Fast Rout Transition)으로 URL이 바뀌더라도 서버에 새 요청을 보내지 않고 클라이언트 측에서 화면을 갱신한다. 페이지의 깜빡임 없이 부드러운 전환을 가능하게 한다.

→ 모바일 앱과 유사한 화면전환: SPA Route(SPA 라우팅) 예시 홈페이지  https://codepen.io/hejx/pen/eJKwPm

simple-single-page-application-demo

 

SPA = CSR

SPA는 Client-Side Rendering(CSR)을 사용하여 동적 웹 페이지를 생성한다. 즉, 템플릿 엔진이 서버가 아닌 웹 브라우저 측에 존재한다. 이는 서버로부터 받은 데이터를 웹 브라우저에서 해석하여 화면에 동적으로 표시한다.

 

SPA(Single-Page-Application) = CSR(Client-Side Rendering): 동적 웹 페이지 생산 주체 = 웹 브라우저

 

 

Client-Side Template Engine: 템플릿 엔진이 웹 브라우저 측에 존재

⚙️ 특징 요약

• 서버 불필요: 단순한 HTML, CSS, JS만 있으면 동작하지만, 데이터 처리를 위해 API 서버는 필요하다.
• 초기 로딩 느림: 페이지를 동적으로 생성하는 자바스크립트 파일이 크기 때문에 Initial Loading이 느려질 수 있다.
• SEO 불리함: 웹 크롤러가 동적 페이지를 수집하지 못해 SEO(Search Engine Optimization, 검색 엔진 최적화)가 어렵다.

SPA(CSR) 과 MPA(SSG 혹은 SSR) 차이

• SPA (CSR): 모든 페이지가 한 번에 로딩되며, 이후 클라이언트 측에서 페이지 전환이 이루어진다. 페이지 전환 시 서버와의 네트워크 요청이 발생하지 않아 빠른 전환이 가능하지만, 초기 로딩 속도가 느리다.
• MPA(SSR/SSG): 서버가 미리 페이지를 생성하여 전달하므로 SEO에 유리하다. 페이지를 요청할 때 마다 새로 로딩이 이루어지지만, 검색엔진에서 쉽게 데이터를 수집할 수 있다.

용어정리

SPA(Single-Page-Application, 단일 페이지 어플리케이션)  = CSR: Client-Side-Rendering

 

MPA: (Multiple Page Application, 다중 페이지 어플리케이션) = SSR: Server Side Rendering = SSG(Static Site Generation, 정적 사이트 생성)

---

Vue와 Angular는 프레임워크인데, React는 왜 라이브러리인가?

• React는 기본적을 UI 컴포넌트만을 관리하는 라이브러리다. VDOM(Virtual DOM)을 활용하여 화면을 효율적으로 렌더링하지만, 그 외의 기능(라우팅, 상태 관리 등)은 제공하지 않는다.
• SPA에 필요한 라우팅 기능이나 상태 관리 기능 등은 서드파티 라이브러리를 추가로 사용해야한다. 예를 들어 React-Router-Dom을 사용해 SPA 라우팅을 처리한다.

반변에, Vue와 Angular는 프레임워크로, 기본적으로 라우팅, 상태 관리, 데이터 바인딩 등 다양한 기능을 자체적으로 제공하며, 필요한 거의 모든 기능을 프레임워크 내부에서 처리할 수 있다.

 

SPA Routing/Navigation 이란?

SPA(Single Page Application) Routing 이란? = React-Router-Dom 은 어떤 역할을 하는가?

 

SPA 라우팅은 사용자가 URL을 변경했을 때 새 페이지를 로드하지 않고 클라이언트에서 화면을 전환하는 방식을 의미한다. 이는 네트워크 요청을 최소화하고, 부드럽고 빠른 사용자 경험을 제공한다.

• Routing은 2가지로 나뉜다 = URL에 따라 페이지가 바뀌는 방식은 2가지.
  • Hard Navigation → 네트워크 사용 = SSR, SSG 방식: `window.history`
  • SPA Navigation → 네트워크 미사용 = CSR(SPA) 방식: `navigate = useNavigate()`

Hard Navigation (SSR / SSG)

• 네트워크 요청을 통해 세 페이지를 로드하는 전통적인 방식이다. 사용자가 URL을 변경하면, 브라우저는 서버에 새로운 페이지 요청을 보내고, 서버는 그에 맞는 페이지를 반환한다.
• 브라우저 개발자 도구에서 `history.back()`을 호출하면 이전 페이지로 돌아가는 기능을 예로 들 수 있다.

SPA Navigation (CSR)

• 네트워크 요청 없이 브라우저에서 페이지 전환을 처리한다. React와 같은 프레임워크에서 라우팅 기능을 제공하는 라이브러리를 사용해, 네트워크 요청을 생략하고 페이지를 동적으로 전환한다.
• React에서는 `useNavigate()`를 사용하여 네트워크 요청 없이 페이지를 이동시킬 수 있다.

SSG / SSR / CSR 요약

• SSG(Static Site Generation, 정적 사이트 생성): 미리 정적인 HTML 파일을 생성하여 빠른 로딩과 SEO에 유리하지만 동적인 페이지 업데이트가 어렵다.
• SSR(Server Side Rendering, 서버 사이드 렌더링): 서버에서 실시간으로 페이지를 렌더링하여 SEO와 동적 데이터처리가 가능하지만, 서버에 부하가 있고 로딩 시간이 길어질 수 있다.
• CSR(Client Side Rendering, 클라이언트 사이드 렌더링): 클라이언트에서 페이지를 렌더링하여 빠른 페이지 전환이 가능하지만, 초기 로딩 속도가 느리고 SEO에 불리하다.

---

ℹ️참고

[ASAC 6기 강의자료]

https://medium.com/@mkaanaltin/mpa-spa-1a37d3cc93f4

MPA & SPA