남겨진 댓글을 읽고 버튼을 눌러 어떤 이메일인지 확인하는 기능을 구현하고 있었다.
첫 데이터는 SSG로 받아오고 이후에 버튼을 눌러서 받아오는 로직이었다.
위 로직은 ssg로 구현하였다.
loadFeedbackHandler를 추가하였더니
setFeedback(usestate 값)에 의해서
useclient를 사용하여야 했다.
적용한 후 보니,
fs가 사용할 수 없다고 떴다
왜냐하면 fs는 클라이언트 측에서 사용할 수 없기 때문이다.
next 13에서는 client Component를 쓰기 위해선 useClient를 사용해야하고,
그 순간 부터 클라이언트 컴포넌트로 취급한다.
둘중 하나를 포기해야하는 상황이 왔다.
(다시 한번 알아보니 onClick 이벤트도 CSR이었다.)
fetch 데이터를 받아와서 그값을 출력해야해서 usestate를 써야했다.
그렇기때문에 fs를 지우고 CSR 방식으로 수정하였다.
(두번의 fetch를 쓰지않아도 될 것같아서 수정하여서 SSG를 시도하였으나, onClick과 useState값을 뺄 수 없었다)
아래 데이터를 참고하여서 클라이언트를 쓸지 말지 참고하길 바란다.
참고
https://beta.nextjs.org/docs/rendering/server-and-client-components
(Rendering server and client)
https://beta.nextjs.org/docs/data-fetching/fetching
(Data fetching)
fetch 2번은 비효율적이다.
잠을 자고 일어나니, 아쉬운 점이 떠올라서 리펙토링을 했다.
마무리
next 12는 server와 client를 동시에(?) 사용했던 것 같은데 next13으로 그 기능들을 구현하려고하니 당황스러웠다.
https://beta.nextjs.org/docs/rendering/fundamentals를 읽어보면
영역을 확실히 구분하여서 사용하는 쪽으로 가는것 같다.
고민하다보니 SSG->CSR로 변경하는 식으로는 불가능한가?를 많이 찾아보았고 CSR,SSR,SSG에 대해서 열심히 읽어보았는데 그 방식에 도달하지 못했다.
버튼을 눌렀을 때 이후부터는 CSR로 변경하는 방법도 생각하였으나, 비효율적인 것같아서 CSR로 합의를 보았다.
어떻게 해야 SSR,SSG 안에 CSR을 섞어서 부드럽게 사용할지 좀 더 공부하고 고민해봐야겠다.
P.S
계속 무언가 방법이 있을까 계속해서 찾아보았다.
서버에서 사용하는 데이터는 suspens를 활용하여 CSR로 담아주는 방법을 쓰면
서버컴포넌트와 클라이언트 컴포넌트를 좀 더 융합적으로 사용할 수 있다.
https://dev.to/zenstack/a-deep-dive-into-next13-data-fetching-114n
