Next.js 두 번째

서버 컴포넌트 / 클라이언트 컴포넌트

 

서버 컴포넌트는 말 그대로 보여주기적 요소만 있는 컴포넌트, 또는 동적 기능이 없는 컴포넌트

정적 렌더링과 보안적 특성이 강함 -> axios,fetch 등 get 요청을 할 때는 서버 컴포넌트에서 사용하는게 좋음

 

대신 상태/이벤트 핸들링이 불가능 -> useState, useEffect 같은 훅 사용이 불가능

정적인 화면이므로 인터랙션이 불가능.

// 서버 컴포넌트 (초기 데이터 fetch)
export default async function Page() {
  const data = await fetch('https://api.example.com/items');
  const items = await data.json();
  
  return <ItemList initialItems={items} />;
}

 

 

 

가장 먼저 파일 최상단에 "use client" 작성.

클라이언트 컴포넌트는 실질적 기능과 로직을 수행하는 컴포넌트. useState나 useEffect 등을 사용 가능함. 또한 이벤트 핸들러를 여기서 작성

ajax 중 put, post, delete는 클라이언트 컴포넌트에서 수행. get만 서버 컴포넌트에서 사용. 왜냐하면 앞의 세 메서드는 사용자와의 상호작용과 함께 실행하는게 보통이기 때문

 

그래서 put, post,delete를 사용할 함수들은 가장 첫 줄에 "use server" 를 달아 함수가 서버에서 실행되도록 명시.

export async function createItem(formData: FormData) {
  'use server';
  const name = formData.get('name');
  const description = formData.get('description');
  // DB 작업...
  console.log('서버에서 아이템 생성:', { name, description });
  await new Promise(resolve => setTimeout(resolve, 500));
  revalidatePath('/practice03');
  return { success: true, message: '아이템이 성공적으로 생성되었습니다.' };
}

export async function updateItem(id: string, formData: FormData) {
  'use server';
  const name = formData.get('name');
  // DB 작업...
  console.log(`서버에서 아이템 ${id} 업데이트:`, { name });
  await new Promise(resolve => setTimeout(resolve, 500));
  revalidatePath('/practice03');
  return { success: true, message: '아이템이 성공적으로 업데이트되었습니다.' };
}

export async function deleteItem(id: string) {
  'use server';
  // DB 작업...
  console.log(`서버에서 아이템 ${id} 삭제`);
  await new Promise(resolve => setTimeout(resolve, 500));
  revalidatePath('/practice03');
  return { success: true, message: '아이템이 성공적으로 삭제되었습니다.' };
}

 

 

 

 

또한 Next.js 에서는 axios 보단 fetch를 주로 사용.

axios는 재검증과 캐싱 방식을 제어할 수 없어서 개선된 fetch를 주로 사용한다고 한다.

 

일단 Next.js는 여기까지 알아보고 클론코딩하면서 막히면 더 알아보는 식으로 진행