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가 실행되는 이유는 무엇입니까?자, 다음 소개는revalidate
fallback
이 두 개의 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
'programing' 카테고리의 다른 글
Mongodb는 CAP 정리에서 어디에 위치합니까? (0) | 2023.03.26 |
---|---|
구성에서 '서비스' 유형의 빈을 정의하는 것을 고려합니다[스프링 부트] (0) | 2023.03.26 |
개체를 JSON으로 변환하고 PHP에서 JSON을 개체로 변환(Java의 경우 Gson과 같은 라이브러리) (0) | 2023.03.21 |
AngularJS: 컨트롤러를 완전히 새로고침하지 않고 해시 및 라우팅 변경 (0) | 2023.03.21 |
약속.RxJs Observatible을 사용한 모든 동작? (0) | 2023.03.21 |