글 읽기 읽기 기능의 경우 사용자와 상호작용하는 게 아니라 내용을 출력할 뿐이라 서버 컴포넌트로 작성하는 게 유리하다. 일단 데이터를 서버로부터 가져와야 하므로 async await를 써준다. // /src/app/read/[id]/page.tsx export default async function Read(props: any) { const resp = await fetch(`http://localhost:9999/topics/${props.params.id}`); const topic = await resp.json(); return ( {topic.title} {topic.body} ); } 참고자료 생활코딩 - Next.js 13 https://opentutorials.org/course/509..

Server Componet VS Client Component Next.js에서는 Server Component, Client Component라는 개념이 구분되어 있다. React 18 버전부터 서버 컴포넌트라는 개념이 추가가 되면서 Next.js가 그걸 가져와서 구분되어 진 것이다. 서버 컴포넌트를 안 써봤다면 지금까지 클라이언트 컴포넌트 방식으로 구현해왔을 것이다. 그리고 클라이언트 컴포넌트에서는 useState, useEffect, onClick, onChange와 같은 것들을 사용할 수 있는데 서버 컴포넌트에서 이런 것들을 사용하게 되면 에러가 발생하게 된다. 두 컴포넌트는 사용할 수 있는 api가 다르다는 것을 기억하면 좋다. 그리고 Next.js에서는 특별한 조치를 취하지 않는다면 서버 컴..