next.js 기초

이번주부터 nextjs에 돌입했다. nextjs의 기초적인 내용을 다뤄보자. 

 

next.js란?

• next.js는 react.js 기반으로 만들어진 프레임워크이다.
• 풀스택 개발이 가능하여 백엔드 + 프런트엔드 배포를 하나로 할 수 있다. 
• vercel에서 만들어서 배포도 vercel로 하면 편하게 할 수 있다. 
• 제일 큰 변화가 2022 v13 버전인데 이때, 앱 라우팅 기술이 나왔다. 
• fetch 함수가 next.js에서 기능이 확장되며 여러 옵션을 지원하는데, 렌더링 4가지 방식과 관련이 있다.
• 4가지의 렌더링 방식을 지원한다. (SSR, ISR, SSG, CSR)
• 기본적으로 코드 스플리팅을 지원한다. 
• route handler 기술로 백엔드 개발이 가능하다. 

앱 라우팅

app 폴더 하위의 폴더명을 기반으로 자동 라우팅이 된다. 

폴더 안의 파일명은 page.tsx로 명명해야 라우팅이 된다. 파일명을 꼭 지켜야 한다.

app
ㄴabout
  ㄴpage.tsx
ㄴdetail
  ㄴpage.tsx
ㄴpage.tsx
ㄴlayout.tsx

 

 

주요 렌더링 기법

CSR (Client Side Rendering)

• 특징
  • 브라우저에서 javascript를 이용해 동적으로 페이지를 렌더링 하는 방식
  • 렌더링의 주체 : 클라이언트
• 장점
  • (최초 로드 후) 사용자와의 상호작용이 빠르며, 서버에 추가적인 요청을 보낼 필요가 없기 때문에 사용자 경험이 좋다.
  • 서버 부하가 적다.
• 단점
  • 첫 페이지 로딩 시간(Time To View)이 길 수 있다.
  • javascript가 로딩되고 실행될 때까지 페이지가 비어있기 때문에 검색 엔진 최적화(SEO)에 불리하다.

 

SSG (Static Site Generation)

• 특징
  • 서버에서 렌더링 하여 클라이언트에게 html을 전달하는 방식
  • 최초 빌드 시에만 생성된다.
  • 사전에 미리 정적 페이지를 여러 개 미리 만들어놓고 클라이언트가 홈페이지 요청을 하면 서버에서 이미 만들어져 있는 사이트를 바로 제공한다(클라이언트는 표기만 함)
• 장점
  
  • TTV 가 짧아 사용자가 빠르게 페이지를 볼 수 있다.
  • SEO에 유리하다
  • CDN(Content Delivery Network) 캐싱이 가능하다
• 단점
  • 정적인 데이터에만 사용할 수 있다.(개인을 위한 마이페이지 등에는 불가능)
  • 사용자와의 상호작용이 서버와의 통신에 의존하기 때문에 CSR 보다 상호작용이 느릴 수 있다.
  • 서버 부하가 클 수 있다.

 

ISR(Incremental Static Regeneration)

• 특징
  • 정적 페이지를 제공한다는 점이 SSG와 같지만 ISR은 설정한 주기만큼 페이지를 계속 생성한다는 점이 다르다.
  • 정적 페이지를 먼저 보여주고, 필요에 따라 서버에서 페이지를 재생성하는 방식이다.
• 장점
  • 정적 페이지를 먼저 제공하므로 사용자 경험이 좋으며, 콘텐츠가 변경되었을 대 서버에서 페이지를 재생성하므로 최신 상태를(그나마) 유지할 수 있다.
  • CDN 캐싱이 가능하다.
• 단점
  • 실시간 페이지가 아닌 설정한 주기에 따라서 생성되기 때문에 동적인 콘텐츠를 다루기에는 한계가 있을 수 있다. 

 

SSR(Server Side Rendering)

• 특징
  • 빌드 시점에 모든 페이지를 미리 생성하여 서버 부하를 줄이는 방식이다.
  • SSG, ISR과 같이 렌더링이 주체가 서버이다.
• 장점
  • TTV가 좋고 높은 보안성을 제공한다.
  • 검색 엔진 최적화(SEO)에 좋다.
  • 실시간 데이터를 사용하며 마이페이지처럼 데이터에 의존한 페이지 구성이 가능하다.
• 단점
  • 사이트의 콘텐츠가 변경되면 전체 사이트를 다시 빌드해야 하는데, 이 과정에서 시간이 오래 걸릴 수 있다. (서버 과부하)
  • 요청할 때마다 페이지를 만들어야 한다.
  • CDN 캐싱이 불가하다.