#performance

8 posts found.


Lighthouse cache-insight를 결정하는 must-revalidate 한 단어
nextjs

Lighthouse cache-insight를 결정하는 must-revalidate 한 단어

next/image 적용 후 줄어든 Lighthouse cache-insight 항목의 진짜 원인을 추적해, max-age도 응답 크기도 아닌 must-revalidate 한 단어가 게이트 역할을 한다는 사실을 확인한 과정을 정리합니다.

performancelighthouse
대용량 엑셀 다운로드: 클라이언트에서 서버로
react

대용량 엑셀 다운로드: 클라이언트에서 서버로

클라이언트 기반 엑셀 생성의 한계를 극복하고 SSE를 활용한 서버 사이드 아키텍처로 성능과 사용자 경험을 개선한 과정을 다룹니다.

performancearchitecture
SCSS Mixin으로 SSR 플리커링 줄이기
vue

SCSS Mixin으로 SSR 플리커링 줄이기

JavaScript 반응형 로직을 SCSS Mixin으로 전환하여 SSR 환경의 플리커링(FOUC)을 근본적으로 해결한 과정을 다룹니다.

cssssr
서비스 프론트엔드 성능 최적화 탐구: Nuxt.js 3와 캐싱 전략의 현실
vue

서비스 프론트엔드 성능 최적화 탐구: Nuxt.js 3와 캐싱 전략의 현실

Nuxt.js 3 기반 서비스에서 SWR, Redis, In-Memory 캐싱 등 다양한 성능 최적화 전략을 탐구하고, 실제 인프라 지표를 분석하며 '지금 당장'보다 '적절한 시점'의 중요성을 도출한 결론을 정리합니다.

performancessr
Infinite Scroll 최적화: DOM 재사용으로 대용량 리스트 처리하기
vue

Infinite Scroll 최적화: DOM 재사용으로 대용량 리스트 처리하기

Intersection Observer와 DOM 재사용(버퍼링) 전략으로 무한 스크롤에서 발생하는 DOM 누적 문제를 줄이고, 대용량 리스트를 안정적으로 처리한 구현 과정을 정리합니다.

performance
Next.js 프로젝트에 Docker 적용기
performance

Next.js 프로젝트에 Docker 적용기

Next.js 프로젝트를 Docker로 멀티 스테이지 빌드하고, standalone output 기반으로 이미지 크기를 줄이며 환경별 `.env`를 주입하는 과정을 정리합니다.

reactdeployment
requestAnimationFrame과 cancelAnimationFrame의 관계
javascript

requestAnimationFrame과 cancelAnimationFrame의 관계

`requestAnimationFrame`이 반복 호출될 때의 특성과, 종료 시점에 `cancelAnimationFrame`으로 정리하지 않으면 발생할 수 있는 성능/메모리 이슈를 정리합니다.

performance
React Query의 Hydrate란?
react

React Query의 Hydrate란?

Next.js SSR 환경에서 React Query(TanStack Query)의 `Hydrate`/`dehydrate`를 활용해 서버에서 미리 받아온 데이터를 클라이언트 캐시에 주입하고, 중복 API 호출을 줄이는 방법을 정리합니다.

ssrperformance