Next.js - 클라이언트 컴포넌트, 서버 컴포넌트

 

Next.js에서 컴포넌트를 사용

const HomePage = () => {
  console.log("콘솔아 나타나라");
  return (
    <div>
      <h1>Home Page</h1>
    </div>
  );
};

 

console.log가 브라우저 환경에서는 실행되지 않고, 서버에서만 실행됨

 

 

 

"use client" 추가

하단에 있는 컴포넌트 들이 클라이언트에서 실행될 수 있는 로직이다는 걸 Next.js에게 알려주는 것

Home에 의해 그려지는 render tree들은 모두 클라이언트 tree로 변하게 됨

"use client";

const HomePage = () => {
  console.log("콘솔아 나타나라");
  return (
    <div>
      <h1>Home Page</h1>
    </div>
  );
};

 

페이지를 새로고침하면 브라우저와 서버 둘 다 실행됨

 

 

 

클라이언트 사이드에서 리액트를 사용하는 hook들은 클라이언트에서만 사용이 가능함 (예를 들어 useEffect, useState)

여기도 use client는 필수!!

"use client";

import { useEffect } from "react";

const HomePage = () => {
  useEffect(() => {
    console.log("콘솔아 나타나라");
  }, []);
  return (
    <div>
      <h1>Home Page</h1>
    </div>
  );
};

 

브라우저(클라이언트)에서는 실행되는데 서버에서는 실행이 안되는 모습

 

 

 

서버 컴포넌트 vs 클라이언트 컴포넌트??

클라이언트 컴포넌트 - 유저와의 상호작용, 인터랙션이 있는 경우, hook을 사용해야하는 경우

서버 컴포넌트 - 나머지의 경우

 

 

둘 다 한 페이지에서 써야하는 경우는?

따로 ClientExample.tsx 파일을 만든 후 거기에 클라이언트 컴포넌트를 만들어줌 > 두개의 tree를 섞어서 사용 가능

// src > component > ClientExample.tsx

"use client";

import { useEffect } from "react";

const ClientExample = () => {
  useEffect(() => {
    console.log("안녕, 난 클라이언트 컴포넌트야");
  }, []);
  return (
    <div>
      ClientExample
    </div>
  );
};

export default ClientExample;

// home > page.tsx

import ClientExample from "../component/ClientExample";

const HomePage = () => {
  console.log("안녕, 난 서버 컴포넌트야");
  return (
    <div>
      <ClientExample />
    </div>
  );
};

export default HomePage;

클라이언트와 서버가 각각 실행되는 것을 볼 수 있음