Next.js 6가지 원칙 및 4가지 랜더링 기법

프로젝트 세팅 및 장점을 살리기위한 복습 후 적용 예정!

이전에 SSG를 구현하기 위해서는 예전 getStaticPaths 함수 같은 게 필요.
Next.js 13 버전에서는 generateStaticParams 함수로 바뀌었다.

1. SSG (Static Site Generation)

개념

Static Site Generation은 빌드 타임에 페이지를 생성하여 정적 파일로 저장하는 방식입니다.
페이지를 정적으로 생성하여 성능이 매우 우수합니다.

언제 사용해야 하나요?

변하지 않는 콘텐츠: 자주 변경되지 않는 콘텐츠 (예: 블로그 포스트, 문서 페이지 등).
빠른 로드 속도가 중요한 경우: 빌드 타임에 생성된 HTML을 제공하므로 페이지 로드 속도가 매우 빠릅니다.

사용법

generateStaticParams를 사용하여 정적 경로를 지정하고, fetch나 다른 데이터 패칭 방법을 사용하여 데이터를 가져옵니다.

// app/posts/[id]/page.tsx
import { getPostById, getAllPostIds } from '@/lib/posts';

export async function generateStaticParams() {
  const ids = await getAllPostIds();
  return ids.map(id => ({ id }));
}

export default async function PostPage({ params }) {
  const post = await getPostById(params.id);
  return <div>{post.content}</div>;
}

2. ISR (Incremental Static Regeneration)

개념

Incremental Static Regeneration은 SSG의 한 형태로, 페이지를 정적으로 생성하지만 특정 시간 간격으로 페이지를 다시 생성할 수 있습니다.
이 방식은 빌드 타임에 페이지를 생성하고, 이후 일정 주기로 재생성하여 최신 데이터를 반영합니다.

언제 사용해야 하나요?

빈번히 업데이트 되는 콘텐츠: 자주 업데이트되는 데이터지만 실시간으로 업데이트할 필요는 없는 경우 (예: 뉴스 사이트, 블로그 댓글 등).
정적 성능과 동적 데이터의 혼합: 주기적으로 데이터가 갱신되지만 실시간으로 갱신될 필요는 없는 경우.

사용법

revalidate 옵션을 사용하여 페이지 재생성 주기를 설정합니다.

// app/posts/[id]/page.tsx
import { getPostById, getAllPostIds } from '@/lib/posts';

export async function generateStaticParams() {
  const ids = await getAllPostIds();
  return ids.map(id => ({ id }));
}

export default async function PostPage({ params }) {
  const post = await getPostById(params.id);
  return <div>{post.content}</div>;
}

// ISR을 위해 export const revalidate = 60;
export const revalidate = 60; // 60초마다 페이지 재생성

3. SSR (Server-Side Rendering)

개념

Server-Side Rendering은 요청이 들어올 때마다 서버에서 페이지를 생성하여 HTML을 클라이언트에 제공하는 방식입니다.
매 요청마다 최신 데이터를 반영할 수 있습니다.

언제 사용해야 하나요?

실시간 데이터 필요: 항상 최신 데이터를 제공해야 하는 경우 (예: 사용자 맞춤형 대시보드, 실시간 데이터가 필요한 애플리케이션 등).
SEO가 중요한 동적 콘텐츠: 검색 엔진 최적화가 필요하고, 콘텐츠가 자주 변경되는 경우.

사용법

서버 컴포넌트 내에서 직접 데이터를 가져오거나 API 라우트를 사용하여 데이터를 가져옵니다.

// app/posts/[id]/page.tsx
import { getPostById } from '@/lib/posts';

export default async function PostPage({ params }) {
  const post = await getPostById(params.id);
  return <div>{post.content}</div>;
}

4. CSR (Client-Side Rendering)

개념

Client-Side Rendering은 클라이언트(브라우저)에서 JavaScript를 사용하여 페이지를 렌더링하는 방식입니다.
데이터는 클라이언트에서 가져와서 렌더링합니다.

언제 사용해야 하나요?

동적 상호작용이 필요한 경우: 페이지가 사용자의 입력에 따라 실시간으로 변경되어야 하는 경우 (예: 검색 필터링, 대화형 위젯 등).
즉시성이 중요한 경우: 사용자와의 상호작용이 즉시 반영되어야 하는 경우.

사용법

useEffect 훅을 사용하여 클라이언트 사이드에서 데이터를 가져옵니다.

'use client';

import { useEffect, useState } from 'react';

type Post = {
  id: string;
  content: string;
};

export default function PostPage({ params }) {
  const [post, setPost] = useState<Post | null>(null);

  useEffect(() => {
    async function fetchPost() {
      const response = await fetch(`/api/posts/${params.id}`);
      const data = await response.json();
      setPost(data);
    }

    fetchPost();
  }, [params.id]);

  if (!post) return <div>Loading...</div>;

  return <div>{post.content}</div>;
}

