Next.js

오늘부터 Next.js를 공부하려고 한다.

 

Next.js란?

 

리액트 문제 해결 도구

 

 

Next.js 관련해서 정말 많은 글들을 읽어봤는데 결국 간단하게 정리하면 리액트의 문제를 해결하기 위해 만들어진 JS 웹 프레임워크이다.

 

 

리액트의 어떤 문제를 해결해줄까?

1. 느린 페이지 로딩 속도
   • 리액트는 클라이언트 사이드 렌더링(CSR)을 기본으로 하기 때문에 페이지 로딩 속도가 느림
   • 왜 느리지? CSR은 JS 파일을 먼저 다운로드한 후 데이터를 받아오기 때문
2. SEO 속도 느림
   • CSR이기 때문에 검색 엔진이 웹 페이지의 콘텐츠를 이해하는 어려움 발생
3. 개발 편의성
   • 리액트는 다양한 기능 제공을 하지 않아 개발자가 직접 설정하는 부분이 많음

 

Next.js의 장점

결국 Next.js는 리액트의 단점을 보완했기 때문에 위에 내용과 연결된다.

1. 빠른 페이지 로딩 속도
   
   • 서버 사이드 렌더링 지원
   • 서버에서 HTML을 동적으로 생성, 서버에서 데이터를 가져와 렌더링하므로 클라이언트는 이미 완성된 HTML 받음
   • 완성된 HTML을 받기 때문에 초기 렌더링 속도가 빠름
2. SEO 속도 빠름
   • 초기 HTML이 있어 검색 엔진이 웹 페이지의 콘텐츠 이해가 빨라짐
3. 데이터 패칭
   • 서버에서 데이터를 가져오기 때문에 속도가 빠름 (DB와 물리적으로 가까움)
4. 보안
   • 정보를 서버에 두기 때문에 안전
   • 렌더링된 값을 캐싱해두었다가 재사용
5. 캐싱
6. JS 번들 크기 감소
   • 서버에서 렌더링까지 다 된 컴포넌트를 내려주어 파일 크기가 작아짐

 

Next.js의 단점

위의 내용을 읽어보면 장점만 있는 거 같지만, 당연히 이 프레임워크도 단점이 있다.

1. 복잡성 증가
   • 서버 사이드 렌더링은 서버와 클라이언트 사이에서 데이터와 상태 관리를 해야하기 때문에 복잡할 수 있음
2. 태그 이용 불편
   • a 태그를 사용하면 페이지 이동할 때마다 계속 다운로드 진행 -> Link 태그 사용 필요

 

Next.js 13에서의 주의점

이전과 다르게 13버전에서는 기본이 서버 컴포넌트로 되어 있어 클라이언트 컴포넌트를 사용하려면 useClient를 명시해줘야 한다.

(클라이언트 컴포넌트를 서버 컴포넌트에서 import 불가능, props로 넘겨줘야 함)

 

또, 서버 컴포넌트에서는 Hook과 EventListener를 사용할 수 없기 때문에 최대한 트리 끝으로 클라이언트 컴포넌트를 보내야 한다.