SPA, 하이퍼미디어보다 모바일 환경에서 7.5배 느리다?

기사에서는 모바일 환경(Slow 4G + 4x CPU Throttling)에서 SPA 방식의 Next.js 기반 애플리케이션이 780ms의 Total Blocking Time을 보인 반면, 하이퍼미디어 방식은 0ms를 기록했다고 밝혔다. 이는 SPA가 메인 스레드(Main Thread)를 거의 1초 가까이 블로킹(Blocking)하여 사용자 입력을 처리하지 못하는 반면, 하이퍼미디어는 서버에서 렌더링된 HTML을 즉시 사용할 수 있기 때문이다. 이러한 차이는 Time to Interactive에서도 하이퍼미디어가 7.5배 빠르다는 결과로 이어진다.

SPA 방식은 799개의 프로덕션(Production) 의존성을 가지는 반면, 하이퍼미디어 방식은 69개로, 11.6배 적은 의존성(Dependencies)을 가진다. 이는 유지보수(Maintenance), 보안(Security), 그리고 배포(Deployment) 측면에서 하이퍼미디어 방식이 유리함을 의미한다. 또한, 적은 의존성은 개발자가 프레임워크(Framework) 관련 문제에 덜 시간을 할애하고, 비즈니스 로직(Business Logic)에 더 집중할 수 있게 해준다.

일부 댓글에서는 SPA의 성능 저하가 잘못된 구현(Poor Implementation)에 기인한다고 주장하며, SPA가 본질적으로 성능이 떨어지는 것은 아니라고 반박했다. 특히, Vue.js와 같은 프레임워크를 사용하면 적은 코드량으로도 SPA를 구현할 수 있다고 언급했다. 하지만, 기사에서는 Vercel AI SDK를 기준으로 비교했으므로, SPA 구현 방식(Implementation)에 따라 성능 차이가 발생할 수 있음을 시사한다.

하이퍼미디어 방식은 서버 측 렌더링(Server-Side Rendering)을 통해 초기 로딩 속도를 개선하고, 모바일 환경에서 뛰어난 성능을 제공한다. 하지만, 댓글에서는 하이퍼미디어 방식이 페이지 리로드(Page Reload)를 빈번하게 발생시켜 사용자 경험을 저해할 수 있다는 점을 지적했다. 또한, SPA가 복잡한 상호작용(Interaction)과 페이지를 구성하는 데 유리하다는 점을 고려할 때, 애플리케이션의 특성에 따라 적절한 아키텍처를 선택해야 한다.