inflearn logo
강의

講義

知識共有

Next.jsを始める

Linkコンポーネントの説明

Link 컴포넌트의 prefetching 기능

解決済みの質問

262

wonse

投稿した質問数 4

1

안녕하세요! Link 컴포넌트의 prefetching 기능에 대해 궁금한 점이 있어 질문 남깁니다. 뷰포트에 들어오는 Link 영역에 대해 미리 데이터를 끌어온다고 하셨는데, 어느 정도 범위까지 데이터를 끌어오는걸까요? 만약 그 링크로 연결된 페이지가 서버 사이드 렌더링을 이용하는 페이지라면 페이지를 미리 그려서 HTML 파일을 완성하는 수준까지 prefetching을 하는 걸까요?

javascript react next.js

回答 1

2

captain

안녕하세요 원세님, 좋은 질문이네요 :) 벌써부터 적용하는 관점에서 깊은 고민을 하시고 질문 주시다니 놀랍습니다 👍

답변을 짧게 드리자면 Link 컴포넌트에 연결된 다음 페이지의 표현할 수 있는 수준의 UI까지 미리 끌어온다고 봐주시면 될 것 같아요. 여기서 표현할 수 있는 수준의 UI는 페이지 컴포넌트 청크를 의미합니다. 페이지 컴포넌트는 강의를 듣다 보면 뒤에 자세히 설명이 될거구요. 청크는 자바스크립트 모듈 청크를 의미해요. 학습 로드맵에 안내된 웹팩 강의를 만약 들으셨다면 청크라는 단어가 낯설지 않을 겁니다 :)

그리구 지금 길게 설명드리는 것보다 뒤쪽에서 구체적으로 서버 사이드 렌더링과 하이드레이션, 그리고 페이지 이동 시에 페이지의 데이터를 어떻게 받아오는지 다 설명드릴 거예요. 천천히 들어보시면서 또 궁금하신 거 있으면 알려주세요 :)

클로드 초기 설정

0

2

1

사용자 스코프 설정 파일 적용 문제

0

5

1

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

0

18

0

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

0

16

2

퍼미션 권한 설정 문의

0

18

2

Next.js + Tanstack Query BFF 구조 질문

0

12

1

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

0

19

2

mcp 설치를 못하겠어요

0

33

2

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

0

24

2

노션 학습 자료 권한 요청

0

17

1

globals.css를 삭제하니 404가 나옵니다

0

73

1

ESLint + Prettier 설정 관련해서 질문있습니다

1

305

2

EsLint flat config format 으로 만들어질 때 참고

0

333

1

<img /> 요소 대신 <Image /> 컴포넌트를 사용해야 하는 이유 (성능 최적화)

0

233

2

컴포넌트가 렌더링되어 HTML이 생성되는 곳 (getServerSideProps VS useEffect)

0

229

1

router를 사용할 때 왜 페이지가 갱신되는지에 대한 질문

1

335

2

Image 컴포넌트 width, height 속성

1

239

2

스페이스 + 컨트롤 눌러도 활성화 안되시는분 참고하세요...

3

340

3

파일명 명명 규칙에 대해서 묻고 싶습니다

1

867

2

getServerSideProps에서 axios 호출시

1

369

2

next create-next-app@latest 설치 문제

1

590

2

bun, biome 사용 질문

0

343

2

eslint 오류..

1

626

2

API Routes를 사용하는 기준과 장/단점에 대해서 알고 싶습니다!

1

889

3