[Next js 13] server component vs client component

nextjs는 서버컴포넌트와 클라이언트 컴포넌트로 구분된다.
특별한 처리를 하지 않으면 대부분 서버 컴포넌트로 처리된다.

✅ 서버 컴포넌트가 사용될 때

• 사용자와 상호작용하지 않는 경우
• 백엔드에 엑세스하면서 보안적으로 위험한 정보를 주고 받는 경우

✅ 클라이언트 컴포넌트가 사용될 때

• 서버 컴포넌트로 해결되지 않는 경우
• 사용자와 상호작용하는 경우
• useEffect, useState, onClick, onChange와 같은 API를 사용해야 하는 경우
• useRouter, useParams와 같은 nextjs의 클라이언트 컴포넌트 API를 사용해야 하는 경우

---

💡 서버 컴포넌트로 fetch 사용 방법

기존에 get 요청을 보낼때는 useEffect안에 fetch문을 넣어서 사용했다.

기존코드 

export default function RootLayout({children}: {children: React.ReactNode}) {

    const [topics, setTopics] = useState([]);

    useEffect(() => {
        fetch('http://localhost:9999/topics')
            .then((res) => res.json())
            .then((result) => setTopics(result));
    }, []);
  
  return()
}

그렇지만 nextjs에서 서버 컴포넌트에서는 fetch를 사용할때 useEffect를 사용하지 않는다.

export default async function RootLayout({children}: {children: React.ReactNode}) {

    const res = await fetch('http://localhost:9999/topics');
    const topics = await res.json();

    return ()
}

1. function 앞에 async를 붙여주고, await를 사용해서 fetch문을 실행시킨다.
2. 받아온 result를 json 변환을 시키고 변수에 할당에 사용한다.

---

👍 장점

1. 간결한 코드

• useEffect와 useState와 같은 hook을 사용하지 않아도 되므로 코드가 간결하고 이해하기 쉬워진다.
• 이로 인해 코드 유지 관리가 쉬워지고, 버그 발생 확률이 줄어든다.

2. 빠른 데이터 엑세스

• 데이터 베이스와 같은 자원에 접근해야 하는 경우, 서버 컴포넌트는 서버와 데이터베이스가 가까운 위치에서 작동하므로, 더 빠른 속도로 필요한 데이터에 접근할 수 있다.

3. 보안

• 서버 컴포넌트는 클라이언트에 민감한 정보 (데이터 베이스 비밀번호)를 전송하지 않는다.
• 이로인해 필요한 작업을 안전하게 처리하면서 동시에 클라이언트의 보안을 유지할 수 있다.

4. 향상된 성능

• 서버 컴포넌트는 클라이언트로 javascript코드를 전송하지 않는다.
• 이는 전송되는 데이터의 양을 줄이고, 클라이언트의 부하를 줄임으로써 웹사이트의 전반적인 성능을 향상시키는데 도움이 된다.

---

🚨 error

추가적으로 layout.tsx에서 클라이언트 컴포넌트를 사용할때는 아래와 같은 에러가 발생했다.

이 오류는 metadata는 서버 구성 요소에서만 작동되는 metadata와 클라이언트 구성요소인 useEffect를 같이 사용해서 발생한 오류이다.

해당 오류도 위처럼 useEffect를 사용하지 않고 서버 구성 요소로만 변경해서 사용하면 해결된다. 👍

---

https://opentutorials.org/course/5098/32354