Next.js - 19.6 getServerSideProps + 19.7 SSR + SWR

19.6 getServerSideProps

NextJS 데이터 fetching을 어떻게 하나?

유저에게 화면을 어떻게 보여줄지는 두가지로 나뉜다.
1. 다 로딩되면 한번에 보여주자. SSR (server side rendering)
2. 로딩 전에 뭐라도 보여주자. CSR (client side rendering)

1번 방식을 구현하려면 getServerSideProps()를 사용하면된다.
페이지에서 getServerSideProps(서버 측 렌더링)라는 함수를 export 하면 Next.js는 getServerSideProps에서 반환된 데이터를 사용하여 각 요청에서 이 페이지를 미리 랜더링한다고함.

useSWR을 안쓰고 index.tsx에 getServerSideProps()를 다음과 같이 넣어주면
서버에서 먼저 실행한다. 그럼 잘 작동하는데 이 때 useSWR의 다양한 기능을 못씀.
static optimization이나 cache 못함.
그리고 getServerSideProps() 실행 도중 에러나면 아무것도 보지 못한다.

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

export async function getServerSideProps() {
  const products = await client.product.findMany({});
  console.log(products);
  return {
    props: {
      products: JSON.parse(JSON.stringify(products)),
    },
  };
}

이제, 서버사이드랜더링 + useSWR사용을 알아보자.

19.7 SSR + SWR
위 방식 만으로 prototype
페에지는 SSR로 불러오지만, 클라이언트 단에서 페이지 열릴 때 useSWR이 백그라운드에서 API로 최신 데이터 불러서 업데이트 하는 것.

이 예에서는 getServerSideProps()에서 product의 count를 불러오지 않음.
새로고침 하면 SSR로 한번에 뜨는데
나중에 SWR에서 API로 불러온 product의 count가 업데이트 됨.

여러개도 됨

<SWRConfig

      value={{

        fallback: {

          "/api/products": {

            ok: true,

            products,

          },

        fallback: {

          "/api/user": {

            ok: true,

            products,

          },

        },

      }}

    >

      <Home />

    </SWRConfig>