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

난 웬만해서 next.js에서 서버 컴포넌트를 사용하여 데이터 패칭하는 것을 선호한다. 데이터 패칭 외에도 웬만해서 서버 컴포넌트를 유지하려고 하는 편이다. 그 이유는 당연히 프리렌더링 때문이다. 물론 계산 용량이 너무 크다면 서버에서 계산해도 프리렌더링이랑 상관없이 빈 화면이 보이게 되겠지만 웬만해선 프리렌더링이 데이터를 빠르게 가져와 보여주는데 유리하다는 생각이 들었다. 그런데 이런 상황에도 불가피하게 클라이언트 컴포넌트에서 데이터 패칭을 하는 경우가 생기지 않겠는가? (나는 생기더라... 다른 사람들은 모르겠다) 나는 이런 경우에 클라이언트 컴포넌트에서 데이터 패칭이 되면 프리렌더링은 안 되겠지만 해당하는 부분만 Suspense 기능을 사용하여 로딩 화면이라도 보여주고자 하였다. 그래서 가장 최상위..

일단 "http://localhost:3000/album/272a8c26-96f7-489b-86b4-537189bfc654" 라는 주소가 있다고 가정을 해보겠다. 사실 내가 지금 프로젝트에서 생성해둔 주소이다. 클라이언트 컴포넌트에서 url 받는 방법 : 1. 동적(id)으로 생성된 세그먼트 값 얻기. 보다시피 /272a8c26-96f7-489b-86b4-537189bfc654 이 부분은 [id]라는 동적 세그먼트를 통하여 생성된 것이다. 이 값을 얻기 위해서는 useParams()를 사용하면 된다. useParams() : 현재 URL로 채워진 경로의 동적 매개변수를 읽을 수 있게 해주는 클라이언트 구성 요소 후크. const params = useParams(); console.log(params);..

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