[Next.js] Next.js 는 뭘까..?

Next.js 란?

React 기반의 FullStack 웹 프레임워크이다. React 는 오직 화면을 그리는 렌더링 로직만 담당하기 때문에 라이브러리지만

Next.js 는 React 위에 서버 사이드 렌더링, 라우팅, 데이터 로딩, 정적 생성 등을 얹은 풀스택 도구를 제공하기 때문에 프레임워크이다. 

특징

• React 기반의 풀스택 프레임워크로 프론트와 백엔드를 통합해서 개발이 가능하다. 
• PageRouter 와 AppRouter 를 모두 지원한다. 
• Nested Layout (layout.tsx - page.tsx) 구성이 가능하다. 
• 다양한 렌더링 방식을 지원한다. (SSG, CSR, SSR, ISR)
• Tailwind, Typescript를 지원하며, Core Web Vitals에 최적화되어있다. 

PageRouter vs AppRouter

PageRouter

pages/ 폴더 기반 라우팅 시스템이다. 

• 파일 기반 라우팅 (pages/index.js, pages/about.js → /, /about) 이다. 
• getStaticProps, getServerSideProps, getInitialProps 등 데이터 페칭 메서드를 사용한다.
• useEffect, useState 등 기본 React Hook 사용 가능하다. 
• Next.js 13 이전까지의 기본 방식이다. 

파일구조

pages/
├── index.tsx       => /
├── about.tsx       => /about
└── blog/[id].tsx   => /blog/:id (동적 라우팅)

AppRouter

app/ 폴더 기반의 컴포넌트 중심 라우팅이며,  서버 컴포넌트를 지원한다.

• 기본이 Server Component 이다. 
• 폴더 기반 중첩 라우팅(Nested Routing) 구조 이다. 
• layout.tsx, page.tsx, loading.tsx, error.tsx, template.tsx 등 구성요소를 명확하게 분리한다.
• fetch()와 revalidate 등으로 데이터 처리를 한다. (getStaticProps, getServerSideProps는 사용 불가)
• RSC (React Server Components) 기반으로 클라이언트에 불필요한 JS 전송을 최소화 한다.

app/
├── layout.tsx          ← 전체 레이아웃
├── page.tsx            ← /
├── about/
│   └── page.tsx        ← /about
├── blog/
│   ├── [id]/
│   │   └── page.tsx    ← /blog/:id
│   └── layout.tsx      ← /blog 관련 공통 레이아웃

 

❓ React Server Component란? (RSC)

React 컴포넌트를 서버에서 렌더링하고 HTML만 클라이언트에 보내는 방식이다. 
브라우저에 JS 가 번들되지 않으며 더 가볍고 빠르다. 
DB 쿼리, 파일 시스템 접근, API 호출 등 서버 전용 작업이 가능하다. 
클라이언트와는 달리 useState, useEffect 같은 hook 사용이 불가능하다. 
Next.js App Router에선 기본이 Server Component이다. 
따라서 인터렉션이 필요없는 부분에서만 Server Component 를 사용하는 것이 가장 이상적이다. 

❓ React Client Component란? (RCC)

컴포넌트 상단에 'use client' 선언이 필요하다. 
클라이언트에서 실행되므로 Hook 사용과 이벤트 처리가 가능하다.
fs 접근이나 직접적인 DB fetch도 불가능하다. 

cf. Server Action

클라이언트에서 서버 함수를 직접 호출할 수 있게 해주는 Next.js 기능이다. 
POST API 를 따로 만들지 않고도 서버에서 실행되는 함수를 클라이언트에서 바로 호출하거나 <form>으로 전송할 수 있다. 

// server action 예시

// app/actions.ts (Server Action)
'use server'

import { revalidatePath } from 'next/cache'

export async function addTodo(prevState: any, formData: FormData) {
  const title = formData.get('title') as string
  await db.todo.create({ data: { title } })
  revalidatePath('/')
}


// app/page.tsx (Server Component)
'use client'

import { useFormState } from 'react-dom'
import { addTodo } from './actions'

export default function Page() {
  const [state, formAction] = useFormState(addTodo, null)

  return (
    <form action={formAction}>
      <input type="text" name="title" />
      <button type="submit">추가</button>
    </form>
  )
}

Next.js 의 렌더링 방식 4가지

✔️ SSG (Static Site Generation)

• 정적페이지를 미리 생성하여, 빌드 시점에 HTML을 만들어 배포한다. 
• 사용자 요청 시 HTML 파일을 즉시 응답할 수 있다. 
• 빠르고 CDN 캐싱이 가능하고 성능과 SEO에 매우 유리하다. 
• PageRouter에서만 getStaticProps()를 사용할 수 있다. 

❓ getStaticProps() 가 뭔데?
해당 페이지에서 사용할 데이터를 미리 가져와 HTML 에 반영하는 함수이다. 
빠른 페이지 로딩과 SEO 최적화에 매우 유리하다. 
대신 AppRouter 에서는 사용이 불가하다. 

 

✔️ SSR (Server Side Rendering)

• 매 요청마다 서버에서 HTML을 생성한다. 
• 항상 최신데이터를 보여줄 수 있다. 
• 요청마다 서버 렌더링이 필요하므로, 상대적으로 느리다. 
• PageRouter에서만 gerServerSideProps()를 사용할 수 있다. 

✔️ ISR (Incremental Static Regeneration)

• 정적페이지를 일정 주기마다 갱신한다. 
• SSG의 성능과 SSR의 최신성 장점을 절충하였다. 
• 초기엔 SSG처럼 정적 생성하고 이후에는 revalidate 설정에 따라 주기적으로 새 HTML을 생성한다.
• App Router에서는 fetch(..., { next: { revalidate: n } })로 설정한다.

✔️ CSR (Client Side Rendering)

브라우저에서 React가 JS를 통해 직접 렌더링한다.

• HTML은 텅 빈 상태로 전달하고  자바스크립트로 렌더링을 진행한다.
• 클라이언트에서 fetch 요청하여 데이터를 처리한다.
• 초기 로딩은 느릴 수 있고, SEO에 불리하다.
• 대신 사용자 상호작용이 많은 부분에 적합하다.
• 'use client'로 클라이언트 컴포넌트를 명시해야한다.