Data Fetching
서버 컴포넌트에서 데이터를 가져오는 처리 로직은 Web API인 fetch를 활용하면 된다.
기본 예시
// 서버 컴포넌트에서도 async/await 키워드를 통해 비동기 요청 처리 가능
export default async function Page() {
const data = await fetch('https://api.vercel.app/blog');
const posts = await data.json();
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}캐싱
캐시 기능을 넣어주니, 브라우저에 있는 캐시로 사용하므로 서버에게 요청을 날리지 않으며, 서버에서 값이 바뀌어도 반영되지 않는다.
코드
fetch의 두 번째 인수에 cache: ‘force-cache’ 옵션을 넣어주었다.
(기본값은 ‘no-store’이다.)
// nap
export default async function Page() {
// TODO: 데이터 페칭 작업
const response = await fetch('http://localhost:3001/products', {
cache: 'force-cache'
});
const products = await response.json();
return (
<ul className="space-y-4 p-4">
{products.map((product) => (
<li
key={product.id}
className="p-4 bg-white shadow-md rounded-lg text-gray-700"
>
<h2 className="text-xl font-semibold">{product.title}</h2>
<p>{product.description}</p>
<p className="text-lg font-medium">${product.price}</p>
</li>
))}
</ul>
);
}
Next.js의 데이터 캐시가 동작하는 과정은 다음과 같다.
+)
캐시 옵션을 사용하면, 다음과 같이 캐시된 내용을 확인할 수 있다.
JSON formatter에서 해당 내용을 넣어주면 다음과 같다.
여기서 body에 있는 값을 base64 decoder에 넣어주면, 서버에서 넘겨준 데이터를 확인할 수 있다.
실습
구현사항
지금 상품 데이터가 초기 렌더링은 서버에게 요청을 통해 응답받고 있다.
만약 상품 데이터가 아니라 블로그 포스팅 목록이라고 가정하면, (여기서는 products가 블로그 포스팅이라고 가정)
기존에 작성한 블로그 포스팅은 거의 바뀌지 않는다.
→ 렌더링을 언제 할까?
- 런타임?
- 빌드 타임? (0, 초기 페이지 렌더링)
내가 블로그의 글을 수정하거나, 새롭게 추가할 수도 있다.
⇒ 이후 변경된 부분에 대해서는 일정 시간에 따라 재 갱신할 수 있도록 해야 한다. (런타임)
⇒ ISR 사용하자! https://nextjs.org/docs/app/guides/incremental-static-regeneration
요청 메모이제이션
Next.js는 Web API에서 기본으로 제공하는 fetch API를 확장해 동일한 URL경로에 대한 요청을 자동으로 메모이제이션 해두었다.
컴포넌트 트리에서 여러 요청들을 가지고, 모든 요청을 모은 후, 한 번씩만 기억한다.
즉, 서로 다른 컴포넌트에서 동일 데이터에 대해 다른 조합으로 fetch 함수를 여러 번 호출하더라도, 실제 요청 처리는 한 번만 수행되도록 할 수 있다.
인증
- 인증(Authentication) 사용자가 제출한 자격증명 정보를 기반으로 인증된 사용자인지 식별하는 메커니즘이다.
- 인가(Authorization) 사용자가 액세스할 수 있는 경로를 결정하고 제한하는 메커니즘이다.
세션 관리 전략
세션 정보를 관리하는 전략은 크게 두 가지 방식이 있다.
2-1. Stateless, 상태를 유지하지 않는 관리 방식
세션 정보에 포함되는 데이터나 토큰(JWT)을 브라우저의 쿠키나 스토리지에 저장하는 방식이다.
쿠키는 각 HTTP/HTTPS 요청마다 서버로 전달되고, 서버에서 세션 정보를 검증하도록 한다. 이 방법은 간단하지만 제대로 구현하지 않으면 보안에 취약할 수 있다.
2-2. Stateful, 세션 정보를 DB에 저장하는 관리 방식
세션 정보에 포함되는 데이터나 토큰을 데이터베이스에 저장하고, 사용자 브라우저(쿠키)에는 암호화된 세션 ID 값만 저장된다.
이 방법은 Stateless 방식에 비해 보다 안전하지만, 세션 정보를 데이터베이스에 보관하기 때문에 이를 조회하는 과정에서 서버 리소스(IO)를 더 사용할 수 있으며, 그에 따라 구현과 관리가 더 복잡해질 수 있다.
