프론트엔드 앱 구조 (Architecture)

본문 이미지 1

  1. SPA (Single Page Application)

    • 최초에 하나의 HTML만 받고, 이후 라우팅은 클라이언트 측에서 처리

    • 페이지 이동시 새로고침 X → JS로 URL 변경 + 해당 화면만 다시 그림

    • 장점: 빠른 전환, 앱 같은 UX

    • 단점: 초기 로딩 느릴 수 있음, SEO 불리

    • React + React Router

  2. MPA (Multi Page Application)

    • 요청할 때마다 서버가 새 HTML 페이지를 내려줌

    • 페이지 전환시 새로고침 발생

    • 장점: SEO에 유리, 초기 렌더링 빠름

    • 단점: 전환 UX 느림, 서버 부담 상승

    • 전통적인 PHP, JSP, Django 기반 웹앱

렌더링 전략 (Rendering Strategy)

본문 이미지 2

  1. CSR (Client-Side Rendering)

    • 서버: 거의 빈 HTML + JS 번들 응답

    • 클라이언트: JS 실행으로 DOM 구성

    • 장점: 서버 부하 적음, 동적 인터랙션에 강함

    • 단점: 초기 로딩 지연, SEO 약함

  2. SSR (Server-Side Rendering)

    • 서버: 요청 시 HTML을 미리 그려서 반환

    • 클라이언트: 받은 HTML을 hydration(상호작용 가능 상태)

    • 장점: 초기 로딩 빠름, SEO 좋음

    • 단점: 서버 부하 큼, 구현 복잡

  3. SSG (Static Site Generation) - SSR을 변형한 정적 생성 기법

    • 빌드 시점에 HTML 파일을 미리 생성 (정적 사이트)

    • 요청시 CDN에서 바로 서빙 → 빠름

    • 장점: SEO 최적, 속도 빠름

    • 단점: 자주 변하는 데이터 반영 어려움

    • Next.js SSG 모드, Gatsby

  4. ISR (Incremental Static Regeneration) - SSR을 변형한 정적 생성 기법

    • SSG + 일정 주기로 페이지 재생성

    • 정적 사이트이면서 동시에 데이터 최신성 확보 가능

    • Next.js revalidate 옵션

아키텍처와 렌더링 방식의 관계

  1. SPA vs MPA → 앱의 구조 (페이지를 한 개로 운영할지, 여러 개로 운영할지)

  2. CSR vs SSR/SSG/ISR → 화면을 어디서, 언제 그릴지에 대한 전략

    • SPA + CSR: 전형적인 React 앱

    • SPA + SSR: Next.js App router

      • SPA는 보통 CSR과 세트처럼 쓰이지만, Next.js 덕분에 SPA + SSR/SSG/ISR도 가능

    • MPA + SSR: 전통 서버 템플릿 엔진 (PHP, JSP)

    • MPA + CSR 혼합: 각 페이지는 서버에서 내려주고, 그 안에서 React 컴포넌트가 CSR