ssr

getInitialProps

-

import { NextPageContext } from 'next'
 
Page.getInitialProps = async (ctx: NextPageContext) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}
 
export default function Page({ stars }: { stars: number }) {
  return stars
}

 

- 페이지라는 최상위 컴포넌트를 선언

-> 페이지컴포넌트의 getInitalProps property에 함수를 선언, 

-> 해당 함수에서 서버로부터 데이터를 가져온 뒤 해당 데이터를 사용한 props를 리턴해주면 페이지컴포넌트는 그 props를 바로 사용할 수 있다. 

-> 클라이언트 사이드에서는 데이터를 가져올 필요가 없음 

 

- 기존 data fetching로직을 getInitalProps로 옮긴 것 뿐. 

 

Data fetching을 처리하는 방식

 

1. props Drilling

-> 작동에는 문제가 없지만 각 컴포넌트가 본인의 관심사가 아닌 데이터를 알게되는 문제 발생

-> 관심사분리 x

 

2.context Api

-> 데이터를 서버로부터 가져오는 context를 만들어서 사용한다.

-> 각 컴포넌트가 불필요한 관심사를 갖지 않는다

-> 하지만 re-render최적화 문제를 해결해야하고 상태가 많아졌을 때 코드가 복잡해진다. 

 

3. useQuery는 서버사이드에서 값을 가져오지 않는다. 

-> 따라서 react-quert를 next.js로 마이그레이션하면 propsDrilling발생

 

next.js에서는 ssr을 위해 getServerSideProps를 사용하는데 page컴포넌트에서만 사용할 수 있기 때문에 어쩔 수 없이 하위 컴포넌트로 propsDrilling이 계속 일어나게 된다. 

 

propsDrilling없이 ssr구현?

 

- useResource (ssr용 datafetching hook)

-> key와 fetcher 함수를 정의해서 서버사이드에서 가져올 리소스를 정의 

-> page컴포넌트에서 page.requiredResources라는 property에 정의한 리소스를 할당

-> 컴포넌트에서 useResource라는 hook에 정의한 리소스를 인자로 넣어서 사용

 

useResource 동작방법

• useResource는 내부적으로 useQuery를 사용 
• react-query에서는 queryClient를 사용해서 useQeury가 클라이언트 사이드에서 가져올 값을 prefetch할수있다. 
• next.js의 getInitalProps는 page컴포넌트의 property에 접근할 수 있는데 -> requiredResources를 가져올 수 있다. 
• requiredResources에는 어떤 값을 미리 불러올지에 대한 정보가 들어있다. 
• -> queryClient와 requiredResources 를 사용하면 useQuery의 data를 undefined가 아닌  서버로부터 가져온 값으로 만들 수 있다. 

 

 

서버컴포넌트를 사용하면 컴포넌트 단위로 ssr을 사용할 수 있어서 data fetching 코드를 작성하면 서버에서 알아서해줌 

 

Suspense는 page라우팅에서도 사용 가능하나?