인프런 커뮤니티 질문&답변

hhhh님의 프로필 이미지
hhhh

작성한 질문수

React로 NodeBird SNS 만들기

6-3. getInitialProps로 서버 데이터 받기

여쭤볼게 있습니다.

작성

·

178

0

getinialProps에서 키값을 컴포넌트에 준 후, 컴포넌트에서 api 호출하는 방식으로 개발하시는 것 같은데,,

그렇게 렌더링 된 컴포넌트는 서버에서 렌더링 되는 것이 아니라, 클라이언트에서 렌더링 되는 것이 맞는 건가요?

next를 사용하는 큰 이유가 ssr인데, 정답은 없겠지만, 아래와 같이 개발하는 것이 더 나은 것이 아닌지 궁금합니다.

https://nextjs.org/docs/api-reference/data-fetching/getInitialProps

Page.getInitialProps = async ctx => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

답변 3

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

렌더링된 후에는 소스보기에서 태그가 나옵니다.

0

hhhh님의 프로필 이미지
hhhh
질문자

예 그렇다면 Link를 통해서 들어온 경우,

데이터와 관련된 부분은 클라이언트에서 렌더링되고,

소스보기에서도 태그가 나오지 않는게 맞는 건가요?

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

처음에 주소창으로 페이지에 접근한 경우 getInitialProps는 서버에서 실행되고, 데이터도 컴포넌트에 넣어진채로 렌더링됩니다.

Link 컴포넌트를 통해 이동한 경우 getInitialProps는 클라이언트에서 실행되고, 컴포넌트가 먼저 렌더링된 후 데이터가 나중에 렌더링됩니다.

hhhh님의 프로필 이미지
hhhh

작성한 질문수

질문하기