loading
loading = 'lazy' // {lazy} | {eager}
기본값은 lazy로 사용 된다.
lazy일 경우, viewport에서 계산 된 거리에 도달할 때까지 이미지 로드를 연기해준다.
만약 eager일 경우 이미지를 즉시 로드해준다.
Recommendation: This property is only meant for advanced use cases. Switching an image to load with eager will normally hurt performance. We recommend using the priority property instead, which will eagerly preload the image.
하지만, eager로 이미지를 긴급 로드 해버리면 일반적으로 성능이 저하된다.
따라서 아래 priority
속성을 사용해, 이미지를 eagerly preload 하는 것이 좋다.
priority
priority={false} // {false} | {true}
기본값은 false
이다. true
인 경우, 이미지는 높은 우선순위 및 사전 로드로 간주되며,이 경우 lazyLoading이 자동 비활성화 된다.
따라서 메인 콘텐츠에 로드(LCP:Largest Contentful Paint) 되는 이미지에 사용하는 것이 좋다.
placeholder
placeholder = 'empty' // "empty" | "blur" | "data:image/..."
placeholder='blur'
속성일 경우 정적 이미지의 경우, 자동으로 blurDataUrl가 채워지지만,
동적 이미지의 경우 blurDataURL
속성을 추가로 제공해야 한다.blurDateUrl
는 base64 형태의 이미지를 받는다.
import {getPlaiceholder} from 'plaiceholder'
plaiceholder를 사용해 base64형태의 이미지를 가져와 BlurDataUrl에 전달해주었다.
import {getPlaiceholder} from 'plaiceholder'
export default async function getBase64(imageUrl: string) {
try {
const res = await fetch(imageUrl)
if (!res.ok) {
throw new Error(`Failed to fetch Image ${res.status} ${res.statusText}`)
}
const buffer = await res.arrayBuffer()
const {base64} = await getPlaiceholder(Buffer.from(buffer))
return base64
} catch (e: any) {
console.log(e.stack)
}
}
import getBase64 from '@/lib/getLocalBase64'
import Image, {ImageProps} from 'next/image'
interface BlurImageProps extends ImageProps {
src: string
}
export default async function BlurImage(props: BlurImageProps) {
const blurUrl = await getBase64(props.src)
return <Image {...props} placeholder="blur" blurDataURL={blurUrl} />
}
결과
블러 이미지를 표시하면 이미지가 로딩 중임을 사용자에게 시각적으로 알려준다.
이렇게 하면 사용자가 페이지가 여전히 로딩 중임을 이해하고 기다릴 수 있도록 도와줄 수 있을 것이다.
'Front-end > React' 카테고리의 다른 글
[React] React.lazy와 Suspence (0) | 2024.03.21 |
---|---|
[React] reactDevTools로 리렌더링 파악하여 최소화하기 #React.memo #useMemo #useCallback (0) | 2024.02.14 |
[Next] dayjs UTC시간 -> 현지시간 적용 (0) | 2023.07.21 |
[React] 타이머 구현하기 (0) | 2023.05.07 |
[React] 디바운싱 적용하여 자동 계산 성능 개선하기 (0) | 2023.03.21 |