npm run build를 하니 에러가 생깁니다.

[윤수호]

fetch는 서버 컴포넌트든 클라이언트 컴포넌트든 상관없이 사용할 수 있는것으로 알고 있는데

분명 "npm run dev"에서는 문제 없이 동작했는데 "npm run build"를 하니 첫번째 사진과 같은 에러가 나왔습니다.

하지만 api를 요청하는 코드를 주석처리하니 문제 없이 build가 되더군요.

왜이러는건지 알려주시면 감사하겠습니다.

(에러 코드)


(에러가 발생한 페이지)

(에러가 발생한 api코드)

[codingapple]

http://127.0.0.1:3000/api/test 로 fetch 요청합시다

[윤수호]

http://127.0.0.1:3000/api/test 로 요청했는데

여전히 이런 에러가 나옵니다.

다행히 4078에러는 사라졌지만 이 에러는 남아있는상태입니다.

[codingapple]

build할 때는 서버가 안떠있어서 fetch가 불가능한듯요 
서버컴포넌트안에 직접 서버코드 작성합시다

[윤수호]

서버컴포넌트안에 직접 서버코드를 작성하라는게 무슨 말인지 잘 모르겠습니다....

[윤수호]

이 방법을 말씀하신건지 모르겠지만

const Page = async () => {
  const res = await fetch("http://127.0.0.1:3000/api/test", { cache: "no-store" });
  let posts;
  if (res.ok) {
    posts = await res.json();
  }

  return (
    <div className="list">
      <div>{posts}</div>
    </div>
  );
};

export default Page;

이렇게 해도 여전히 같은 에러가 나오긴합니다...

[윤수호]

일단

const Page = async () => {
  const res = await fetch("http://127.0.0.1:3000/api/test");
  let posts;
  if (res.ok) {
    posts = await res.json();
  }
  return (
    <div className="list">
      <div>{posts}</div>
    </div>
  );
};
export default Page;

위와같이 , { cache: "no-store" } 이부분을 삭제하니 build가 정상적으로 동작합니다.

왜 fetch의 { cache: "no-store" } 기능을 끄면 정상적으로 build가 되는지 모르겠는데 왜그러는건가요??

만약 사용을 못한다면 client 컴포넌트에서만 저 속성을 사용할 수 있는지 궁금습니다.

[윤수호]

해결했다고 적었었는데 해결됐다가 .next지우고 다시 build하니까 같은 에러가 또 발생합니다.

[codingapple]

/api/test.js 파일에 작성할 내용을 그냥 서버컴포넌트에 작성해놓으면 굳이 fetch 필요없습니다

[윤수호]

혼자서 계속 해보고 있는데 계속 안되서 그런데 혹시 예시 하나만 보여주실 수 있을까요??

[글쓴이]

글