프론트엔드/Next.js
Next.js - 클라이언트 컴포넌트, 서버 컴포넌트
장쫑이이
2024. 9. 25. 22:14
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;
클라이언트와 서버가 각각 실행되는 것을 볼 수 있음