[Next.js] 'use client' 왜 쓸까?

 

📌결론

SSR(서버 사이드 랜더링) 을 하는 Next에서 CSR(클라이언트 사이드 랜더링)을 하기위해

 

📌GPT의 설명

"use client"라는 구문은 Next.js 프로젝트에서 사용하는 특별한 기능입니다.

Next.js는 React 기반의 서버 사이드 렌더링 (SSR) 및 정적 사이트 생성 (Static Site Generation)을 지원하는 프레임워크입니다. "use client"는 Next.js의 클라이언트 사이드 라우팅을 활용하는 기능을 사용하기 위한 명령어입니다.

일반적으로 Next.js에서 페이지 간의 이동은 서버 사이드 렌더링을 통해 이루어집니다. 즉, 링크를 클릭하거나 라우터를 이용하여 다른 페이지로 이동하면 서버가 해당 페이지를 렌더링하여 새로운 페이지를 제공합니다. 하지만 클라이언트 사이드 라우팅을 사용하면 페이지 전환을 서버가 처리하는 것이 아니라, 브라우저에서 JavaScript를 통해 페이지 전환을 처리합니다. 이렇게 하면 빠르고 부드러운 페이지 이동이 가능해지며, 사용자 경험을 향상시킬 수 있습니다.

"use client"는 Next.js에서 클라이언트 사이드 라우팅을 사용하기 위해 해당 페이지에서 해당 기능을 활성화하는 명령어입니다. 보통 Next.js에서 페이지 컴포넌트를 정의할 때 해당 페이지 컴포넌트 상단에 "use client"를 작성하여 클라이언트 사이드 라우팅을 활성화합니다.

예를 들어, 다음과 같이 사용할 수 있습니다:

 

// pages/my-page.tsx

use client;

import React from 'react';

const MyPage: React.FC = () => {
  // 페이지 컴포넌트의 내용
  return (
    <div>
      {/* ... */}
    </div>
  );
};

export default MyPage;

 

위와 같이 페이지 컴포넌트에서 "use client"를 작성하면 해당 페이지에서 클라이언트 사이드 라우팅을 사용할 수 있게 됩니다.