ISR은 Next.js의 하이브리드 렌더링 방법으로 SEO 및 사용자 경험을 향상시키는 데 유용합니다. 이 기사에서는 Next.js에서 ISR이 어떻게 작동하는지 설명하고 페이지 라우터와 앱 라우터 모두에서 ISR을 구현하는 예를 보여주고 마지막으로 ISR에 대한 몇 가지 일반적인 질문을 다음에 설명합니다.

ISR이란 무엇입니까?

ISR은 Next.js의 하이브리드 렌더링 메소드입니다. 특정 간격으로 정적 페이지를 재생하여 SEO에 도움이되고 전체 사이트를 재건하지 않고 컨텐츠를 최신 상태로 유지하여 사용자 경험을 향상시킵니다.

ISR은 SEO 및 사용자 경험을 어떻게 개선합니까?

react.js 또는 기존 단일 페이지 응용 프로그램 (SPA)을 사용한 경우 일반적으로 스파에 HTML 파일이 하나만 있다는 것을 알고 있습니다. 사용자가 스파 웹 사이트를 처음 방문하면 스파는 최소한의 HTML 파일을 보냅니다 (React에서는 일반적으로 index.html입니다). 그런 다음 요청 된 페이지에 필요한 CSS, JavaScript 및 기타 리소스를 가져옵니다. 그런 다음 이러한 리소스는 클라이언트 (브라우저)에 도달하면 HTML로 렌더링되고 결합됩니다. 그러나 앞에서 언급했듯이 스파에서 전송 된 초기 HTML 파일에는 내용이 거의 없거나 전혀 없습니다.

이제 사용자 대신 웹 사이트를 요청하는 Google 봇을 상상해보십시오. 최신 Google 봇은 JavaScript를 실행하여 콘텐츠를 검색 할 수 있지만, 이에 의존하면 여전히 SEO에 부정적인 영향을 줄 수 있습니다. 봇은 초기 HTML을 비어있는 것으로 볼 수 있으며, 이는 페이지 컨텐츠 인덱스를 지연시키고 검색 순위에 해를 끼치 잠재적으로 해를 끼칠 수 있습니다.

Next.js는 서버 사전 렌더링과 같은 서버 측 렌더링 기술을 사용하여이를 해결합니다. 나중에 렌더링에 대해 자세히 설명 하겠지만 여기에 간단한 개요가 있습니다. 서버 사전 렌더링을 사용하면 각 경로의 HTML이 서버에서 생성되어 클라이언트로 직접 전송됩니다. CSS 및 JavaScript 파일은 일반적으로 번들 및 캐시됩니다.

따라서 사용자 또는 Google 봇이 사이트를 방문하면 즉시 완전히 렌더링 된 페이지가 표시됩니다. Google 봇은 HTML에서 콘텐츠를 즉시 볼 수 있으므로 SEO가 향상됩니다. 또한 페이지로드 속도를 높이면 사용자 경험을 향상시킵니다. 즉, 사용자가 컨텐츠가 동적으로로드 될 때까지 기다릴 필요가 없습니다.

ISR은 어떻게 작동합니까?

ISR (증분 정적 재생)의 작동 방식을 더 잘 이해하려면 예를 들어 설명하겠습니다. 웹 사이트에서 블로그 목록을 관리하는 관리자라고 상상해보십시오. 새 블로그를 게시 할 때마다 프로젝트를 재건하고 싶지 않습니다. 대신, 블로그 목록 페이지가 60 초마다 자동으로 업데이트되기를 원합니다. 따라서 새 블로그를 작성하면 프로젝트를 수동으로 재건하지 않고 나타나기를 원합니다. SSR (Server-Side Rendering)과 같은 메소드를 사용할 수 있지만 웹 사이트가 특정 간격으로 업데이트되기를 원한다면 ISR이 갈 길입니다. 나중에 SSR에 대해 이야기하겠습니다.

이제 블로그리스트 페이지에서 ISR을 구현하고 리벌화 시간을 60 초로 설정한다고 가정 해 봅시다. 처음으로 프로젝트를 구축하고 리벌화 타이머가 시작됩니다. 사용자가 웹 사이트를 방문하여 블로그 목록 페이지로 이동하여 현재 블로그 목록을 볼 수 있습니다. 한편, 새 블로그 게시물을 게시하지만 60 초 창에 20 초가 남았 기 때문에 사이트를 방문하는 새로운 사용자는 아직 새 블로그를 볼 수 없습니다.