요약

SSG: 정적 콘텐츠, 성능이 중요할 때.
ISR: 자주 업데이트되는 콘텐츠, 정적 성능이 필요하지만 주기적으로 업데이트되어야 할 때.
SSR: 실시간 데이터가 필요할 때, SEO가 중요한 동적 콘텐츠.
CSR: 사용자 상호작용이 많은 경우, 즉시성이 필요한 경우.

Next.js 6가지 원칙

1. 파일 기반 라우팅 (File-Based Routing)

개념

Next.js는 파일 시스템을 기반으로 하는 라우팅을 제공합니다. pages 디렉토리 내의 파일들이 자동으로 라우트가 됩니다. 파일 이름과 디렉토리 구조가 URL 경로를 결정합니다.

예시

pages/
  index.js       # /
  about.js       # /about
  blog/
    index.js     # /blog
    [id].js      # /blog/:id

2. 서버 사이드 렌더링 (Server-Side Rendering)

개념

Next.js는 서버 사이드 렌더링(SSR)을 기본으로 제공합니다. 페이지가 요청될 때마다 서버에서 HTML을 생성하여 클라이언트에 전송합니다. SSR을 통해 검색 엔진 최적화(SEO)가 개선되고 초기 로딩 속도가 빨라집니다.

사용법

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

const Page = ({ data }) => {
  return <div>{data.content}</div>;
};

export default Page;

3. 정적 사이트 생성 (Static Site Generation)

개념

Next.js는 빌드 타임에 정적 HTML 페이지를 생성하여 성능을 최적화할 수 있습니다. getStaticProps와 getStaticPaths를 사용하여 정적 페이지를 미리 생성합니다.

사용법

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

const Page = ({ data }) => {
  return <div>{data.content}</div>;
};

export default Page;

4. API 라우트 (API Routes)

개념

Next.js는 서버리스 함수 형태의 API 라우트를 제공합니다. pages/api 디렉토리 내의 파일들이 API 엔드포인트로 작동합니다. 이를 통해 서버 사이드 로직을 쉽게 구현할 수 있습니다.

사용법

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, world!' });
}

5. CSS 및 Sass 지원

개념

Next.js는 CSS 및 Sass를 기본적으로 지원합니다. CSS 모듈을 사용하여 각 컴포넌트에 스타일을 캡슐화할 수 있습니다.

사용법

// styles.module.scss
.container {
  color: red;
}

// Component.js
import styles from './styles.module.scss';

const Component = () => {
  return <div className={styles.container}>Hello</div>;
};

export default Component;

6. 이미지 최적화 (Image Optimization)

개념

Next.js는 내장된 이미지 최적화 기능을 제공합니다. next/image 컴포넌트를 사용하여 자동으로 이미지 크기를 조정하고, 웹 최적화를 적용합니다.

사용법

import Image from 'next/image';

const MyImage = () => (
  <Image
    src="/me.png"
    alt="Picture of the author"
    width={500}
    height={500}
  />
);

export default MyImage;

요약

Next.js의 6가지 핵심 원칙은 다음과 같습니다:

파일 기반 라우팅: 파일 시스템을 기반으로 자동으로 라우트를 생성.
서버 사이드 렌더링: 요청 시 서버에서 HTML을 생성하여 전송.
정적 사이트 생성: 빌드 타임에 정적 HTML을 생성하여 성능 최적화.
API 라우트: 서버리스 함수 형태의 API 엔드포인트 제공.
CSS 및 Sass 지원: CSS 모듈 및 Sass를 기본적으로 지원하여 스타일링 캡슐화.
이미지 최적화: 내장된 이미지 최적화 기능을 제공하여 자동으로 이미지 크기 조정 및 웹 최적화.

저작자표시 비영리 동일조건

juni

Next.js 6가지 원칙 및 4가지 랜더링 기법

1. SSG (Static Site Generation)

개념

언제 사용해야 하나요?

사용법

2. ISR (Incremental Static Regeneration)

개념

언제 사용해야 하나요?

사용법

3. SSR (Server-Side Rendering)

개념

언제 사용해야 하나요?

사용법

4. CSR (Client-Side Rendering)

개념

언제 사용해야 하나요?

사용법

요약

Next.js 6가지 원칙

1. 파일 기반 라우팅 (File-Based Routing)

개념

예시

2. 서버 사이드 렌더링 (Server-Side Rendering)

개념

사용법

3. 정적 사이트 생성 (Static Site Generation)

개념

사용법

4. API 라우트 (API Routes)

개념

사용법

5. CSS 및 Sass 지원

개념

사용법

6. 이미지 최적화 (Image Optimization)

개념

사용법

요약

티스토리툴바