2023. 8. 31. 10:29ㆍNext.js/생활코딩
Cache
이전 장에서 미리 얘기했던 것처럼 새로 글을 생성하고 이동하지만 목록은 변화가 없다! 이건 캐시와 관련되어 있는 내용이다.
layout.tsx를 보면 서버에서 글목록을 가져오는 코드가 있다. fetch 명령어를 사용하게 되면 next.js는 기본적으로 한 번 가져온 정보를 저장하게 된다. 이 저장된 내용을 지우기 위해 ctrl + c를 눌러 실행되던 걸 멈추자. 그리고 .next 파일을 지우기 위해 rm -rf .next 를 실행하자.
실행해보면 열려있던 페이지에서 필요한 데이터를 가져오는 걸 볼 수 있다.
강의 내에서는 아래와 같이 터미널이 보이지만 내 터미널에서는 해당 부분이 보이지 않는다. 우선 json-server를 실행한 액세스 기록만으로 cache가 miss해서 다시 요청했는지 여부를 파악할 수 있다.
최초로 액세스 할 때 데이터를 가져오고 그걸 저장해둔다. 그리고 그 상태에서 다시 리로드해도 json-server에 액세스 로그가 생기지 않는다. 즉, cache가 hit 된 상태이고 그걸 그대로 다시 가져온 것을 알 수 있다.
그럼 이 문제를 어떻게 해결할 수 있을까? 글을 생성하고 서버 컴포넌트를 refresh 하기 전에, layout.tsx에서 우리가 했던 fetch로 인해 만들어진 캐시를 지우면 된다.
이는 공식 문서의 data fetching - revalidating 부분을 보면 더 자세히 알 수 있다.
하지만 우선 간단하게 해결하는 방법은 데이터를 가져온 후에 캐시로 만들지 않는 것이다. 성능은 희생하겠지만 수업이 단순해져서 일단 이렇게 처리해둔 것이라고 한다.
그럼 캐시를 어떻게 끌 수 있을까?
일단 공식 문서의 data fetching - fetching 부분을 보면 revalidating data 부분에서 fetch를 할 때 fetch 코드에 revalidate를 지정해줄 수 있다.
fetch('https://...', { next: { revalidate: 3600 } })위 코드는 3600초 동안만 캐시를 유지하겠다는 의미이다. 이 시간이 지나면 캐시가 다시 만들어진다. 근데 이렇게 하면 글을 생성하고 리다이렉션하면 바로 캐시가 업데이트 되지 않기 때문에 0으로 해주자. 즉, 캐시를 쓰지 않겠다는 의미가 된다.
또 다른 방법은 cache를 no store로 설정하는 방법인데, 아래 코드와 같이 작성할 수 있다.
fetch('https://...', { cache: 'no-store' })글 목록을 담당하고 있는 fetch가 캐시되고 있지 않기 때문에 라우터 refresh를 하면 서버 컴포넌트가 새로 데이터를 가지고 와서 그 결과를 뿌려지게 된다.
처음 시작할 때는 이렇게 캐시를 끄고 설정하지만 나중에 캐시를 활용하게 된다면 최고의 퍼포먼스를 보일 수 있기 때문에 해당 부분 숙지가 꼭 필요하다.
// /src/app/layout.tsx
import Link from 'next/link';
import './globals.css';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Web tutorials',
description: 'Generated by byein',
};
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const resp = await fetch('http://localhost:9999/topics', { cache: 'no-cache' });
const topics = await resp.json();
return (
<html>
<body>
<h1>
<Link href='/'>WEB</Link>
</h1>
<ol>
{topics.map((topic: { id: number; title: string; body: string }) => {
return (
<li key={topic.id}>
<Link href={`/read/${topic.id}`}>{topic.title}</Link>
</li>
);
})}
</ol>
{children}
<ul>
<li>
<Link href='/create'>Create</Link>
</li>
<li>
<Link href='/update/1'>Update</Link>
</li>
<li>
<input type='button' value={'delete'} />
</li>
</ul>
</body>
</html>
);
}참고자료
생활코딩 - Next.js 13
https://opentutorials.org/course/5098
Next.js 13 - 생활코딩
수업 개요 Next.js는 웹 애플리케이션을 빌드하고 배포하는 데 강력한 도구입니다. 이 도구를 활용하면 모던한 웹 앱을 빠르고 효율적으로 구축할 수 있습니다. 그럼 함께 미래의 웹 개발 패러다
opentutorials.org
Data Fetching: Fetching, Caching, and Revalidating | Next.js
Data fetching is a core part of any application. This page goes through how you can fetch, cache, and revalidate data in React and Next.js. Next.js extends the native fetch Web API to allow you to configure the caching and revalidating behavior for each fe
nextjs.org
'Next.js > 생활코딩' 카테고리의 다른 글
| Next.js 13 - 15. 글수정 (0) | 2023.08.31 |
|---|---|
| Next.js 13 - 14. update & delete버튼구현 (0) | 2023.08.31 |
| Next.js 13 - 12. 글생성 (0) | 2023.08.31 |
| Next.js 13 - 11. 글 읽기 (0) | 2023.08.31 |
| Next.js 13 - 10. 글목록 가져오기 (0) | 2023.08.31 |