Front-End/Next.js 2

[Next.js] next/image

원본에 비해 훨씬 더 작은 용량으로 이미지를 사용할 수 있음 webp형식 서버에서 자동으로 이미지 최적화 quality 속성으로 얼마나 최적화할지 정의 기본 75 loading="lazy" 자동으로 적용됨 placeholder="blur" 사진이 다운로드 되는 동안 블러 이미지 적용됨, 블러 이미지는 next가 자동으로 만들어 제공함 -> layout shift 방지 소스파일을 스태틱하게 임포트 했기 때문에 위와 같은 최적화가 가능함 빌드타임에 이미 이미지의 너비, 높이 알 수 있음 import example from '/public/example.jpg'; v13 image 외부 이미지를 가지고올 때는 외부 이미지의 크기를 빌드 타임에 알 수 없으므로 반드시 크기를 명시해야함(width, height)..

Front-End/Next.js 2023.06.24

[Next.js Section1] Data fetching 이해하기

SSR 완성된 html이 서버에서 만들어진 뒤 브라우저에 전송됨 페이지 이동시마다 새로 html을 내려줘야 해서 화면 깜박임, 초기 용량 작음 사용자가 많을 때 서버 부하 위험, 보안 유리 SEO에 좋음 CSR 빈 html 나머지는 자바스크립트로 동적으로 그림 화면 깜박임이 없음, 초기 용량 큼 js 캐시 가능, 서버 데이터가 필요할 경우 계속해서 서버와 통신해야 하므로 보안 취약 SEO에 저약 SSG(Static Site Generation) pre rendering : Static한 HTML을 빌드 타임에 미리 만들어 둠(SSR은 request time에) 서버 부하 없음, HTML 캐시 가능, SEO에 좋음 정적인 사이트에 사용 Next.js SSR, CSR, SSG의 장점을 제공 SSR/SSG의 ..

Front-End/Next.js 2023.06.19