인프런 커뮤니티 질문&답변
작성한 질문수
리액트와 next의 js번들시 질문
해결된 질문
작성
·
182
·
수정됨
0
안녕하세요 강사님 좋은 강의 감사드립니다.
몇 가지 헷갈리는 점이 있어 질문드립니다.
React (CSR)에서는 js Bundle시 요청 페이지 뿐만 아니라 모든 페이지의 자바스크립트 파일과 컴포넌트들을 불러오는 반면, Next (SSR)에서는 js Bundle시 모든 페이지가 아닌 요청페이지의 파일과 컴포넌트들을 불러온다.
제가 이해한 게 맞을까요?
2. 프리 페칭 시점은 js bundle후 -> 페이지에 접속한 후 -> "프리페칭" 이 시점이 맞을까요?
(프리페칭 시점에 현재 페이지에서 이동할 수 있는 모든 페이지들의 자바스크립트를 사전에 불러온다.)
3. next에서 js bundle시 요청페이지의 파일을 불러온다고 했는데, 요청페이지의 파일은 _app.tsx를 기준으로 하나요?
답변 1
0
안녕하세요 이정환입니다.
순서대로 답변드릴게요
1번. 네 맞습니다.
2번. 현재 페이지에 필요한 JS Bundle이 로드된 이후에 프리페칭이 이루어집니다. 이는 next/Link 컴포넌트에 설정된 주소를 읽어와야하기 때문이기도 하고, 프리페칭 동작 자체도 JS로 작성되어 있기 때문에 그렇습니다.
3번. _app.tsx를 기준으로 한다는 말씀이 정확히 어떤 말씀인지 잘 모르겠습니다. 더 구체적으로 말씀해주시면 추가 답변드릴게요 😃 예를 들어 서치 페이지에 필요한 JS Bundle을 불러오면 search/page.js 파일을 불러오게 됩니다. 이는 .next 폴더 안에서 확인가능해요
2번. 네 맞습니다.
3번. 네 맞습니다. 해당 페이지에 필요한 자바스크립트 번들 파일이 전달됩니다. 개발자도구의 네트워크 탭을 이용해서 직접 확인도 해보실 수 있어요 😃
4번. 네 맞습니다. 프리페칭되어 있지 않은 페이지로 이동시에는 JS Bundle을 이동시에 그때 불러오게 됩니다.
답변 감사드립니다! 더 자세히 여쭤보자면
2번은 프리패칭 시점은 강사님이 표로 보여주신 대로, 현재페이지에 필요한 JS Bundle이 로드되고 수화까지 이루어진 후 프리패칭이 이루어지는 것이죠?
3번은
강사님 강의 6:21 초에 나와있는 것처럼 next에서 초기 접속시 모든 페이지의 자바스크립트 파일을 불러오는 것이 아닌 현재 접속 요청이 발생한 페이지에 해당하는 자바스크립트 파일만 불러온다고 하였습니다.
위 표처럼
next에서 JS Bundle시
만약 처음 로드될 페이지가 index.tsx라면 index.tsx가 요청 페이지니까, index.tsx에 필요한 자바스크립트 파일이 전달된다고 이해했습니다.
그런데 만약 처음 로드될 페이지가 index.tsx가 아닌
search/page.js 라고 가정한다면 Index.tsx 파일은 전달되는 것이 아닌 search/page.js 만 전달되나요?
추가질문입니다.
프리패칭시 현재 연결되어 있는 페이지만(링크 등 현재 페이지 내에서 이동할 가능성이 있는 페이지) 불러온다면 연결되어 있지 않은 페이지로 이동시 처음 화면 렌더링 -> 요청 js bundle -> 수화 ... 부터 다시 실행되나요?