Next.js 12 - SSR + SWR

Next.js 12

 

✅ getServerSideProps를 사용하면 생기는 장점과 단점

---

장점: 페이지가 모든 데이터를 갖고 완성되기 전까지 렌더링을 하지 않기 때문에 로딩 상태를 안 봐도 된다.

단점: useSWR에서 페이지 전환 시 자동으로 api를 호출해 최신 데이터를 유지해주는 기능을 쓸 수 없게 된다.

(static optimization이나 cache 같은 걸 사용할 수 없음)

또, getServerSideProps를 이용해서 데이터를 불러왔다가 에러가 나면 에러가 나는 과정에서 유저는 페이지에서 아무것도 볼 수 없게 된다.

 

 

✅ SSR(getServerSideProps)와 SWR을 같이 사용하는 법

---

그냥 getServerSideProps에서 SWR을 사용하면 된다.

 

하지만 그냥 사용하는 것이 아니라 getServerSideProps에서 받아온 데이터를 클라이언트쪽 SWR의 초기 캐시값으로 설정해놓고, 클라이언트에서 페이지가 열리면 SWR이 백그라운드에서 요청을 보내서 가장 최신 데이터를 불러온다.

 

그러기 위해서 Page라는 컴포넌트를 하나 생성하고 Home 컴포넌트를 <SWRConfig>와 같이 감싼 뒤 value의 object안에 fallback이라는 prop에 key를 캐싱 키로 주고 값을 서버에서 받아온 데이터로 주면 된다. 

const Page: NextPage<{ products: ProductWithCount[] }> = ({ products }) => {
  return (
    <SWRConfig
      value={{
        fallback: {
          "/api/products": {
            ok: true,
            products,
          },
        },
      }}
    >
      <Home />
    </SWRConfig>
  );
};

export async function getServerSideProps() {
 const products = await client.product.findMany({});

  return {
    props: {
      products: JSON.parse(JSON.stringify(products)),
    },
  };
}

export default Page;

 

이로 인해 이제 SWR은 초기값으로 getServerSideProps에서 받아온 데이터를 갖고 있다가 클라이언트에서 페이지가 열리면 SWR이 백그라운드에서 요청을 보내서 가장 최신 데이터를 불러온다.

(fallback에는 여러 캐싱 key를 넣을 수 있다.)