인프런 커뮤니티 질문&답변
작성한 질문수
혹시 ssr과 csr을 병행하여 사용하고 싶을 땐
해결된 질문
작성
·
135
·
수정됨
답변 2
1
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
0
물론 프로젝트의 크기와 구조, 기능, 팀원과의 의견 등으로 나뉘어지겠지만
actions/todo(프로젝트명)/csrApi/todo(프로젝트명).ts
actions/todo(프로젝트명)/ssrApi/todo(프로젝트명).ts
이런식으로 관리하는게 좋을까요? 아니면 강의에 나온것처럼 ssr은 actions폴더 및에 csr은 apis밑에 나누는게 좋을까요?
서버액션은 scr, ssr 나누지 않아도 괜찮습니다. 공용으로 사용 가능해요.!
'use server' 을 붙이면 항상 서버에서 실행됩니다.
서버는 서버함수를 쓸 수 있어요.
클라이언트는 서버함수를 쓸 수 있어요. ( POST API로 함수를 호출하고 응답값을 받아옵니다. )
*유사한 개념의 rpc를 조사해주시면 이해가 되실꺼에요. next.js의 서버액션은 사실 기존 클라이언트 상태계에 흔하지 않던 방식이거든요.