[nextjs] 기초 정리

nextjs란?

React 프레임워크

 

nextjs의 왜 쓰냐 ?

1. API Route를 지원해서 Full stack 웹 개발 가능
2. 렌더링 
 - CSR에서 벗어나 SSR, ISR, SSG 가능
3. 코드 스플리팅
- 전통적으로, 해당 웹 전체 코드를 한번에 다운받고 시작하기 때문에 오래걸림 따라서, TTV (Time To View : 사용자가 최초 View를 볼 수 있을 때 까지의 시간)가 오래걸림
- 코드 스플리팅을 사용한다면, 사용자가 필요로 하는 부분만 우선 로딩 → Suspense와 lazy를 이용한 코드 스플리팅 구현
4. vercel에서 next.js를 제공하기 때문에 배포 쉬움

 

라우팅

1. App Router (recommended)
2. Pages Router

 

렌더링

1. CSR (Client Side Rendering)

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

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, Client Side Rendering!</h1>;
}

// index.js
ReactDOM.render(<App />, document.getElementById('root'));​

2. SSG (Static Site Generation)

 

특징	* 서버에서 페이지를 렌더링 해서 클라에게 html 전달 * 최초 빌드시에만 생성 사전에 미리 정적페이지를 여러개 만들어놓음 → 클라이언트가 홈페이지 요청을 하면, 서버에서는 이미 만들어져있는 사이트를 바로 제공! → 클라이언트는 표기만 함
장점	TTV가 매우 짧아 사용자가 빠르게 페이지를 볼 수 있음  SEO에 유리함 CDN(Content Delivery Network) 캐싱 가능
단점	정적 데이터에만 사용가능 사용자와 상호작용이 서버와의 통신에 의존하므로, CSR 보다 상호작용이 느릴 수 있고 서버 부하가 클 수 있음 마이페이지 처럼 데이터에 의존하여 화면을 그려주는 경우 사용 불가

 

// app router 버전은 본 예제에서 다룹니다.
// 아래 예제는 편하게 훑어보세요 :)
import React from 'react';

function HomePage({ data }) {
  return <div>{data}</div>;
}

export async function getStaticProps() {
  const res = await fetch('https://...'); // 외부 API 호출
  const data = await res.json();

  return { props: { data } };
}

export default HomePage;

3. ISR (Incremental Static Regeneration)

 

 

특징	SSG처럼 정적 페이지 제공 설정한 주기만큼 페이지를 계속 생성해줌 ex : 주기가 10분이라면? → 10분마다 데이터베이스 또는 외부 영향 때문에 변경된 사항을 반영하는 역할 정적 페이지를 먼저 보여주고, 필요에 따라 서버에서 페이지를 재생성하는 방식
장점	정적페이지를 먼저 제공하므로 사용자경험이 좋으며, 콘텐츠가 변경되었을 때 서버에서 페이지를 재생성하므로 최신상태를 (그나마) 유지가능 CDN 캐싱 가능
단점	동적인 콘텐츠를 다루기에 한계가 있을 수 있음 , 실시간 페이지 아님 마이페이지처럼 데이터에 의존하여 화면을 그려주는 경우 사용 불가

 

import React from 'react';

function HomePage({ data }) {
  return <div>{data}</div>;
}

export async function getStaticProps() {
  const res = await fetch('https://...'); // 외부 API 호출
  const data = await res.json();

  return { 
    props: { data },
    revalidate: 60, // 1초 후에 페이지 재생성
  };
}

export default HomePage;

4. SSR (Server Side Rendering)

 

특징	빌드 시점에 모든 페이지를 미리 생성하여 서버 부하 줄임 SSG, ISR처럼 렌더링 주체가 서버 클라이언트 요청시 렌더링 C → S : 이 페이지 줘 S → C : (DB읽고 등등 한후) html 파일 제공
장점	TTV가 빠르고 높은 보안성 제공 SEO 최적화 좋음 실시간 데이터 사용 마이페이지 처럼 데이터에 의존한 페이지 구성 가능 CDN 캐싱 불가
단점	사이트의 콘텐츠가 변경되면 전체 사이트를 다시 빌드해야하는데, 이 과정이 시간이 오래걸릴 수 있다 →  서버과부하 요청할 때 마다 페이지를 만들어야함

import React from 'react';

function HomePage({ data }) {
  return <div>{data}</div>;
}

export async function getServerSideProps() {
  const res = await fetch('https://...'); // 외부 API 호출
  const data = await res.json();

  return { props: { data } };
}

export default HomePage;

 

종합

CSR	SSR	SSG	ISR
빌드 시간	짧다	짧다	길다	길다
SEO	나쁨	좋음	좋음	좋음
페이지 요청에 따른 응답 시간	보통	길다	짧다	짧다
최신 정보인가?	맞음	맞음	아님	아닐 수 있음

 

Hydration

1. CSR

TTV가 오래걸렸다. 여기서 Hydration 개념이 들어가는데, 최초 서버에선 index.html 파일만 제공하지만 이후 React 소스파일을 바탕으로 한 자바스크립트 파일이 모두 다운로드 되야만(즉, Hydration이 되야만) 최종 소스코드를 볼 수 있다

2. SSR

서버에서는 사용자의 요청이 있을 때 마다 페이지를 새로 그려서 사용자에게 제공한다

1. pre-rendering : 사용자와 상호작용하는 부분을 제외한 껍데기만을 먼저 브라우저에게 제공한다. TTV가 엄청나게 빠르다
2. hydration : 이 과정이 일어나기 전까지만 껌데기만 있는 html 파일이기 때문에 사용자가 아무리 버튼을 클릭해도 아무동작이 일어나지 않는다. 인터렉션에 필요한 모든 파일을 다운로드 받는 과정 즉, hydration 과정이 끝나야 그제서야 인터렉션이 가능하다, 이 간극 TTI를 줄이는것이 관건이다

3. SSG, ISR도 SSR과 마찬가지로 hydration 과정이 존재한다