programing

Next.js "빌드 타임"은 정확히 언제 발생합니까?

newsource 2023. 3. 26. 11:24

Next.js "빌드 타임"은 정확히 언제 발생합니까?

Next.js fatching data 부분을 읽고 있는데 한 가지 질문이 떠올랐습니다.

next는 Next.js로 데이터를 수 .getStaticProps,getStaticPaths,getInitialProps ★★★★★★★★★★★★★★★★★」getServerSideProps 그렇죠?

그러나 다음과 같이 빌드 타임에 발생하는 경우도 있습니다.

getStatic Props(정적 생성):빌드 시 데이터 가져오기

이 빌드 타임은 언제 실시됩니까?

우리가 달릴 때인가?npm run build빌드를 ) (프로덕션 빌드를 구축하기 위해)

또는 사용자가 Next.js 앱에 접속할 때? (요청마다)

하고 에 발생합니다(빌드 타임).next build일 때 ).next start를 참조해 주세요.

getInitialProps는 모든 요구에 시 (gIP)는 실행 시 실행됩니다.가장 일반적인 사용 사례는 요청된 페이지가 로드되기 전에 공유 데이터(사용자가 특정 페이지로 이동 중인지 클라이언트와 서버가 알 수 있는 세션 등)를 검색하는 것입니다.getServerSideProps serverserver 。기술적으로는 사용을 권장하지 않지만 클라이언트와 서버 양쪽에서 반드시 로직을 수행해야 하는 경우가 있습니다.

getServerSideProps는 모든 요구에 실행 (gSSP)는 실행 시 실행됩니다.가장 일반적인 사용 사례는 페이지가 로드되기 전에 데이터베이스로부터 페이지 고유의 최신 데이터(제품 가격 및 재고량 표시 등)를 검색하는 것입니다.이 기능은 검색 엔진에 최적화된 페이지(SEO)를 원하는 경우 중요합니다. 여기서 검색 엔진은 최신 사이트 데이터를 인덱싱합니다(실제로 단종된 제품인 경우 "In stock - 100 units!'다'

getStaticProps는 빌드 동안만 됩니다. (gSProps)는 빌드 시간(일부)에 실행됩니다.데이터 및 페이지가 자주 업데이트되지 않는 사이트에 적합합니다.이 방법의 장점은 페이지가 정적으로 생성되기 때문에 사용자가 페이지를 요청하면 동적 데이터가 이미 내장된 최적화된 페이지를 다운로드할 수 있다는 것입니다.가장 일반적인 사용 사례는 블로그나 제품의 대형 쇼핑 카탈로그로, 자주 변경되지 않을 수 있습니다.

getStaticPaths는 빌드 동안만 됩니다. (gSPATH)는 빌드 시간 동안(일부) 실행됩니다.유사한 경로를 사전 렌더링하는 데 매우 적합합니다(예:/blog/:id빌드 시 동적 데이터를 사용해야 합니다.gSProps와 함께 사용하면 데이터베이스/플랫 파일/데이터 구조에서 동적 페이지를 생성하고 Next는 이를 정적으로 처리할 수 있습니다.예를 들면, 같은 페이지 레이아웃과 같은 페이지의 URL 구조를 공유하고 있지만, 앱의 빌드시에 동적으로 컨텐츠를 페이지에 삽입하도록 요구하는 블로그 투고가 많은 블로그가 있습니다.

빌드 타임 중에 gSProps와 gSPATH가 실행되는 이유는 무엇입니까?자, 다음 소개는revalidatefallback이 두 개의 Nextj 함수를 실행 시 초 단위의 타임아웃 후 실행할 수 있는 옵션입니다.이 기능은 페이지를 정적으로 재생성하고 싶지만 N초마다 재생성해야 할 경우에 유용합니다.장점은 페이지로 이동할 때 동적 데이터를 요청할 필요가 없다는 것이지만, 단점은 페이지에 오래된 데이터가 처음 표시될 수 있다는 것입니다.사용자가 페이지를 방문(재검증을 트리거)한 후 동일한 사용자(또는 다른 사용자)가 같은 페이지를 방문하여 최신 버전을 볼 때까지 페이지는 재생성되지 않습니다.이로 인해 사용자 A는 오래된 데이터를 볼 수 있지만 사용자 B는 정확한 데이터를 볼 수 있습니다.앱에 따라서는 큰 문제가 되지 않는 것도 있고, 받아들일 수 없는 것도 있습니다.

§ Next v12.2.0+ 버전을 사용하는 경우 온디맨드 재검증을 사용하여 데이터가 갱신되었을 때 오래된 정적 페이지가 사용자에게 표시되지 않도록 할 수 있습니다.

마지막으로 클라이언트(브라우저)에서 런타임에 요청된 자산인 CSR(클라이언트 사이드 렌더링)이 있습니다.이러한 자산은 SEO에 중요하지 않거나 서버 측에서 실행할 수 없습니다(예: Event Listener를 문서에 첨부하는 것).서버에 DOM이 없기 때문에 실행할 수 없습니다).가장 일반적인 사용 사례는 해당 사용자와만 관련된 사용자별 대시보드 페이지이므로 검색 엔진이나 DOM을 조작하는 자바스크립트 같은 것으로 색인화할 필요가 없으므로 서버에서 실행할 수 없습니다.

기타 주의사항: gIP 및 gSSP는 렌더 블로킹입니다.즉, 코드가 소품을 해결하거나 반환할 때까지 페이지가 로드되지 않습니다.이로 인해 페이지가 로드되기 전에 공백 페이지가 표시되는 피할 수 없는 결과가 발생합니다.이는 페이지 응답 시간이 느리다는 것을 의미합니다.페이지 요구, gIP/gSSP는 페이지의 로드를 차단하는 코드 실행, gIP/gSSP 코드 해결, 자산 다운로드, HTML이 DOM에 로드되는 동안 페이지 로딩, JavaScript 실행 중 페이지 재하이드라이프 및 인터랙티브한 페이지가 됩니다.요약하면 TTI가 느려집니다.

언급URL : https://stackoverflow.com/questions/64520234/when-exactly-is-next-js-build-time-happening