60 초가 커지면 ISR은 새 데이터를 확인하고 새로운 블로그 게시물이 있음을 확인하고 업데이트 된 콘텐츠로 정적 페이지를 재생합니다. 그런 다음 서버에서 새 버전을 캐시합니다. 주목해야 할 사항은 다음과 같습니다. ISR이 페이지를 재생하는 동안 사용자는 새 제품이 준비 될 때까지 여전히 이전 버전을 볼 수 있습니다. 따라서 ISR이 완료되면 새로운 방문자는 업데이트 된 페이지를 볼 수 있지만 재평가 이전에 이미 사이트에 있던 사용자는 새로 고침하지 않으면 이전 페이지를 볼 수 있습니다.

기억해야 할 또 다른 핵심 사항은 NPM 실행 빌드를 사용하여 웹 사이트를 구축 할 때 초기 정적 페이지가 ISR이 아닌 SSG (정적 사이트 생성)에 의해 생성된다는 것입니다. 첫 번째 빌드 후 ISR은 재생 프로세스를 처리하기 위해 시작합니다. 또한 ISR은 전체 사이트를 재생하지 않습니다. ISR이 구현되는 특정 페이지 만 재생합니다. 따라서 ISR이 재생되면 전체 프로젝트가 아닌 특정 페이지 만 업데이트됩니다.

앱 라우터에서 ISR을 구현하는 방법

앱 라우터에서 ISR (증분 정적 재생)을 구현하려면 클라이언트 구성 요소가 아닌 서버 구성 요소에서 ISR을 사용해야한다는 것을 아는 것이 중요합니다. ISR은 클라이언트 측 방법이 아닌 서버 렌더링 방법이기 때문입니다. 따라서 app/blog/page.tsx 또는 app/blog/page.jsx와 같은 파일에 ISR을 배치해야합니다.

기억해야 할 핵심 사항 중 하나는 Revalidate 옵션이 설정된 서버 구성 요소에서 API를 호출하지 않으면 ISR이 작동하지 않는다는 것입니다. 서버 구성 요소는 페이지를 재생하려면 새 데이터를 가져올 수 있어야합니다. 그렇지 않으면 업데이트가 발생하지 않습니다.

ISR을 활성화하려면 Revalidate 속성을 페치 방법에 추가하기 만하면됩니다. Fetch 대신 Axios를 사용하는 것을 선호하는 경우에도 요청을 비슷하게 구성하여 사용할 수 있지만 현재로서는 Fetch 사용을 고수합니다. 아마 나중에 axios로 그것을하는 방법을 설명 할 것입니다.

나는 tsx 파일과 jsx fiel과 함께 예제를 제공했다 :

이것은 tsx 파일에서 구현하는 예입니다

이것은 JSX 파일에서 구현하는 예입니다.

페이지 라우터에서 ISR을 구현하는 방법은 무엇입니까?

페이지 라우터에서 ISR을 구현하려면 구성 요소에서 getStaticProps를 내보내고이 기능에 Revalidate 속성을 추가해야합니다. 이 기능은 서버 측 렌더링 중에 만 실행되므로 GetStaticProps 내부의 API를 호출해야합니다. 이전 섹션에서 언급했듯이 Fetch 또는 Axios를 사용하여 데이터를 가져올 수 있지만 API 호출은 GetStaticProps 내부에서 이루어져야합니다. 그렇지 않으면 ISR이 작동하지 않습니다.

다시,이 기능은 클라이언트가 아닌 서버에서 실행됩니다. 다음은 다음과 같은 예입니다.

이것은 tsx 파일에서 구현하는 예입니다 :

이것은 JSX 파일에서 구현하는 예입니다.

결론

iSR의 iSR은 SEO와 사용자 경험을 모두 향상시키는 서버 렌더링 메소드입니다.
SSR 또는 SSG와 같은 다른 방법을 사용하여 구성 요소를 만들 수 있지만 특정 사용 사례에는 ISR이 필요합니다.

ISR이 무엇인지, 작동 방식 및 페이지 라우터 및 앱 라우터 모두에서 구현하는 방법을 잘 이해해야합니다. 이 기사에서는 가능한 한 명확하게 설명하려고 노력했으며 더 잘 설명 할 수 있다면 나중에 업데이트하겠습니다. 불분명 한 것이 있으면 의견을 남겨서 알려 주시면 추가 설명을 제공하겠습니다.

이 블로그를 읽어 주셔서 감사합니다.