SSR 페이지를 다시 로드하는 방법

SSR을 사용하는 경우 사용자가 데이터베이스 업데이트 또는 제품 구독과 같은 작업을 수행했기 때문에 제공된 데이터를 업데이트해야 할 수 있습니다.

이것은 문제를 제기합니다. Next.js에는 refetchprops와 같은 기능이 없지만 Vercel의 팀이 구현하기를 원하면... 저는 모두 찬성합니다. 한 가지 해결책은 페이지를 강제로 새로고침하는 것이지만 거의 안티 패턴처럼 느껴집니다.

하드 새로 고침을 사용하지 않고 어떻게 이 문제를 해결할 수 있습니까? 먼저 우리가 이야기 할 때 생각하는 일반적인 SSR 흐름에 대해 이야기해야 합니다.

일반적인 SSR 흐름

서버 사이드 렌더링을 생각할 때 우리는 두 가지 흐름을 염두에 두고 있으며 일반적으로 다음과 같이 진행됩니다.

사용자가 웹 사이트로 연결되는 링크를 클릭합니다.

Next.js는 getServerSideProps 메서드를 호출하고 API의 데이터로 HTML을 생성합니다

.

사용자가 해당 HTML 파일을 수신하고 React가 클라이언트에서 재수화됩니다.

또는

사용자는 이미 사이트에 있으며 다음Link을 클릭하여 서버 렌더링 페이지로 이동합니다.

Next.js는 시나리오 1에서와 같이 HTML 파일을 생성하는 대신 서버에서 getServerSideProps 메서드를 호출합니다. 대신 데이터를 JSON으로 보냅니다.

React는 브라우저 내에서 새 페이지를 렌더링할 때 해당 데이터를 소품으로 사용합니다.

이것이 내가 Next.js 에 대해 좋아하는 점입니다. 성능을 향상시키기 위해 두 가지 다른 시나리오를 약간 다르게 처리하고 사용자는 전혀 현명하지 않습니다.

해결책

따라서 해결책은 Next.jsrouter의 내장 기능을 사용하는 것입니다. 이것을 사용하여 우리는 Next.js에게 하드 새로 고침 없이 SSR에서 최신을 검색하도록 요청할 수 있습니다. 급한 경우 해결책은 다음과 같습니다. import { useRouter } from 'next/router';

import { useRouter } from 'next/router';
export default function YourPage(props) {

 const router = useRouter();
 const dataToUpdate = //some object;

// API that updates your DB
  const update = fetch('api/update',{
    method: 'PUT',
    body: JSON.stringify(dataToUpdate),
  });
  if(update.status == 200) {
    // ask next router to replace the current path with the current path.
   router.replace(router.asPath);
   }
}

어떻게 작동합니까?

SSR을 두 번째 경로로 설명할 때 클라이언트 측 전환을 통해 NextLink를 사용할 때 Next.js가 JSON을 반환하는 방법에 대해 이야기했습니다. 이것이 바로 router.replace를 사용하여 Next.js에 클라이언트 측 전환을 수행하도록 지시하는 것입니다.

If you are wondering what router.replace does, it does the exact same thing as route.push except it doesn't add history to the stack. This means if the user hits the back button it will perform as expected

즉, 이 클라이언트 측 전환이 발생하면 getServerSideProps가 실행되고 JSON이 데이터베이스 또는 API의 최신 정보와 함께 반환됩니다.