인프런 커뮤니티 질문&답변
작성한 질문수
Prefetch 질문드립니다~
작성
·
138
2
유용한 설명 꼼꼼히 잘 보며 배우고 있습니다..!
몇 가지 궁금한점이 있는데요.
먼저 pages에 있는 모든 파일의 이름을 통해 페이지에 접근할 수 있다는 부분입니다.
특별한 설정 없이도 모든 Gatsby 프로젝트에서 자체적으로 src/pages 폴더에 적용 되는거라고 보면 될까요?
그렇다면 폴더의 이름을 변경하고 싶은 경우에는 어떻게 해야 하나요? src/pages가 아니라 src/routes로 변경하는 경우엔
Gatsby에서 routes내부에 있는 파일의 링크를 생성하지 않는 건가요??
2. Gatsby는 Prefetch를 통해 페이지에서 사용할 리소스의 로딩속도를 높인다고 하신 부분입니다.
만약 해당 페이지에 Link 태그가 점점 많아진다고 하면 미리 로드해오는 데이터가 점점 많아져 속도가 저하될 수 있을것 같은데 그럴경우엔 Link태그를 어떻게 관리해야 하나요???
답변 1
1
안녕하세요, juuu o님!
먼저 첫 번째 질문에 대한 답변입니다!
Gatsby는 기본적으로 File System Routing 방법을 사용하기 때문에 src/pages 디렉토리에 있는 모든 컴포넌트 파일에 대해서는 내부적으로 파일 이름으로 된 페이지를 자동으로 생성해줍니다.
이 부분은 Next.js와 같은 원리에요!
그래서 만약 질문해주신대로 pages 디렉토리를 routes 디렉토리로 변경하면 아무런 페이지도 생성되지 않는 것입니다.
대신, gatsby.config.js 파일에서 createPages API를 사용하면 routes 디렉토리에 있는 컴포넌트들에 대해 페이지를 생성해줄 수 있도록 커스터마이징이 가능합니다.
두 번째 질문에 대한 답변입니다!
기본적으로 Gatsby Link 컴포넌트를 통해 데이터를 Prefetch 하여 로딩 속도를 향상시키지만, Prefetch를 실행하기 위해서는 특정 조건을 만족해야합니다.
바로 브라우저에 보여야 한다는 것입니다.
Gatsby는 내부적으로 해당 강의에 나와있는 Intersection Observer API를 통해 Link가 브라우저 내에 띄워졌다는 것이 감지되면, 해당 Link로 연결된 페이지를 Prefetch 합니다.
자체적으로 이렇게 최적화를 진행했기 때문에 일반적으로는 Link 태그에 대한 관리에 신경을 쓸 필요는 없다고 생각되네요
좋은 질문 정말 감사드립니다 :)
감사합니다~ 이해가 됐습니다!