inflearn logo
강의

講義

知識共有

Next.jsフルスタックGithub Issueサービスの作成

[sucode] 25. サーバーサイドレンダリング解除

서버 사이드 렌더링이 발생하는 이유

解決済みの質問

416

kimgnidev3366

投稿した質問数 13

0

클라이언트 컴포넌트로 지정했는데도 서버사이드 렌더링으로 동작하는 이유가 뭔가요?

 

react typescript next.js prisma vercel

回答 1

0

Su

안녕하세요 kimgni.dev님, 질문해 주셔서 감사합니다!! 오류가 발생하는 코드를 보내주시면 면밀히 검토가 가능할 것 같습니다!! 일반적으로 클라이언트 컴포넌트가 서버 컴포넌트로 렌더링되는 이유는 다음과 같습니다.

 

1. 잘못된 컴포넌트 구성: 컴포넌트가 클라이언트 사이드 전용으로 올바르게 설정되지 않았을 수 있습니다. 예를 들어, Next.js의 dynamic() 함수를 사용하여 컴포넌트를 불러올 때 { ssr: false } 옵션이 포함되어 있는지 확인하세요.

 

2. 외부 데이터 의존성: 컴포넌트가 서버 사이드에서 필요한 외부 데이터에 의존하고 있을 수 있습니다. 이 경우, 컴포넌트는 클라이언트 사이드에서 렌더링되기 전에 서버 사이드에서 먼저 렌더링될 수 있습니다.

 

3. 부모 컴포넌트의 영향: 부모 컴포넌트가 서버 사이드 렌더링을 사용하고 있다면, 자식 컴포넌트 역시 영향을 받을 수 있습니다. 컴포넌트 트리 전체를 확인하여 어느 부분에서 SSR이 발생하는지 파악해야 합니다.

 

4. 서버 사이드 로직: 컴포넌트 내부나 관련 모듈에서 서버 사이드에서만 실행되는 코드가 있는지 확인하세요. 예를 들어, windowdocument와 같은 브라우저 전용 객체에 접근하는 경우, 이러한 코드는 클라이언트 사이드에서만 실행되어야 합니다.

 

5. 빌드 및 배포 설정: 프로젝트의 빌드 및 배포 설정에서 문제가 발생했을 수도 있습니다. Next.js의 설정 파일(`next.config.js`)과 배포 환경을 점검하세요.

 

감사합니다! 오늘도 좋은 하루 보내세요😸😸

클로드코드 유료플랜 할인 방법이 있을까요?

0

16

0

제네릭 클래스 핸드북 페이지가 undefined라고 나옵니다.

0

8

1

API Error : 400 에러의 원인과 해결방법이 궁금합니다!!

0

16

2

퍼미션 권한 설정 문의

0

18

2

Next.js + Tanstack Query BFF 구조 질문

0

12

1

커서에서 shift+enter가 안됩니다.

0

19

2

mcp 설치를 못하겠어요

0

32

2

라이브러리 관련 질문 있습니다!

0

24

2

노션 학습 자료 권한 요청

0

17

1

output-styles은 Claude Code의 공식 기능이 아니라고 하는데 혹시 변경된걸까요?

0

22

2

클로드 변경

0

25

2

/config 에서 output-style 을 변경

0

23

1

한국어 문제

0

25

2

part2강의 문의사항입니다.

0

19

2

Node.js 관련 질문드립니다.

0

29

3

클로드 버전업 설치

0

26

2

강의 05 디비...질문드려요

0

404

2

로그인 로그아웃 문제

1

465

2

이슈 삭제 API delete 요청 오류 반환

2

751

1

vercel 배포후 메인페이지 데이터 연동이 안됩니다

1

539

1

Prisma.issue.findMany라우터 가 아닌 페이지에서 사용 ( in 60. 이슈 필터링 기능 구현 )

1

283

1

개인적으로 궁금함입니다.

1

454

1

react-simplemde-editor 사용시 ReferenceError 가 발생합니다

1

366

1

화질개선 가능여부

2

284

1