3강 — 데이터와 캐싱
2024 DTC
| → / Space | 다음으로 |
| ← | 이전으로 |
| ↓ / ↑ | 같은 주제 안에서 단계 이동 |
| O | 전체 슬라이드 한눈에 보기 |
| F | 전체화면 |
아래쪽 화살표가 보이면 그 주제는 단계별로 이어집니다
| 기본값 | 서버 컴포넌트 |
| 'use client' | 훅 · 이벤트가 필요할 때만 |
| 원칙 | 잎사귀에만 붙인다 |
오늘은 서버 컴포넌트로 데이터를 가져옵니다
화면에 자료를 올리려면
'use client';
function Page() {
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('/api/posts')
.then(r => r.json())
.then(d => { setPosts(d); setLoading(false); });
}, []);
}
Next에서는 몇 줄이면 될까요?
export default async function Page() {
const res = await fetch(
'https://api.example.com/posts'
);
const posts = await res.json();
return <PostList posts={posts} />;
}
async 를 붙인다await 로 기다렸다가 바로 쓴다기다리는 동안 보여주려면
app/blog/loading.js
export default function Loading() {
return <p>불러오는 중…</p>;
}
불러오는 중…
layout은 그대로 있고 page 자리만 바뀐다
loading state를 직접 만들던 것실패했을 때 보여주려면
app/blog/error.js
'use client';
export default function Error({ error, reset }) {
return (
<>
<p>문제가 생겼습니다</p>
<button onClick={reset}>다시 시도</button>
</>
);
}
문제가 생겼습니다
error.js 는 항상 'use client'reset() 을 부르면 다시 시도한다layout.js 에서 난 에러는 못 잡는다얼마나 자주 새로 받을지 정하려면
const res = await fetch(
'https://api.example.com/posts'
);
글을 새로 써도 목록이 그대로면?
// 60초마다 새로 받는다
fetch(url, { next: { revalidate: 60 } });
// 매번 새로 받는다
fetch(url, { cache: 'no-store' });
기본계속 저장revalidate: 6060초마다cache: 'no-store'매번| 블로그 글 | revalidate: 3600 |
| 상품 목록 | revalidate: 60 |
| 장바구니 | no-store |
| 실시간 채팅 | 클라이언트에서 처리 |
요청마다 달라야 한다면
export default function Page({ searchParams }) {
const q = searchParams.q;
return <p>{q} 검색 결과</p>;
}
고양이 검색 결과
빌드할 때 한 번
모두에게 같은 화면요청할 때마다
사람마다 다른 화면오늘 배운 것
| async 컴포넌트 | await 로 바로 가져온다 |
| loading.js | 기다리는 동안 |
| error.js | 실패했을 때. 'use client' |
| revalidate | 몇 초마다 새로 받을지 |
| no-store | 매번 새로 |
| searchParams | 쓰면 동적 렌더링 |
직접 만들어봅시다
/blog 에 그리기loading.js 와 error.js 만들기/blog/[id] 에서 글 하나만 받아오기revalidate 를 10초로 두고 바뀌는지 확인API는 jsonplaceholder.typicode.com 을 씁니다
4강에서는 데이터를 보냅니다