Next.js (이미지 최적화, server component & client component, 렌더링방식)

🥸 최적화된 이미지 넣는 법

• < Image/ > 태그 사용하면 자동으로 이미지 lazy loading & 사이즈 최적화 & layout shift 방지를 해줍니다.

1. import Image from "next/image"
   상단에서 < Image > 태그를 import 해온 뒤에 이미지 보여주길 원하는 곳에서 < Image/ > 사용
2. 이미지 경로를 넣으려면 이미지를 상단에서 import 해온 뒤에 그걸 넣어야합니다.
3. 다른 사이트에 올려둔 이미지를 < Image >에 절대경로로 집어넣고 싶으면 width, height속성 필요함, next.config.js 셋팅도 필요함
   (https://nextjs.org/docs/app/building-your-application/optimizing/images#remote-images)

🥸 server component vs client component

• Next.js 컴포넌트는 종류가 2개입니다.

1. server component

장점
1. 로딩속도 빠름(자바스크립트 기능이 없기 때문에)
2. 검색엔진 노출 유리

단점
1. html에 자바스크립트 기능넣기 불가능(onClick 등)
2. useState, useEffect 등 사용불가

2. client compoent

• 파일 맨 위에 'use client'넣고 만든건 client component

장점
1. html에 자바스크립트 기능넣기 가능
2. useState, useEffect 등 사용가능

단점
1. 로딩속도 느림 1(자바스크립트 많이 필요)
2. 로딩속도 느림 2(hydration 필요)

(추천)
큰 페이지는 server component
JS기능 필요한 곳만 client component

🥸 Next.js의 렌더링 방식

• Next.js는 diffing과 hydration 과정을 거쳐 화면을 렌더링 합니다.

특정 페이지를 요청하게 되면
1. 서버에서 먼저 렌더링(=프리렌더링)
프론트엔드 서버에서 해당 페이지의 HTML, CSS, JS를 미리 그려본다.
2. 브라우저로 html, js, css 파일 전송
3. 브라우저에서 렌더링
4. 프론트 서버의 렌더링과 브라우저의 렌더링의 차이점 비교 = diffing
5. diffing을 통해 비교한 후 최종적으로 반영해 렌더링하게 되는 과정 = hydration

ex) localStorage는 브라우저에만 있는데, 서버에서 먼저 화면을 그려보기 때문에 오류가 발생할 수 있습니다.
이를 해결하기 위해 useEffect를 사용해 렌더링 이후에 실행되도록 하면 됩니다.