정적 요청 vs 동적 요청

개요

정적 요청은 서버에 이미 저장된 파일을 그대로 전달하는 것이고, 동적 요청은 서버가 실시간으로 데이터를 처리하여 결과를 생성해 전달하는 것이다.

웹 서버에 들어오는 요청은 크게 두 종류로 나뉘어요. 정적(Static) 요청과 동적(Dynamic) 요청이에요.

비유를 들면 이래요: 편의점에서 이미 만들어져 있는 삼각김밥을 사는 건 정적 요청, 식당에서 주문하면 그때 요리해서 나오는 건 동적 요청이에요. 둘 다 음식을 받는 건 같지만, 과정이 완전히 다르죠!

정적 요청 vs 동적 요청 한눈에 비교

구분	정적 요청 (Static)	동적 요청 (Dynamic)
정의	미리 만들어진 파일을 그대로 전달	요청마다 서버가 실시간으로 결과 생성
처리 주체	웹 서버 단독 (Nginx, Apache)	웹 서버 + 애플리케이션 서버 (WAS)
응답 속도	매우 빠름	상대적으로 느림
서버 부하	낮음	높음
캐싱	쉬움	어려움 (데이터가 계속 변하므로)
콘텐츠 예시	HTML, CSS, JS, 이미지, 폰트	로그인 결과, 검색 결과, 게시판 글 목록
URL 예시	/images/logo.png	/api/users?id=123
비유	편의점 삼각김밥	식당 주문 요리

정적 요청 처리 흐름

sequenceDiagram
    participant 브라우저 as 👤 브라우저
    participant Nginx as 🖥️ Nginx (웹 서버)
    participant 파일 as 📁 파일 시스템

    브라우저->>Nginx: GET /index.html
    Nginx->>파일: /var/www/html/index.html 찾기
    파일-->>Nginx: 파일 내용 반환
    Nginx-->>브라우저: HTTP 200 + index.html

    Note over Nginx: 웹 서버 혼자서 처리 완료!<br/>별도 프로그램 실행 없음
Mermaid
복사

정적 요청은 정말 심플해요. 브라우저가 "이 파일 주세요!" 하면, Nginx가 파일 시스템에서 해당 파일을 찾아서 그대로 전달하면 끝이에요. 중간에 어떤 프로그램을 실행하거나 데이터베이스를 조회하거나 하는 과정이 전혀 없어요.

그래서 속도가 엄청 빠르고, 서버 부하도 거의 없어요. Nginx가 정적 파일 서빙에 특히 뛰어난 이유이기도 해요!

동적 요청 처리 흐름

sequenceDiagram
    participant 브라우저 as 👤 브라우저
    participant Nginx as 🖥️ Nginx (웹 서버)
    participant WAS as ⚙️ WAS (Spring Boot 등)
    participant DB as 🗄️ 데이터베이스

    브라우저->>Nginx: GET /api/users/123
    Nginx->>WAS: 요청 전달 (리버스 프록시)
    WAS->>DB: SELECT * FROM users WHERE id=123
    DB-->>WAS: 유저 데이터 반환
    WAS-->>Nginx: JSON 응답 생성
    Nginx-->>브라우저: HTTP 200 + JSON 데이터

    Note over Nginx,WAS: 웹 서버가 WAS에게 넘기고<br/>WAS가 DB 조회 후 응답 생성
Mermaid
복사

동적 요청은 과정이 좀 더 복잡해요. Nginx가 혼자서는 처리할 수 없고, 뒤에 있는 애플리케이션 서버(WAS)에게 일을 넘겨야 해요.

예를 들어 "123번 사용자 정보를 보여줘!"라는 요청이 오면, Nginx는 이걸 Spring Boot 같은 WAS에게 전달하고, WAS는 데이터베이스에서 123번 사용자를 조회해서, 그 결과를 JSON 형태로 만들어 Nginx를 통해 브라우저에게 보내주는 거예요.

전체 아키텍처에서의 위치

graph LR
    A[👤 브라우저] --> B[🖥️ Nginx<br/>웹 서버]

    B -->|정적 요청| C[📁 정적 파일<br/>HTML/CSS/JS/이미지]
    B -->|동적 요청| D[⚙️ WAS<br/>Spring Boot<br/>Node.js<br/>Django]
    D --> E[🗄️ Database<br/>MySQL/PostgreSQL]

    style C fill:#90EE90
    style D fill:#FFB366
    style E fill:#87CEEB
Mermaid
복사

이 구조를 보면 Nginx의 역할이 확실히 보이죠? Nginx는 교통정리 담당이에요!

•

정적 파일 요청이 오면 → 직접 파일을 찾아서 전달 (초록색 경로)

•

동적 요청이 오면 → WAS에게 넘기고 결과를 받아서 전달 (주황색 경로)

이렇게 Nginx가 앞단에서 요청을 분류해주는 역할을 리버스 프록시(Reverse Proxy)라고 해요. 이건 나중에 더 자세히 배울 거예요!

정적 파일의 종류

파일 유형	확장자	역할	Content-Type
HTML	.html	페이지 구조	text/html
CSS	.css	스타일, 디자인	text/css
JavaScript	.js	동적 기능	application/javascript
이미지	.png, .jpg, .gif, .webp	시각 자료	image/png 등
폰트	.woff, .woff2, .ttf	글꼴	font/woff2 등
동영상	.mp4, .webm	미디어	video/mp4
JSON 파일	.json	설정, 데이터	application/json
파비콘	favicon.ico	탭 아이콘	image/x-icon

여기서 주의할 점! JavaScript 파일(.js)은 정적 파일이에요. "JavaScript가 동적 언어 아닌가요?"라고 생각할 수 있는데, 서버 입장에서는 .js 파일 자체는 이미 만들어져 있는 파일이라 그대로 전달만 하면 돼요. 그 JS 파일이 브라우저에서 실행되면서 동적인 동작을 하는 거지, 서버가 동적으로 생성하는 건 아니거든요!

Nginx 설정 예시

server {
    listen 80;
    server_name example.com;

    # 정적 파일 처리 - Nginx가 직접 처리
    location / {
        root /var/www/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 정적 리소스 - 캐싱 적용
    location ~* \\.(css|js|png|jpg|gif|ico|woff2)$ {
        root /var/www/html;
        expires 30d;                    # 30일간 캐싱
        add_header Cache-Control "public, immutable";
    }

    # 동적 요청 - WAS로 전달 (리버스 프록시)
    location /api/ {
        proxy_pass <http://localhost:8080>;  # Spring Boot 서버
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
Plain Text
복사

이 설정을 보면, Nginx가 URL 경로에 따라 요청을 다르게 처리하는 게 보이죠?

•

/ 경로 → 정적 파일(React 빌드 결과물)을 직접 서빙

•

/api/ 경로 → Spring Boot(WAS)로 요청 전달

핵심 정리

정적 요청 = 미리 만들어진 파일을 그대로 전달 (빠르고, 서버 부하 적음)

동적 요청 = 서버가 실시간으로 처리하여 결과를 생성 (DB 조회, 비즈니스 로직)

Nginx는 정적 파일 서빙에 매우 뛰어나고, 동적 요청은 리버스 프록시로 WAS에 전달

실무에서는 정적/동적 요청을 분리하여 처리하는 것이 성능 최적화의 기본!