Next.js입문 1일 차 @라우팅, 렌더링, assets 최적화

오늘은 하루종일 강의를 보면서 약간씩 실습을 하며 Next.js를 익혔다. 

 

오늘 배운 것은 Next.js 중에서도 라우팅, 렌더링, assets최적화에 대한 것인데, 난이도로 따지자면

라우팅 < 렌더링 <= assets최적화 인 것 같다. 

 

라우팅

라우팅은 폴더 단위라는 것만 빼면 이전에 react-router-dom에서 사용하던 것과 거의 비슷해서 크게 어렵지 않았는데, 몇몇 편의 기능들이 흥미로웠다. layout, error, loading과 같은 tsx파일을 생성하면 따로 임포트해서 적용하지 않아도 파일의 위치에 따라 자동적으로 해당 기능들이 사용되는 것이다. 

 

다만 메타데이터(브라우저 탭에 적힌 제목 같은 것)를 다루는 것은 좀 번거로웠는데, 그냥 string과 같은 하드코딩을 하는 데에는 어려움이 없지만, `${id}`같이 내가 원하는 값을 넣고 싶을 때에는 generateMetadata라는 함수를 사용하고 불필요한 로직을 줄이기 위해 값을 가져오기 위한 로직을 좀 더 생각해보아야했다. 

 

렌더링

지금까지는 렌더링/리렌더링과 지연까지 정도만 신경썼는데, Next.js에 들어오고나서는 4가지 렌더링 방식에 대해서 알아야했다. 

오늘 배운 내용을 정리하여 아래 표를 작성했다.

렌더링 방식	CSR	SSG	ISR	SSR
이름	클라이언트 사이드 렌더링	스태틱 사이트 제네레이션	인크레멘탈 스태틱 리제네레이션	서버 사이드 렌더링
		스태틱 : 정적	스태틱 : 정적
최신정보	맞음	아님	아닐 수 있음	맞음
		제네레이션 : 한 번	리제네레이션 : 주기에 맞춰 여러 번
	클라이언트:브라우저에서 렌더링			서버:서버에서 만든 걸 브라우저가 가져가게 함
렌더링	길다 하지만 바로 기능이 동작한다.(이미 모든 소스파일을 받았기 때문에)			짦다 하지만 기능이 제대로 작동하기까지 시간이 좀 걸림 (pre-rendering, hydration)
Next.js에서 사용	'use client'	기본 cache: "force-cache"	next: { revalidate: 3(초) }	cache: "no-store"

 

강의에 따라 이러한 렌더링 방식들을 실습해보니 suspense를 사용하여 한 프로젝트에서 이러한 렌더링 방식들을 적절하게 혼용하여 사용할 수 있을 것 같다. 

 

assets 최적화

assets 최적화는 여러 가지가 있기 때문에 채 다 기억하지는 못했다. 다만 어제 Next.js를 파악하면서 생각했던 것처럼 img 인터넷 주소 유효/보안 검사나 구글 폰트 쉽게 적용하기, 보이는 이미지만 먼저 가져오기, 이미지 압축 등 이전에는 라이브러리를 설치해서 사용할 수 있었을 것 같은 편리한 기능들을 많이 가지고 있다는 것을 파악했다. 당장에는 낯설어서 이런 기능들을 채 다 활용하지 못할 것 같지만, 앞으로 공부해나가면서 이런 기능들을 잘 다룰 수 있으면 확실히 편하게 개발을 할 수 있을 것 같았다.