[Next.js Section1] Data fetching 이해하기

SSR

완성된 html이 서버에서 만들어진 뒤 브라우저에 전송됨

페이지 이동시마다 새로 html을 내려줘야 해서 화면 깜박임, 초기 용량 작음

사용자가 많을 때 서버 부하 위험, 보안 유리

SEO에 좋음

 

CSR

빈 html 나머지는 자바스크립트로 동적으로 그림

화면 깜박임이 없음, 초기 용량 큼

js 캐시 가능, 서버 데이터가 필요할 경우 계속해서 서버와 통신해야 하므로 보안 취약

SEO에 저약

 

SSG(Static Site Generation)

pre rendering : Static한 HTML을 빌드 타임에 미리 만들어 둠(SSR은 request time에)

서버 부하 없음, HTML 캐시 가능, SEO에 좋음

정적인 사이트에 사용

 

Next.js

SSR, CSR, SSG의 장점을 제공

SSR/SSG의 작은 용량과 보안

CSR의 빠른 페이지 이동 속도, 깜박임 없음

 

getStaticProps

개발 환경에서는 매 요청마다 실행됨

새로고침시마다 랜덤한 값이 계속 바꼈음 -> 미리 빌드된 html을 가져오는 SSG 방식이 아님

 

프로덕션 환경으로 빌드 & 실행

yarn build

getStaticProps 빌드타임에 수행 2초 걸림

 

yarn start

이제 새로 고침해도 랜덤값이 바뀌지 않고 미리 html을 생성했으므로 2초가 아니고 ms 시간안에 리턴함

항상 캐쉬에 히트(X-Nextjs-Cache)

=> 빌드타임에 한번만 api 불러오고 배포 후 값이 변하지 않는다면 getStaticProps로 SSG 방식으로 렌더링하면 됨

 

가끔씩 API의 결과가 바뀌는 경우 매번 사이트 전체 새로 배포하기 부담 => revalidate 이용

(ISR)Incremental Static Regeneration

전체 사이트 다시 빌드필요X

해당 페이지만 업데이트 함

revalidate: 5

5초동안 HIT -> 2초 동안 stale -> 5초 동안 hit

5초 마다 해당 함수 실행해서 데이터가 바뀌었으면 새로운 값으로 다시 pre-rendering 하라는 뜻(데이터가 바뀌지 않으면 프리렌더링 수행X)

 

next/link

최초 실행은 SSG, 페이지 라우팅시는 js파일 받아옴 -> 페이지 이동시에는 빠르게 CSR

js와 json 파일로 해당 페이지에 대한 정보를 미리 가져와서 빠르게 CSR 방식으로 라우팅

링크가 보이지 않을 때는 파일을 불러오지 않고 링크가 보일 때 lazy한 방식으로 파일을 가져옴

elements 탭에서 link를 확인하면 a태그로 되어 있음 -> link에 바로 style 입힐 수 있음

<link>안에 <a>태그 집어넣으면 에러 -> 13버전

 

Next는 모든 페이지에 대한 pre-rendering을 진행해서 SEO 보장, next/link를 통해 CSR 방식으로 빠르게 라우팅과 적은 네트워크 요청

 

 

next/route

useRouter훅을 이용하면 link처럼 CSR 방식으로 라우팅 가능 BUT ! 라우팅 전에 미리 해당 링크와 관련된 json, js 파일 받아오는 pre fetching 기능은 안함(link는 함) ->useEffect로 직접 구현

  useEffect(() => {
    router.prefetch('/section1/getStaticProps'); //<- 이동하고자 하는 url
  }, [router]);

prefetch 해주지 않으므로 대개의 경우 link 사용 권장함

 

 

getServerSideProps

SSR방식 새로고침시 매번 html을 받아옴, 요청타임에 프리렌더링 됨, SSG에 비해 사용자 경험이 좋지 않음

SSR은 요청타임바다 서버사이드에서 렌더링 해야되는 페이지만 적용해야함

ex)사용자의 인증정보에 따라 변하는 페이지, 페이지가 동적으로 변해야 하지만 보안은 중요한 페이지

Cache-Control 헤더를 통해 SSR에도 revalidaet 적용 가능(거의 쓸 일 없고 참고만)

 

SSR로 렌더링 하고 싶지 않은 컴포넌트 임포트시(document, window 접근 등)

import dynamic from 'next/dynamic';

const NoSSR = dynamic(() => import('../../components/section1/NoSSR'), {
  ssr: false,
});