인프런 커뮤니티 질문&답변
작성한 질문수
SSG 폴백 옵션
24.08.22 18:14 작성
·
131
·
수정됨
0
안녕하세요
다이나믹 페이지의 경우 path를 미리 정의해주지 않은 파일들은 빌드가 돼있지 않아 fallback 옵션을 'blocking' 이나 true로 설정해줄 경우 ssr방식으로 사전 렌더링을 하여 html파일을 받아온다고 하셨었는데요
빌드 후 npm run start를 하고나서 직접 빌드 되지 않는 파일로 url에 접근해서 들어가면 확인이 가능하나 메인 페이지에서 책을 클릭해서 들어갈 경우 확인이 안되더라구요
그래서 네트워크를 보니깐 현재 예제로 쓰이고 있는 프로젝트의 책 리스트들의 경우 Link 컴포넌트로 감싸져있어서 js bundle파일을 프리패칭해서 가지고 오고 있었습니다. 정환님 강의를 봤을 땐 프리패칭이 되고 있지 않는 거 같길래 궁금한데 혹시 어떤 옵션을 적용해주신 걸까요?
추가로 링크 컴포넌트로 감싼 책 리스트의 경우 마우스를 오버시키기만 해도
이렇게 데이터들을 불러오는 거 같은데
이건 번들파일이라고 불러야 하나요?? 아님 그냥 요청인 건가요?
한번 불러오고나서는 캐싱되지 않고 원래 마우스 오버만 시켜도 왜 계속 불러오는 걸까요?
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨
질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)
- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)
- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)
질문 하실때 꼭 확인하세요
- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)
- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)
- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)
- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요
- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
답변 2
1
2024. 08. 23. 12:01
안녕하세요 앙엉님 이정환입니다.
우선 프리페칭에 대해서부터 말씀드릴게요 !_!
일단 저도 앙엉님의 환경처럼 인덱스 페이지에서 다음과 같이 프리페칭이 정상적으로 이루어집니다.
그리고 링크(도서 아이템)에 마우스를 호버 해도 다음과 같이 프리페칭이 계속 발생합니다.
이렇듯 Link 컴포넌트에 마우스를 호버하면 자동으로 프리페칭이 이루어지는데요 이는 Next Link 컴포넌트의 의 기본적인 동작 방식입니다.
추가로 이런 마우스 호버시 발생하는 프리페칭의 경우 사용자가 이 경로로 이동할 가능성이 높다고 판단하기 때문에 Link 컴포넌트의 prefetch 옵션을 false로 설정해 프리페칭을 꺼도 발생하게 됩니다. 결론적으로 무조건 발생하게 된다고 생각하시면 되겠습니다.
그러나 이때 이렇게 마우스를 올릴 때 마다 계속해서 프리페칭이 발생하면 성능상의 악화를 불러일으키는게 아닌가 걱정하실 수 있는데요 위 그림에서 보이시는 것 처럼 마우스 호버시 발생하는 프리페칭 Request의 Status Code는 304입니다.
304는 Not Modified 라는 뜻으로 "데이터가 변경되지 않았으니 캐시에 있는 값을 사용하겠다" 라는 뜻입니다. 따라서 성능에는 큰 악영향을 미치지 않습니다.
2024. 08. 27. 20:01
안녕하세요 이정환입니다. 순서대로 답변드릴게요 😃
프리페칭이 이루어지게 되면 서버측에서 페이지를 생성하게 됩니다. 이때 만약 그렇게 생성된 페이지가 SSG로 설정되어 있다면 그렇게 생성한 페이지를 서버측에 보관합니다. 마치 방문한 것 처럼 말이죠 따라서 예를 들어 book/4 처럼 아직 생성되지 않은 페이지라고 하더라도 프리페칭이 이루어질 때에 HTML 페이지까지 함께 생성되어 서버측에 보관됩니다.
결론 : 프리페칭시에도 방문한 것 처럼 페이지를 생성해 서버측에 보관한다 (SSR 제외)
기본적으로는 프리페칭시에는 JS Bundle만을 불러옵니다. 그러나 프리페칭되는 페이지가 getStaticProps를 사용하는 SSG페이지 일 경우 해당 페이지의 getStaticProps의 리턴값을 담고 있는 JSON 파일까지 함께 불러오게 됩니다.
예를들어 우리 프로젝트의 book/4번 페이지의 경우 아래 그림처럼 JSON파일과 JS Bundle을 모두 함께 불러오는 걸 보실 수 있습니다.
그리고 이때 불러오는 이 JS Bundle 파일은 book/4번 페이지만의 JS Bundle이 아닌 book/[id] 경로의 모든 페이지를 위한 JS Bundle이므로 딱 한번만 불러오는걸 보실 수 있습니다.
이제 답변을 정리해보자면 다음과 같겠네요
Next.js의 프리페칭은 기본적으로는 이동 가능성이 있는 페이지의 JS Bundle 파일을 불러옵니다.
이때 프리페칭 대상 페이지가 SSG일 경우 아래와 같은 특수 동작이 추가됩니다.
해당 페이지의 getStaticProps의 반환값을 JSON 형태로 추가 전달합니다.
서버측에 HTML 페이지를 생성해 보관합니다 (이미 보관되어 있는 경우 생략합니다)
강의에서는 이렇게 까지 상세히 프리페칭에 대해 다루지 않았는데요 그 이유는 본 강의의 핵심은 3섹션부터 전개되는 App Router에 있기 때문입니다. 따라서 최대한 덜 지루하게 Page Router를 학습하시기 위해 프리페칭의 경우 최소한의 핵심적인 기능만 소개해드렸습니다.
그러나 이렇게 답변을 드리다보니 본 내용도 함께 강의에 추가되면 더 좋을 것 같네요 이 사항은 고려해보도록 하겠습니다! 감사합니다.
2024. 08. 28. 12:27
상세한 답변 감사합니다
마지막으로 더불어서 질문하나만 더 드리고 싶은데요
해당 이미지에서 props를 계산해서 클라이언트에 보내주는 저 과정이
json 파일을 받아오는 저 과정이라고 알고있으면 될까요??
0
2024. 08. 22. 18:16
안녕하세요, 인프런 AI 인턴입니다.
앙엉님의 질문에 대한 답변으로, 사전 렌더링과 프리패칭에 대해 이야기 하겠습니다. Next.js에서 사전 렌더링은 각 페이지를 미리 HTML 파일로 만들어 두는 과정을 말합니다. 특히 다이나믹 페이지의 경우, getStaticPaths에서 반환된 paths에 명시된 페이지만 빌드 타임에 HTML로 만들어지며, 나머지 페이지는 요청이 있을 때 생성됩니다. 이때 fallback: true 또는 fallback: 'blocking' 옵션을 설정하면, 명시되지 않은 페이지에 대해 사용자의 첫 요청시 서버사이드 렌더링(SSR)을 수행하여 페이지를 제공합니다.
fallback: true설정의 경우, Next.js는 빌드되지 않은 페이지에 대한 요청이 있을 때, 사용자에게 빈 화면 또는 로딩 중임을 알리는 화면을 먼저 보여주고, 백그라운드에서 해당 페이지를 SSR로 생성한 뒤 화면에 렌더링합니다.
fallback: 'blocking'설정의 경우, 사용자가 바로 생성된 페이지를 볼 수 있도록, 페이지 생성이 완료될 때까지 기다렸다가 화면에 렌더링합니다.
질문하신 프리패칭(pre-fetching) 부분에 대해서는, Next.js에서 Link 컴포넌트를 활용한 페이지 간의 이동 시에는, Next.js가 사전에 해당 페이지의 자바스크립트 코드와 필요한 데이터를 미리 불러오는 기능을 말합니다. 즉, 사용자가 링크를 클릭하기 전에 브라우저가 미리 해당 페이지의 리소스를 가져와 빠른 페이지 로딩을 가능하게 합니다. 이 과정은 Next.js의 프리패칭 기능과 관련이 있으며, 기본적으로 Link 컴포넌트에 적용되어 있습니다.
현상을 정확히 이해하기 위해, nextjs 프리패칭 질문에서 다룬 내용을 참고하시면 도움이 될 것 같습니다. 해당 답변에서는 Next.js의 프리패칭 작동 원리와 함께 다이나믹 라우팅 시 프리패칭이 어떻게 적용되는지에 대한 설명이 포함되어 있습니다.
만약 귀하의 프로젝트에서 프리패칭이 예상과 다르게 작동하는 경우, 프리패칭이 활성화되어 있는지, 혹은 특정 상황에서 프리패칭이 비활성화되어 있는지 확인하기 위한 방법으로는 Next.js의 공식 문서를 참조하거나, 개발자 도구의 네트워크 탭을 통해 실제로 어떤 리소스가 사전에 불러와지고 있는지 확인하는 것이 좋습니다. 또한, 프리패칭 동작을 커스텀하게 제어하고자 할 때는 Link 컴포넌트의 prefetch 속성을 활용하여 조절할 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
2024. 08. 27. 16:40
안녕하세요 정환님 이해했습니다 감사합니다
근데 마우스 오버를 하지 않고 스크롤만 하여도 관련된 북 리스트들을 프리페칭하다보니
책을 클릭하여 디테일 페이지로 들어간다고 하더라도 ssr방식으로 html을 서버에서 보내서 받는 과정을 볼 수가 없습니다.
그래서 궁금한 것이
1. 정환님과 같이 책을 클릭하기 전까지는 프리페칭을 하지 않고 클릭하고 나서 ssr방식으로 html을 받아오는 과정을 볼 수 있는 것인지.
마우스를 오버하거나 스크롤시 프리패칭 하여 받아오는 데이터가 js bundle파일인 건지 아님 단순히 json파일인 건지 궁금합니다. (강의에서는 js bundle파일이라고 배웠으나 네트워크 탭에는 json이라고 찍혀있어서요)