대규모 단일 페이지 애플리케이션(SPA)을 관리하는 개발자라면, 성능 최적화는 언제나 중요한 과제입니다. 특히, 사용자 경험을 향상시키기 위해 페이지 로드 속도를 높이는 일은 필수적이죠. 이번 글에서는 클라이언트 사이드 렌더링에서 네트워크 데이터 프리 로딩을 통해 성능을 극대화하는 방법을 소개하겠습니다. 개인적으로 이 방법은 제가 여러 프로젝트에서 성능 병목을 해결하는 데 큰 도움을 준 방식이기도 합니다.
네트워크 요청 프리 로딩의 필요성
[대부분의 SPA는 페이지가 로드될 때, 사용자 데이터를 포함한 여러 네트워크 요청을 필요로 합니다.] 일반적인 접근 방식은 리액트 앱이 마운트된 후에 이러한 요청을 시작하는 것이지만, 이는 앱이 커지면서 비효율적이 될 수 있습니다. 왜냐하면 네트워크 요청이 앱 번들이 다운로드, 파싱되고, 리액트 앱이 로드된 후에야 비로소 시작되기 때문입니다. 이런 식으로 한다면, 사용자는 불필요하게 기다리게 될 것입니다.
그러나 다행히도, 최신 브라우저는 네트워크 데이터를 프리 로딩할 수 있는 기능을 제공합니다. 예를 들어, `link rel=”preload”` 또는 리소스 힌트 같은 도구를 통해 네트워크 요청을 최대한 빨리 시작할 수 있습니다. 하지만 이런 기본적인 도구들은 주로 단순하고 하드코딩된 요청에 한정됩니다. 보다 복잡한 상황에서는 별도의 맞춤형 솔루션을 적용해야 합니다.
커스텀 스크립트로 네트워크 데이터 프리 로딩하기
개인적으로 선호하는 방법은 HTML 문서의 `<head>`에 작은 자바스크립트 스크립트를 삽입하여, 브라우저가 페이지를 로드하자마자 네트워크 요청을 시작하게 하는 것입니다. 이렇게 하면 네트워크 요청과 페이지 로드를 병렬로 처리할 수 있어 성능이 크게 향상됩니다.
예를 들어, 사용자 데이터를 프리 로딩하는 간단한 방법을 소개하겠습니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.__userDataPromise = (async function () {
const user = await (await fetch('/api/user')).json();
const userPreferences = await (await fetch(`/api/user-preferences/${user.id}`)).json();
return { user, userPreferences };
})();
</script>
</head>
<body>
<script src="/my-app.js"></script>
</body>
</html>위 코드는 사용자의 인증 정보와 선호 설정을 프리 로딩하여, 리액트 애플리케이션이 시작되기 전에 이미 데이터를 준비해 둡니다. 이후 앱에서 이 데이터를 바로 사용할 수 있어 페이지 로드 속도가 대폭 향상됩니다.
확장 가능한 프리 로딩 패턴
하지만, SPA가 커지면 이런 단순한 프리 로딩 방식은 더 복잡한 구조로 확장할 필요가 있습니다. 예를 들어, 여러 번 호출되는 네트워크 요청의 경우, 프리 로딩된 데이터를 효율적으로 관리하고 다시 사용할 수 있어야 합니다.
여기서 소개할 패턴은 “프리 로딩 가능 함수”를 정의하는 것입니다. 이 패턴을 적용하면, SPA의 어느 부분에서도 프리 로딩된 데이터를 쉽게 활용할 수 있습니다.
// my-app/load-user-data.ts
import { fetchUser, fetchUserPreferences } from './api';
import { getUserAuthToken } from './auth';
import { withPreload } from './data-preloader';
const _loadUserData = async () => {
const userAuthToken = await getUserAuthToken();
if (!userAuthToken) {
return { isLoggedIn: false };
}
const user = await fetchUser();
const userPreferences = await fetchUserPreferences();
return { isLoggedIn: true, user, userPreferences };
};
export const loadUserData = withPreload('loadUserData', _loadUserData);이 패턴을 사용하면 데이터가 필요할 때마다 새로운 네트워크 요청을 할 필요 없이, 이미 프리 로딩된 데이터를 즉시 활용할 수 있습니다. 이는 특히 대규모 SPA에서 성능을 유지하는 데 매우 유용합니다.
결론: 당신의 SPA에 적용해 보세요
이제 여러분도 SPA 성능 최적화를 위해 네트워크 데이터 프리 로딩을 적용해 보세요. 간단한 자바스크립트 코드로 시작할 수 있고, 프로젝트가 커질수록 더 확장된 패턴을 도입할 수 있습니다. 최종적으로, 사용자는 페이지 로드 속도와 전반적인 앱 경험에서 큰 개선을 느끼게 될 것입니다.
지금 바로 여러분의 SPA에 이 방법을 적용해보세요. 네트워크 요청을 최적화하여 더욱 빠르고 효율적인 웹 애플리케이션을 만들어보세요. 여러분의 프로젝트가 한 단계 성장할 것입니다.
참고 자료
- mmazzarolo, “Flexible network data preloading in large SPAs”
- mozilla, “preload”
- web.dev, “resource-hints”