nextjs cache 총정리

case: react app 에서의 데이터 페칭

case: nextjs에서의 데이터 페칭

• nextjs

사전 렌더링의 종류.

1. SSR

page router의 경우

// 서버사이드 랜더링
export const getServerSideProps = () {
	const data = await fetch();
	return {props:{data }}
};

app router의 경우

// async 키워드로 서버컴포넌트로 만들 수 있다.
export async function Page () {
	const data = await fetch()
	return <div>...</div>	
}

• 나는 react query와 같은 방식으로 이해함.

• react query를 사용할 경우 react query의 hydration provider를 사용하면 서버에서 패칭한 데이터를 클라이언트로 전역객체에 할당해 내려줌으로써 서버사이드에서 초기 랜더링시 중복 패칭은 nextjs의 requests memoization의 캐싱으로 해결. 클라이언트사이드에서는 서버에서 패칭한 데이터를 전역으로 설정, 캐싱하는 방식이 가능.

2. SSG

• 정적 사이트 생성

• 빌드타임에 미리 페이지를 사전 랜더링해둠

• 하지만 정적인 사이트만 보여줄 수 있는 단점이 존재함. 매번 똑같은 페이지만 응답하기에 최신 데이터 반영은 어려움

page router의 경우

// page router

// 동적경로
export const getStaticPaths = () => {
	return {
		paths : [
			{ params: {id: "1"} },
			{ params: {id: "2"} },
			{ params: {id: "3"} },
		],
		fallback : true // path에 없는 경로로 접근했을 경우
	}
}

// 정적페이지 생성
export const getStaticProps = async (
	constext: GetStaticPropsContext // 페이지의 query, params
) {
	const id = context.params!.id;
	const book = await fetchOneBook(Number(id));
	
	
	return {
		props: {
			book,
		}
	}
};

false: 정적생성하지 않은 페이지에 대해서 접근거부 404 반환 blocking: 즉시생성 (Like SSR) true: 즉시생성 + 페이지만 미리반환 (props 가 없는 페이지)

const router = useRouter();

if (router.isFallback) return  '로딩중'
if (!props) return '문제발생! '

3. ISR

• 증분정적 재생성

on-Demand ISR

page router의 경우

시간을 기준으로 빌드.

  return {
    props: { post },
    // Next.js will invalidate the cache when a
    // request comes in, at most once every 60 seconds.
    revalidate: 60,
  }

on-Demand ISR.

React Server Component

page router에서의 hydration 문제점!

주의점!

1. 서버컴포넌트에서는 브라우저객체인 document가 없고 window 객체가 있기도하고 클라이언트의 상태를 모르기 때문에 브라우저에서 실행할 코드는 제외해야한다.

2. 클라이언트 컴포넌트는 클라이언트에서만 실행되지 않고 서버에서도 한번 실행되기때문에 위와 같은 문제를 공유

3. 자바스크립트 번들을 줄이기위해 서버컴포넌트는 자동으로 제외시키기 때문에 하이드레이션할때 문제발생 하지만 nextjs에서는 서버컴포넌트가 클라이언트 컴포넌트로 자동으로 변경됨.

1. 함수같이 직렬화가 어려운 props는 전달 불가능!

• 함수는 직렬화가 불가능하기때문에

app router cache

fetch를 확장한 cache 기능

request memoization

풀 라우트 캐시

page router의 SSG와 동일한 기능을함.

• ! 문자열로만 선언해야함

• page router의 getStaticPath와 같은기능을함

• 기본적으로 새로운 페이지에 대해서는 모두 캐싱한다. export const dynamicParams = false 을 선언하면 설정한 패스이외에는 접근을 허용하지 않는다

export const dynamicParams = false // 이 기능을 설정하면 아래의 경로이외에는 접근거부 404 리다이렉트

export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}

import { notFound } from 'next/navigation'

notFound()

export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

Streaming