Netlify & Next.js

캐시디 윌리엄스 (Cassidy Williams)는 최근 NetLify 블로그에서 한 달 동안 일일 블로그 캠페인을 진행했습니다. 많은 블로그 게시물은 다음에 있습니다. Next.js는 칭찬해야 할 것이 많습니다. 나는 캐시디의 입문 프로젝트를 관심이없는 시도했다. 그것은 빠르게 반응하여 내장되어 있습니다. 나는 그것이 .js 파일의 원래를 제어하기 위해 "페이지"에서 getStaticProps 사용할 수 있다는 것을 getServerSideProps . 다음에 다음을 시도하는 것은 이번이 처음이므로 기본 사항을 용서 해주세요. 그러나 Next.js에 대해 가장 눈에 띄는 것은 전체 렌더링 프로세스를 쉽게 지원한다는 것입니다. 기본적으로 정적 파일 렌더링을 수행하는 것이 좋습니다 (스마트). 그런 다음 서버 측 렌더링 (SSR)을 수행 해야하는 경우 다음을 포함하도록 주어진 페이지 구성 요소를 업데이트하면됩니다.

 Async 함수 내보내기 GetServersideProps () {
  // 외부 API에서 데이터를 가져옵니다. const res = Await fetch (`https : //.../ data`);
  const data = await res.json ();

  // 소품을 통해 페이지로 데이터를 전달합니다 {props : {data}};
}

페이지를 렌더링하기 위해 데이터를 가져 오려면 서버에 액세스해야하지만 서버 측에서 렌더링하는 것이 좋으므로 필요한 경우 JavaScript없이 페이지가 빠르고 렌더링 할 수 있도록 서버 측면에서 렌더링하는 것이 좋습니다 (SEO에 매우 좋습니다). 이것은 언제든지이 작업을 수행 할 준비가 된 노드 서버가 있다고 가정합니다. NetLify에서 이것은 함수 (노드 람다)를 의미하지만 netlify.toml 파일에 다음을 추가하면됩니다.

 [[플러그인]]
  package = "@netlify/plugin-nextjs"

이제 필요한 위치에 정적 렌더링, 필요한 위치에 서버 측 렌더링을 수행 할 수 있지만 웹 사이트가 시작된 후에는 매우 빠릅니다. 나는 그것이 JSON 전송 또는 다른 프레임 워크 수준의 마법을 내부에 있다고 생각합니다.

테스트를 위해 홈페이지에서 빠른 SSR 경로를 설정했으며로드 할 때 홈페이지 (정적) 및 /cool Route (SSR)가 정적 HTML을 반환한다는 것을 분명히 알 수 있습니다.

나는 React를 사용하는 것을 좋아한다는 것을 인정하고 Next.js는 단순성과 훌륭한 기능을 모두 가지고 있기 때문에 매우 훌륭한 프레임 워크입니다. NetLify에서 쉽게 실행하기 쉽습니다.

위 내용은 Netlify & Next.js의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!