심화 주제
심화 주제들은 모두 “서버와 클라이언트 사이의 경계”를 다루는 다른 방식이에요.
05장까지가 SSR의 기초라면, 이 장은 더 깊은 원리와 최신 기술을 다뤄요. 직렬화부터 시작해서 Streaming, RSC, Server Actions까지—각각은 독립적으로 읽을 수 있지만, 모두 같은 근본 문제를 해결하려는 시도예요.
이 장의 구성
섹션 | 주제 | 핵심 질문 |
직렬화 | 서버→클라이언트 데이터 전달의 근본 원리는? | |
Streaming SSR | 대용량 페이지를 어떻게 빠르게 보여줄까? | |
React Server Components | 서버 전용 컴포넌트는 왜 필요한가? | |
Server Actions | 클라이언트에서 서버 함수를 어떻게 호출할까? |
언제 읽으면 좋은가
상황 | 추천 섹션 |
“왜 함수는 props로 못 넘기지?” | 6-1 직렬화 |
“첫 화면이 너무 느려” | 6-2 Streaming SSR |
“서버 컴포넌트가 뭔지 모르겠어” | 6-3 RSC |
“form action이 어떻게 동작하지?” | 6-4 Server Actions |
공통 원리
모든 심화 주제는 하나의 제약에서 출발해요:
서버와 클라이언트는 네트워크로 분리되어 있고,
그 경계를 넘으려면 직렬화가 필요하다.
Plain Text
복사
•
직렬화: 이 제약의 본질
•
Streaming: 제약 안에서 성능 최적화
•
RSC: 제약을 활용한 새로운 패러다임
•
Server Actions: 제약을 넘는 추상화
핵심: 새 기능이 나오면 “이건 직렬화 문제인가, 성능 문제인가, 추상화 문제인가?”로 분류할 수 있어요.
미래 전망: 커뮤니티의 분화
SSR 생태계는 현재 여러 방향으로 분화하고 있어요.
접근 방식의 스펙트럼
더 많은 JavaScript ←──────────────────────────────→ 더 적은 JavaScript
Next.js (RSC) Remix Astro HTMX
└─ 서버 컴포넌트 └─ 프로그레시브 └─ 아일랜드 └─ HTML 중심
+ 클라이언트 컴포넌트 인핸스먼트 아키텍처 최소 JS
Plain Text
복사
각 접근 방식의 철학
프레임워크 | 핵심 철학 | 언제 적합한가 |
Next.js (RSC) | 서버 우선, 필요할 때만 클라이언트 | 대규모 앱, 풍부한 인터랙션 |
Remix | 웹 표준 활용, 점진적 향상 | form 중심 앱, 접근성 중시 |
Astro | 정적 우선, 필요한 곳만 인터랙티브 | 콘텐츠 중심 사이트, 블로그 |
HTMX | HTML 확장, JavaScript 최소화 | 간단한 인터랙션, 레거시 통합 |
무엇을 선택해야 하나
“최고의 프레임워크”는 없어요. 있는 건 상황에 맞는 선택뿐이에요.
•
“우리 앱은 복잡한 실시간 협업이 필요해” → Next.js, Remix
•
“마케팅 사이트인데 빨라야 해” → Astro
•
“레거시 서버에 인터랙션만 추가하고 싶어” → HTMX
이 문서에서 배운 원리(직렬화, Hydration, Streaming)는 어떤 프레임워크를 선택하든 적용돼요. 도구는 바뀌어도 근본 원리는 그대로예요.
확실한 트렌드
분화 속에서도 공통된 방향은 있어요:
1.
서버의 귀환: 클라이언트만으로 모든 걸 해결하던 시대는 지남
2.
점진적 향상: JavaScript 없이도 기본 기능은 동작해야 함
3.
번들 최적화: 사용자에게 불필요한 코드를 보내지 않음
4.
Edge 컴퓨팅: 서버를 사용자 가까이로
핵심: 프레임워크는 계속 바뀌지만, “서버와 클라이언트 경계를 어떻게 다룰 것인가”라는 질문은 그대로예요.
