서버 컴포넌트

Next.js에서는 서버 컴포넌트라는 새로운 개념이 도입되었다.

 

처음에 내가 이해한게 긴가민가해서 메모를 하며 이해해야할 것 같다.

 

React와 Next.js의 주요 차이점

 

- React : 브라우저에서 모든 자바스크립트가 실행된다. 즉 클라이언트 사이드 렌더랑 (CSR) 방식으로 작동된다.

 

- Next.js : 서버 컴포넌트와 클라이언트 컴포넌트를 분리해서 사용할 수 있다.

 

---

서버 컴포넌트란?

 

• 서버에서 실행되는 컴포넌트
• Node.js 환경에서 실행된다. -> 따라서 콘솔을 찍으면 터미널에서 출력이된다. (페이지에서 관리자 도구로 확인해도 나타나지않는다.)
• 브라우저에 자바스크립트를 거의 전달하지 않는다. -> 성능 최적화가 좋다. (페이지 로딩이 빠르다)
• 데이터베이스 접근, API호출, 보안 로직에 적합하다.

 

// app/page.tsx (Next.js 13+)
export default function Home() {
    console.log("서버에서 실행되는 콘솔 로그");  // 터미널에 출력
    return <div>Hello, Server Components!</div>;
}

 

---

클라이언트 컴포넌트란?

 

• 브라우저에서 실행되는 컴포넌트 (아마 일반 리액트 생각하면 편할 것 같다.)
• useState, useEffect 같은 리액트 훅 사용 가능
• 자바스크립트가 브라우저에 전달된다.
• 상호작용이 필요한 컴포넌트 (버튼 클릭, 폼 제출 등)에 적합하다.

"use client";  // 이 파일은 클라이언트 컴포넌트임을 명시

import { useState } from 'react';

export default function Counter() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

 

 

---

 

결론

• 서버 컴포넌트는 node.js 환경에서 실행되며 콘솔이 터미널에 찍힌다.
• next.js는 서버 중심의 렌더링을 기본으로 하며 필요에 따라 use client를 사용하여 클라이언트 컴포넌트로 전환이 가능하다.

 

---

 

- 내가 이해한 것

 

즉, next.js에서는 이제 컴포넌트가 서버 컴포넌트와 클라이언트 컴포넌트 두 종류로 분류해가며 사용해야하며

용도에 맞게 사용해야할 것 같다. node환경에서 바로 사용해도 좋을 것과 클라이언트 컴포넌트에서 사용해야 좋을 것

구분 짓는 것이 처음에는 꽤나 힘들 것 같지만 사용해가며 이해해야할 것 같다.