인프런 커뮤니티 질문&답변
작성한 질문수
jsbundle의 이름이 도중에 변경 되어도 nextjs가 인지하고 받아올 수 있나요??
해결된 질문
작성
·
68
·
수정됨
0
안녕하세요 덕분에 next.js를 깊게 공부할 수 있었습니다.
next.js는 기존 리액트와 다르게 jsbundle(청크) 파일을 나누어 받아 옵니다.
강의에서 본 것처럼 청크 파일들이 각각의 유니크한 해쉬 값을 가지는 것도 확인했습니다.
시나리오
next 프로젝트를 빌드
배포 된 웹페이지를 오픈
next 프로젝트를 다시 빌드
기존의 웹페이지를 새로고침 하지 않고, 페이지 이동
기존 리액트 프로젝트에서는 하나의 청크 파일을 처음 한 번에 받아서 새로고침 전까지 1번의 이전 빌드된 웹페이지로 동작이 되는 것으로 알겠는데요.
next프로젝트에서는 jsbundle과 rsc_payload를 필요한 시점에 받으니까 새로 빌드한 파일엔 기존 청크해시 값과 달라서 문제가 생기지 않을까? 라는 생각이 들었습니다. 그런데 테스트 해보니 별다른 문제가 생기지 않는 것 같더라구요..
jsbundle과 rsc_payload의 유니크한(해쉬) 파일 이름이 도중에 변경 되더라도 next 서버측에서 찾을 수 있게 조치가 되어 있는 걸까요?
답변 2
0
안녕하세요 이정환입니다.
엄청나게 예리한 질문을 주셨네요 👀
실제로 이런 문제를 버전 왜곡(Version Skew)라고 부릅니다. 그리고 Next.js는 자체적으로 버전 왜곡에 대한 문제를 자동으로 해결하는 기능을 제공하고 있습니다.이에 대해서는 다음 공식문서에 자세한 설명이 나와 있으니 공식문서 링크로 제 설명을 대신하겠습니다 😃
https://nextjs.org/docs/pages/building-your-application/deploying#version-skew
혹시 하나만 더 질문드려도 괜찮을까요??
예를들어 foo폴더 page컴포넌트에 'use client'를 사용해서 클라이언트 컴포넌트로 만들었는데요 그래도 foo?_rsc를 받을 수 있는 이유가 무엇일까요??
제가 한 번 생각 해보기로는
서버 컴포넌트인 layout컴포넌트 내에 page 컴포넌트가 있어서 rsc_payload를 받아 온것이다.
page 컴포넌트가 서버 컴포넌트던 클라이언트 컴포넌트던, nextjs는 해당 페이지에 대한 js번들 경로를 가지고 있어야 하기 때문에 자체적으로 서버 컴포넌트를 만들고, rsc_payload를 만들어 내려준다.
안녕하세요 이정환입니다.
넵 그럼요 질문은 언제든지 얼마든지 환영입니다!
아래의 질문과 동일한 내용을 질문해 주신 것 같아 질문 링크로 답변을 대체하겠습니다 😃
0
안녕하세요, 인프런 AI 인턴입니다. dl_audgh님께서 Next.js에서의 js 번들 파일과 관련하여 질문해 주셨네요.
일반적으로 Next.js는 빌드된 페이지의 정적 파일을 아주 효율적으로 관리하고 로드하게 설계되어 있습니다. 이에 따라, JS 번들 파일과 리액트 서버 컴포넌트 페이로드(RSC Payload)도 각 파일의 콘텐츠를 바탕으로 유니크 해쉬를 생성하여 관리합니다. 이 구조는 개별 번들 파일이 변할 때 발생할 수 있는 충돌을 방지하면서 최신의 파일을 빠르게 로드하는 데 도움을 줍니다.
유니크 해쉬와 서버 핸들링
유니크 해쉬: 각 js 번들 및 RSC Payload 파일은 콘텐츠 기반의 해쉬로 생성됩니다. 이는 웹앱이 빌드되면 번들링되는 파일이 변경 사항에 따라 다르게 생성된다는 의미입니다.
Next.js 서버의 관리: Next.js 서버는 해당 해쉬 값들을 기반으로 클라이언트 요청에 대해 적절한 파일을 제공합니다. 클라이언트 쪽에서 페이지를 새로고침하지 않고도 페이지 전환과 JS 번들 로드를 원활하게 할 수 있는 이유는 이러한 서버 측 처리 능력 덕분입니다.
변경 시 처리: 새로운 빌드가 있으면, 클라이언트는 기존의 캐시된 파일을 사용하다가 페이지를 새로고침할 때 최신 버전의 JS 번들 파일을 로드하여 갱신하게 됩니다. 이전 캐시된 파일이 사용되지 않고, 해쉬 변경과 더불어 서버가 이를 처리하여 사용자가 최신 내용을 받을 수 있게 합니다.
이러한 메커니즘 덕분에 유니크한 해쉬가 생성되더라도, 서버는 이에 대한 효율적인 대응을 하여 사용자에게 무리가 없이 서비스를 제공할 수 있습니다. 이는 동적인 업데이트와 빠른 응답을 가능케 하여 우수한 사용자 경험을 만들어줍니다.
추가적으로 더 궁금한 점이 있으시다면, 아래의 관련해서 좀 더 상세하게 설명된 게시물을 확인해보시면 도움이 될 것입니다:
- 리액트와 Next.js의 JS 번들링 방식의 차이 - 리액트와 Next.js의 번들링 방식 차이에 대해 설명된 내용.
- 프리 패칭과 번들 불러오기 방식 - 프리 패칭이 어떻게 동작하는지에 대한 설명이 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
정말 감사합니다!!