그러니까 아까의 경우에는 최상위 부모 컴포넌트가 서버 컴포넌트이고 여기서 데이터 패칭을 한 후 그걸 자식 컴포넌트로 보내고 있으니 프리랜더링이 되는 셈이다. 단지 받아온 데이터가 보이지 않았던 이유는 recoil 값을 사용하여 datas 배열을 잘라 새 배열로 만든 후, 그 값을 가져다 사용했기 때문이다. recoil은 클라이언트 컴포넌트에서만 사용할 수 있고, 그 결과 자바스크립트를 꺼둔 상태에서는 클라이언트 요소는 가져올 수 없으므로 받아온 데이터가 보이지 않았던 것. recoil 값이 없을시(렌더링이 완전히 끝나기 전에는 recoil 값을 받아올 수 없으니) default 값을 처리해주면 다시 받아온 데이터가 화면에 뜨는 것을 볼 수 있다. 자바스크립트 기능을 끄고 데이터가 한참 동안이나 화면에 보..

서버 컴포넌트는 서버에서 렌더링되고 클라이언트로 전달되며, 클라이언트에서는 JavaScript가 실행되지 않습니다. 반면 클라이언트 컴포넌트는 클라이언트에서 렌더링되고 JavaScript가 실행됩니다. 서버 컴포넌트 내부에 클라이언트 컴포넌트가 있는 것은 허락이 되나, 클라이언트 컴포넌트 내부에 서버 컴포넌트를 둘 수는 없습니다. (사실상 클라이언트 컴포넌트 내부에 서버 컴포넌트랍시고 "use client"를 선언하지 않고 컴포넌트를 내부에 둬도 결국 클라이언트 컴포넌트로 동작하게 되는 것 같았습니다. 그래서 제가 서버 컴포넌트라고 생각한 곳에서 async, await를 사용하여 데이터 패칭을 진행하려고 했으나, 클라이언트 컴포넌트 내부에서는 async, await를 사용할 수 없다는 에러가 떴습니다.)..