milliwonkim의 블로그

요약 - 페이지 내용이 자주 바뀐다? => SSR 사용 - 페이지 내용이 거의 안바뀐다? => SSG 사용 Next.js에서 SSG와 SSR이 무엇인가! 1. Static Site Generation(SSG) - 빌드 타임에 페이지를 서버에서 사전에 HTML을 생성해둠 - getStaticProps, getStaticPaths를 이용함 - 생성된 정적페이지는 모든 요청에 동일하게 제공됨 - 서버 측에서 사전렌더링 => 클라이언트에서 추가적인 데이터 요청 안해도됨 - 캐싱 => 성능향상, 서버 부하 감소 가능 - 주로 변경이 적은 페이지, 공통 데이터를 사용하는 정적 컨텐츠에 적합함 2. Static Site Generation(SSG) - 각 페이지 요청이 올 때마다 HTML을 생성함 - getServe..

이미지나 영상을 처음에 모두 띄울 필요는 없습니다. 첫 로딩을 빠르게 하고, 그 이후에 뷰포트가 이미지가 필요한 곳으로 들어왔을 때 그 때 로딩하는 방법도 성능 향상에 좋은 요소가 됩니다. 스크롤 이벤트에 LazyLoading을 할당할 경우, 수많은 콜을 부를 것입니다. 따라서 Intersection Observer를 이용해서 특정 뷰포트에 들어올 때만 Lazy Loading을 트리거하게끔 합니다. import React, { useEffect, useRef } from "react"; function Card(props) { const imgRef = useRef(null); useEffect(() => { const options = {}; const callback = (entries, observ..