문제
나는 지금 웬만한 요청은 routeHandler 방식을 사용하고 있는데, 이번에 깨달은 게 있다.
클라이언트에서 '/api/country' 로 fetch요청은 가능하지만,
서버에서 '/api/country' 로 fetch요청은 불가능하다.
일단, 내가 요청하는 주소가 현재 상대경로이다.
클라이언트의 경우 브라우저는 현재 호스트를 기반으로 해서 api를 요청하는데,
따라서 상대경로로 fetch요청을 하면, 알아서 현재 호스트를 앞에 붙여서 요청한다.
결국, 'use client'를 붙인 컴포넌트에서 해당 fetch요청을 하면 문제가 없다.
그러나, 서버의 경우는 현재 호스트정보가 없기 때문에 상대경로로 fetch요청을 하면 INVALID_URL 에러가 발생한다.
클라이언트 컴포넌트와 서버 컴포넌트에서 같은 api요청하는 함수를 불러도 함수가 실행되는 곳이 다르기 때문에 결과가 다르다 ^^
참고
참고로 'use server'를 붙이지 않은 함수는 클라이언트에 속하는지, 서버에 속하는지 궁금했다.
답은...
둘다에 속하는 것이 가능하고, build될 때 서버와 클라이언트에서 모두 사용되면 서버와 클라이언트 번들에 각각 만들어지고 서버에서만 사용되면 서버에만,
클라이언트에서 사용되면 js번들에 포함된다는 것을 알게 되었다.
'삽질 로그' 카테고리의 다른 글
[tailwind] tailwind 커스텀 폰트 사이즈, 컬러 덮여쓰여지는 문제.. feat. twMerge (2) | 2025.02.20 |
---|---|
[tailwind] tailwind.config.ts에 객체 import 하기 (0) | 2025.02.19 |
[.env] react .env 파일이 적용 안될 때 (0) | 2024.05.15 |
[VSCode] global snippet 설정하기 (1) | 2024.05.02 |
[git] nextjs프로젝트 git push 파일 용량이 너무 큰 문제, gitignore을 나중에 추가해서 제대로 적용되지 않는 문제 (0) | 2024.04.29 |