inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

한 입 크기로 잘라먹는 Next.js

2.12) SSR 2. 실습

[id].tsx 서버사이트 호출시 2회씩 되는데요 ㅠㅠ

해결된 질문

281

최경호

작성한 질문수 2

0

안녕하세요.

[id].tsx 소스인데요 .. fetch를 2씩 호출되는 걸까요? ㅠ
2번째 호출될때는 id 값에 undefinded 로 되어서 페이지 오류가 발생됩니다 ㅠㅠ

뭐가 잘못 된것일까요?

캡쳐 보내드립니다.

image.png

 

react typescript next.js

답변 2

0

이정환 Winterlood

안녕하세요 이정환입니다.

해당 문제는 아마 next.config.js 혹은 next.config.mjs 파일의 reactStrictMode 설정이 켜져있어 발생하는 문제로 보입니다. 이에 강의에서 안내드린 것 처럼 해당 파일로 이동하셔서 reactStrictMode의 설정을 false로 꺼 주시면 해결될 것 같습니다.

그럼에도 동일한 문제가 발생한다면 전체 프로젝트의 코드를 깃허브에 업로드 하신 다음 답글로 링크 보내주세요 직접 확인해보겠습니다 감사합니다.

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

Next.js에서 getServerSideProps 함수가 두 번 호출되면서 문제가 발생했을 때, 아래와 같은 점을 확인해보세요:

  1. React Strict Mode 사용 여부: 개발 중에 React의 Strict Mode가 활성화되어 있다면, 컴포넌트와 함수가 두 번 호출될 수 있습니다. next.config.js 파일을 확인해 인트리 모드가 켜져 있는지 확인하고, 설정을 변경해 보세요.

  2. 라우팅 문제: getServerSideProps에서 context.params를 통해 ID를 가져오는데, 가끔 라우트가 제대로 동작하지 않으면 undefined가 반환될 수 있습니다. 이를 확인하기 위해 콘솔에 context.params 값이 올바르게 출력되는지 디버깅 하세요.

  3. 네트워크 요청 확인: 콘솔의 네트워크 탭을 통해 두 번 호출되는 요청의 시점과 원인을 살펴보세요. 개발 도구를 활용해 각 요청의 트리거를 파악할 수 있습니다.

관련 논의 사항과 해결 방법을 자세히 다루고 있는 유사한 질문과 답변을 확인해보시면 도움이 될 수 있습니다:

  • “SSR실습 질문”: getServerSideProps에서 이상이 발생했을 때의 처리 방법에 대한 논의입니다.

확인 후에도 문제가 해결되지 않으면, 추가적인 코드 부분 혹은 더 많은 디버그 정보를 공유해 주시면 더 구체적으로 도와드릴 수 있을 것 같습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문

0

52

2

next.js 프로젝트

0

50

1

Next.js + Tanstack Query BFF 구조 질문

0

47

2

Next.js 사전렌더링 이해하기 부분

0

52

2

모달 관련 질문

0

56

3

렌더링 관련 질문

0

92

2

중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화

0

78

2

라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.

0

76

2

SSR시 context에 params말고 query를 사용하면 안되나요?

0

90

2

npx prisma db push 시 에러가 뜹니다.

0

107

3

vercel 배포를 실패하였습니다.

0

119

3

Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?

0

72

2

getServerSideProps 함수와 SSR의 관계

0

87

6

없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다

0

70

2

실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.

0

123

2

일반적인 nextjs project architecture에 대하여..

0

97

2

2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?

0

82

2

배포 시 오류 발생

0

97

2

백엔드 서버 오류납니다.

0

95

2

취약점 제거시 nestjs 버전 문제가 생길까요?

0

102

1

eslint.config.mjs 내 rules 어떻게 설정 하나요?

0

113

1

[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.

0

69

2

빨간줄 설정

0

87

2

익스텐션 질문

0

64

1