- https://mmazzarolo.com/blog/2024-08-13-async-chunk-preloading-on-load/
- https://mmazzarolo.com/blog/2024-07-29-data-preloading-script/
- https://martinfowler.com/articles/data-fetch-spa.html
- https://jakelazaroff.com/words/whats-a-single-page-app/
- https://jakelazaroff.com/words/building-a-single-page-app-with-htmx/
새 버전 배포 후 다시 불러오기 — 지속적인 폴링에 의존하지 않고 SPA를 업데이트하고 다시 로드하기 위한 다양한 기술과 전략에 대해 설명합니다. CloudFront와 같은 콘텐츠 전송 네트워크(CDN)를 API 프록시로 활용하여 SPA를 무효화하고, 새 콘텐츠를 사용할 수 있을 때 사용자가 애플리케이션을 새로 고치라는 메시지를 구현하고, 캐시 버스팅 기술과 서비스 워커를 사용하는 등의 방법을 살펴봅니다.
- Using a CloudFront API Proxy to Invalidate a Single-Page Application Without Polling
- Getting clients to reload your latest single page application version - Codemzy’s Blog
- https://twitter.com/housecor/status/1669722918392156162?s=20
- https://github.com/coryhouse/vite-pwa-app
- https://vite-pwa-org.netlify.app/
SPA 메모리 누수 soak test
Soak 테스트는 일반적인 프로덕션 부하를 사용하여 연속 가용성 기간 동안 시스템 동작을 프로덕션 사용 환경에서 검증하기 위한 시스템 테스트 유형입니다.
SPA 메모리 누수는 시작 화면과 끝 화면이 같은 플로우를 반복해서 잡는다. SPA는 페이지를 새로고침하지 않아 서버와 같은 상황이어서 한 플로우를 동일한 브라우저 컨텍스트 안에서 수백 번 돌린다.
drawer 열고 닫기를 200번 돌린 뒤 리스너·노드 수가 처음보다 늘어 있으면 그게 누수다 — 같은 자리로 돌아왔는데 늘었으니까. 클릭 반복은 Playwright로, 데이터는 CDP 로 읽는다.
측정은 CDP 로 한다 — Playwright 는 Chromium 에서만 CDP 세션을 열 수 있어서 Chromium 전용이다.
판정은 노드·리스너 수로만 한다. heap 은 앱과 무관하게 실행마다 흔들린다. 워밍업도 힙 때문이다 — 첫 루프에 코드·데이터를 받아와 힙이 뛰지만, 수는 첫 루프부터 같은 만큼 오른다.