서버 컴포넌트와 클라이언트 컴포넌트
서버 컴포넌트에서 클라이언트 컴포넌트 함수를 사용하면 에러가 발생한다.
예를 들어 useState,useEffect,onClick, onChange, useRouter, useParams 등이 있다.
또한 특별한 조치를 취하지 않으면 서버 컴포넌트로 간주한다.
정보를 표현하는데 사용자와 상호작용하지 않는다. 이런 것들은 서버 컴포넌트로 만드는게 유리하다.
사용자가 상호작용하는 컴포넌트 예를 들어 버튼등 같은 것들은 클라이언트 컴포넌트로 만드는게 유리하다.
db.json에서 topics 데이터 받아오기
topics 데이터를 받아와 json으로 변환하고 그 결과를 topic state변수에 저장하는 것이다.
하지만 결과는 에러가 발생한다.
useState는 오직 클라이언트에서 작동한다. 여기서는 서버 컴포넌트이고 여기서 useState를 사용했으니 에러가 발생한 것이다.
서버 컴포넌트에서 클라이언트 컴포넌트로 바꿔보자
첫 번째 줄에 "use client"를 사용하면 된다.
이제 topics를 가지고 정적이였던 것을 db.json데이터로 바꿔보자
이렇게 하면 아쉬운 점이 만약 자바스크립트가 동작하지 않으면 해당 코드는 실행되지 않는다. 또한 받아오려는 서버가 멀리 있으면 받아오는데 시간이 많이 소요될 것이다.
또한 SSR의 장점이 사라진다.
서버 컴포넌트로 바꿔보자
fetch를 사용하여 콜백함수를 사용했던 것을 await를 사용하여 간략하게 쓸 수 있다.
이렇게 하여 html만 보내게 되는데 자바스크립트를 제외하고 보내므로 용량이 적다. 접근하고자 하는 서버가 같은 서버라면 fetch하는데 걸리는 시간이 굉장히 빠를 것이다. 클라이언트와 서버간 사이는 멀다.
