🎧

https://www.felgus.dev/blog/future-spa

최근 프론트엔드 생태계에서 가장 뜨거운 주제 중 하나는 서버 컴포넌트(Server Components) 와 서버 렌더링입니다. Next.js와 같은 메타 프레임워크가 각광받으면서 “SPA는 이제 뒤쳐지는 게 아닐까?”라는 논의도 자주 등장하죠.


하지만 단순한 SPA(Single Page Application), 즉 정적 HTML과 JS 파일 하나로 시작하는 애플리케이션도 여전히 강력한 경쟁력을 가집니다. 오히려 새로운 React 기능들을 적절히 활용하면 기존 SPA의 한계를 극복하고 훨씬 매끄러운 사용자 경험(UX)을 제공할 수 있습니다.

이 글에서는 SPA에서 적용할 수 있는 최신 전략들을 살펴보겠습니다.

1. Render-on-Fetch에서 Render-as-You-Fetch로

전통적인 SPA는 보통 다음 단계로 동작합니다:

1. HTML 요청
2. JS 다운로드 후 React 초기화
3. 컴포넌트 렌더링 시작
4. 컴포넌트 안에서 fetch 호출
5. Suspense fallback UI 표시
6. 응답 도착 후 실제 UI 렌더링

이 방식은 단순하지만 네트워크 워터폴이 생기며 UI 표시가 지연됩니다.

반면 Render-as-You-Fetch 패턴을 사용하면 컴포넌트 렌더링 직전에 라우트 로더(Route Loader) 를 실행하여 데이터를 더 빨리 요청할 수 있습니다.


즉, 필요한 데이터를 가져오는 과정과 UI 렌더링을 맞물려 동시에 진행하므로 초기 반응 속도가 개선됩니다.

→ React Router v7, Tanstack Router 같은 최신 라우터가 이 패턴을 지원합니다.

2. 서버 컴포넌트의 정적 활용

서버 컴포넌트는 이름 그대로 서버에서 렌더링해야 할 것처럼 들리지만, 꼭 그렇지는 않습니다.

빌드 단계에서 미리 생성한 정적 Server Component Payload를 활용해 SPA 안에 포함시킬 수도 있습니다.
예를 들어, 세션 상태나 사용자 입력과 무관한 컴포넌트는 빌드 시점에 미리 만들어 두고, SPA 실행 시 필요한 순간 불러오는 방식입니다.
→ 이렇게 하면 서버 환경이 없어도 SPA 성능과 초기 로딩 경험을 개선할 수 있습니다.

3. Concurrent Features: 더 매끄러운 인터랙션

React 18에서 도입된 useTransition, useDeferredValue 같은 동시성 기능은 단순히 “대형 서비스 전용”이 아닙니다.
프론트엔드에서의 규모(scale) 는 사용자 수가 아니라 “페이지, 상호작용, 정보 흐름의 복잡도”로 정의됩니다.
SPA에서도 사용자는 아무 때나 다양한 인터랙션을 수행할 수 있기 때문에, 업데이트의 우선순위를 명확히 지정하지 않으면 UX가 쉽게 끊기게 됩니다.

동시성 기능을 활용하면 React가 높은 우선순위 작업부터 처리하도록 지시할 수 있고, 그 결과 더 부드러운 화면 전환과 반응성을 확보할 수 있습니다.

4. Preload를 통한 선제적 사용자 경험

코드 스플리팅과 지연 로딩은 이미 흔한 기법입니다. 하지만 여기서 더 나아가 SPA 라우터의 Link 컴포넌트를 활용하면 성능을 또 한 단계 개선할 수 있습니다.

예를 들어, 사용자가 특정 링크 위에 마우스를 올려놓은 순간, 라우터가 해당 페이지의 데이터와 코드 스플릿된 JS를 미리 요청하도록 하는 것입니다.

이렇게 하면 실제 페이지 전환 시 이미 준비된 콘텐츠가 즉시 표시되어, 마치 네이티브 앱처럼 반응하는 UX를 제공할 수 있습니다.

5. React Labs의 신기능: ViewTransition & Activity

React 팀이 발표한 실험적 기능 중 두 가지가 SPA UX에 특히 주목할 만합니다:
• ViewTransition
새로운 웹 표준으로, 페이지 전환 시 애니메이션을 더 부드럽게 적용할 수 있도록 React와 브라우저 API 간의 간극을 메워줍니다.
→ 결과적으로 화면 전환 경험이 훨씬 자연스러워집니다.
• Activity (구 Offscreen)
렌더링과 커밋 과정 사이에 “미리 UI 스냅샷을 준비해두는” 기능입니다.

즉, 컴포넌트를 보이지 않는 상태로 렌더링해둔 뒤, 필요할 때 즉시 화면에 적용할 수 있습니다.
→ 전환 시점에서 기다림 없이 곧바로 새로운 화면을 보여줄 수 있습니다.

이 기능을 Preload 전략과 함께 사용하면, 페이지 전환 속도 및 연속성이 대폭 개선됩니다.

결론: SPA는 더 부드럽게, 더 빠르게
SPA가 서버 렌더링 프레임워크에 밀려 사라질 거라고 생각하기 쉽지만, 오히려 반대입니다.
• Render-as-you-fetch 패턴
• Server Component의 정적 활용
• Concurrent Features로 부드러운 인터랙션
• Preload & Activity & ViewTransition으로 네이티브 같은 전환 경험

이 전략들을 결합하면 SPA는 지금보다 훨씬 강력하고 세련된 UX를 제공할 수 있습니다.

📌 즉, SPA의 미래는 성능과 UX를 모두 갖춘 “더 똑똑한 클라이언트 사이드 렌더링”입니다.