혹시 ssr과 csr을 병행하여 사용하고 싶을 땐

Question

api/(site)/page.tsx 에 actions/todo/todo.actions.ts를 사용하고 하위컴포넌트들에서는 ex) api/(site)/compoents/...container.ts 내부에서는 hook을 임포트한것들이 apis/todo-no-rls.ts를 사용하면 될까요? *위 예시는 강의에서 다룬 파일만을 예를 들었보았습니다.

dodocoding · Answer

1. 결론적으로는 actions/todo/todo.action.ts 을 사용해서도 SSR, CSR모두 대응이 가능합니다. -참고 코드 : https://github.com/dodokyo/supa-next-todo/blob/main/actions/todo/todo.action.ts SSR 시나리오 : 서버에서 서버사이드 랜더링 과정에서, 서버의 함수(actions/todo/todo.action.ts)을 호출하는것은 문제가 없습니다. CSR 시나리오 : 브라우저에서 서버의 함수 ( actions/todo/todo.action.ts )을 호출하는것은 원래는 불가능합니다. 하지만 가능 합니다. 개발자 입장에서는 함수를 import 해서 사용하면 됩니다. 뒤에서 NextJS에서는 이를 API 로 만들어서 처리하죠.   서버 액션으로 한번에 처리하지 않더라도 말씀하신것처럼 해도 괜찮습니다. SSR 시나리오 1번과 동일 합니다. CSR 시나리오 apis/todos-no-rls.ts 는 createSupabaseBrowserClient 를 사용하고 있기 때문에, 브라우저에서 supabase 서버로 데이터 패칭을 합니다. 참고 코드 : https://github.com/dodokyo/supa-next-todo/blob/main/apis/todos-no-rls.ts

eymin1259 · Answer

물론 프로젝트의 크기와 구조, 기능, 팀원과의 의견 등으로 나뉘어지겠지만 actions/todo(프로젝트명)/csrApi/todo(프로젝트명).ts actions/todo(프로젝트명)/ssrApi/todo(프로젝트명).ts 이런식으로 관리하는게 좋을까요? 아니면 강의에 나온것처럼 ssr은 actions폴더 및에 csr은 apis밑에 나누는게 좋을까요?