Next/Image 컴포넌트의 기능LazyLoading => 기본적인 image태그를 통한 lazy loading을 구현하려면 Intersection Observer를 통해서 element가 보일 때 이미지를 로드하도록 직접 구현해야한다(현재 크롬에서는 loading="lazy"옵션으로 쉽게 구현할 수는 있다. 이미지 사이즈 최적화(webp)이미지를 그대로 내려받는 것이 아니라, webp 형식으로 가져오기 때문에 원본에 비해 훨씬 더 작은 용량으로 이미지를 사용할 수 있다.quality의 기본 값은 75이다. placeholder 제공placeholder를 제공하여 이미지가 불러오는 동안에 영역의 높이가 변경되어 레이아웃이 흔들리는(CLS) 문제를 방지해준다. 어떻게 이런 기능을 제공할까?내부 이미지Ne..
next-link로 라우팅하기(CSR)import Link from 'next/link'; const Links = () => { return ( Links /getStaticProps ); }; export default Links;next/link의 Link 컴포넌트를 이용해서 라우팅하는 방식으로, HTML의 a태그와 완전히 동치된다.그럼 a태그를 안 쓰고 Link 컴포넌트를 사용하는 이유는 무엇일까? Next.js의 라우팅은 CSR처럼 동작한다./links로 접속하면 위와 같이 네트워크 탭에 뜨는데, 제일 밑을 보면 getStaticProps.json과 js가 있는 것을 볼 수 있다.여기서 json파일은 props 데이터를, js파일은 해당 페이지의 HTML을 그리기 위해 미리 가져온다.다시 한 번..
CSR SSR SSG ISR 비교CSR(Client Side Rendering)리액트의 그것. 만 있는 html과 javascript파일 1개만 받은 뒤, 클라이언트에서 javascript로 모든 걸 그리는 방식장점: 화면 깜박이 없음, js 캐시 가능단점: SEO제약, 보안, 초기 용량 큼. SSR(Server Side Rendering)레거시한 블로그, 홈페이지에서 사용하는 방식PHP/JAVA 템플릿엔진을 통한 구현서버에서 매 요청마다 HTML을 만들어서 클라이언트에게 내려줌.장점: SEO, 보안, 초기 용량 적음.단점: 화면 깜박임, 서버 부하. SSG(Static Site Generation)pre-rendering: Static한 HTML을 빌드타임에 미리 반들어 둠(SSR는 요청타임에 만들기 ..
