사전 렌더링

• Next.js는 React의 한계를 극복하기 위해 등장한 프레임워크
• 브라우저에서만 해석되는 특징으로 인해 검색엔진 최적화 등에 불리한 점을 극복하기 위해 등장

SSR

• 서버 사이드 렌더링(Server-side Rendering) 기법은 Next.js에서 제공하는 가장 기본적인 사전 렌더링 기법
• 브라우저의 요청이 있을 때 서버에서 HTML을 완성해서 브라우저로 전달
  • 브라우저의 요청이 있을 때: Next.js로 만든 프로그램이 실행되고 있는 런타임을 의미

SSG

• 정적 사이트 생성(Static Site Generation) 기법은 정적 서비스에서 많이 사용하는 사전 렌더링 기법
• 데이터가 변경될 여지가 적은 서비스에서 사용 (ex. 블로그 등)
• 정적 데이터로 만든 서비스가 구현되면 정적 서비스, 정적 사이트가 됨
• 데이터가 정적이라는 특성 때문에 SSR과 달리 HTML은 빌드 시점에 완성됨 (HTML로 변환된 글이 빌드된 결과물로 배포됨)

ISR

• 증분 정적 재생성(Incremental Static Regeneration) 기법은 SSG의 단점을 보완하는 사전 렌더링 기법
• 정적 사이트로 데이터가 변화할 여지가 적지만 완전히 정적이지만은 않은 경우에 활용 (ex. 게시글 조회수 표현 등)
• ISR은 SSG와 같이 빌드 시점에 HTML을 만들어냄
• 이후 지정한 시간이 지나 페이지에 접근하면 서버에서 HTML을 다시 생성함 (일종의 캐싱)
  • 추가 배포 과정 없이도 브라우저에 새로운 HTML을 전달할 수 있음

PPR

• 부분 사전 렌더링(Partial Prerendering) 기법은 Next.js v14에서 등장
• 일부분은 쉘로, 일부분은 홀로 렌더링
  • 쉘(Shell): 정적으로 사전에 렌더링되는 영역 (SSG와 같음)
  • 홀(Holes): 동적으로 렌더링되는 영역 (SSR과 같음)

라우팅 기법

Dynamic Routes

• 동적으로 경로를 지정하는 방식
• 대괄호로 묶어서 파일 이름(
  javascript코드 복사

  [slug].tsx

  )을 지정하면 그 이름으로 된 변수가 생기고, 그 변수를 단서로 활용하여 페이지를 동적으로 그리는 기법

App Router

• 리액트 서버 컴포넌트(RSC; React Server Component)를 적극적으로 활용하는 라우터
• 페이지 단위가 아닌 컴포넌트 단위로 서버에서 미리 렌더링 하는 방식을 기본으로 하는 라우터
• Pages Router
• App Router

Router Groups

• 경로들을 묶어서 관리하게 만드는 기법
• 괄호로 감싸서 폴더명을 지으면 그 하위 폴더들(경로들)이 하나의 레이아웃(
  javascript코드 복사

  layout.tsx

  )을 공유하는 구조

데이터 페칭

Route Handlers

• Pages Router에 있던 API Routers의 App Router 버전
• javascript코드 복사

  app

  디렉터리 아래에 있는 어떤 폴더에서건
  javascript코드 복사

  route

  라는 이름의 파일이라면 API로 활용될 수 있음
• API Routes
• Route Handlers
• Route Handlers
• route라는 이름으로 만들어진 파일은
  javascript코드 복사

  GET

  ,
  javascript코드 복사

  POST

  같은 HTTP 메서드 이름으로 함수를 정의할 수 있음
  • 이 함수는 API가 호출됐을 때 동작함
• route.ts

typescript코드 복사
export async function GET() {
  const res = await fetch('https://data.mongodb-api.com/...', {
    headers: {
      'Content-Type': 'application/json',
      'API-Key': process.env.DATA_API_KEY,
    },
  });
  const data = await res.json();
  
  return Response.json({data});
}  

Server Actions

• javascript코드 복사

  'use server'

  라는 문장이 있는 스코프의 로직은 서버에서만 동작함 (컴포넌트 안이여도 가능함)

스타일링

TailwindCSS

• 사전에 정의된 클래스명의 조합으로 스타일을 지정하도록 해주는 라이브러리
• Next.js는 PostCSS와 함께 사용함
• 빌드 시점에 사용했던 유틸(클래스명)에 대한 CSS 파일을 생성해 최소한의 CSS 파일로 스타일을 지정할 수 있도록 만들어줌
• 미리 정해진 클래스명을 조합해서 스타일링함
• 공식 사이트: https://tailwindcss.com/