개발자
Next.js App router를 사용하고 있습니다. 간단한 검색기능을 구현하는 프로젝트를 진행 중인데 패칭 과정은 아래와 같습니다. 1. 자식 Client 컴포넌트에서 url의 searchParams(router.replace)를 변경하면, 2. 부모 Server Component는 변경된 Search Params를 바탕으로 라우트 핸들러에서 서버에 요청을 하고 필요한 데이터를 Server Component로 받아옵니다 . (부모 RSC는 캐싱을 하지 않게 구현되어있습니다.) 3. 받아온 데이터를 가공 후 자식 Client 컴포넌트에 내려주면, 4. props를 받은 자식 Client 컴포넌트에서 보여주는 방식으로 진행하고 있습니다. 위 과정에서 에러가 발생하는 것은 아니고 정상적으로 잘 동작하고 있습니다. 다만 브라우저 devtool의 Network 탭을 확인하는데 의문점이 있어서 질문을 드립니다. RSC에서 요청을 하면 _rsc 페이로드로 데이터를 받아오는 걸로 알고 있습니다. 분명 _rsc로 요청이 가고 정상적으로 네트워크탭의 preview에 RSC 페이로드가 찍히는가하면 정상적으로 요청이가고 페이지를 확인했을 땐 정상적으로 패칭과 렌더링까지 완료되었는데, 네트워크에서 preview에는 "no data found for resource with given identifier"로 나옵니다. 결론은 패칭과 렌더링은 정상적으로 동작하지만 네트워크탭의 preview와 response가 나올 때도 있고 안 나올 때도 있어서, 명확한 기준이 있는지 궁금해서 질문을 올립니다.
답변 0
첫 답변을 기다리고 있어요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 03월 11일
계속해서 네트워크 탭에서 일관성 없는 동작을 보시는 것 같네요. DevTool의 Network 탭은 웹 브라우저가 주고받은 모든 HTTP 요청과 응답을 캡처하므로, 이 표시가 일관성이 없다면 대체적으로 다음 중 하나로 추정될 수 있습니다. 1. 캐싱: 이미 언급하셨듯이, RSC가 캐싱 설정에 따라 요청을 수행하지 않았을 수 있습니다. 하지만 '부모 RSC는 캐싱을 하지 않게 구현되어있다'고 한 점에서 살펴보면, 이 경우는 아닌 것 같습니다. 2. 서버 또는 클라이언트 사이드의 오류: 다른 변수들이 상수인 상황에서 결과가 일관성 없게 나온다면 이것은 종종 응용 프로그램 자체의 버그를 나타낼 수 있습니다. 3. DevTools 자체의 문제: 특히 크롬 개발자 도구 등 브라우저 개발도구는 때때로 약간 버그를 포함할 수 있습니다. 특정 요청에 대한 정보가 일관성 없게 표시되면 DevTools 자체의 문제일 수도 있습니다. RSC(Request Server Component)는 아직 실험적인 기능으로, Next.js에서 완전히 지원되지 않습니다. 이로 인해 일부 알려지지 않은 동작이나 버그가 발생할 수 있으므로 참고하시기 바랍니다. 현재 진행중인 작업에 대해 디버깅을 계속 하시면서, 위의 가능성들 중 어떤 것이 문제를 일으키는지 확인해보시는 것이 좋겠습니다. 또한 Next.js 커뮤니티 또는 GitHub 이슈 트래커에서 비슷한 문제를 겪은 다른 개발자들의 경험을 찾아보는 것도 추천드립니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!