[next.js] React Server Component, Client Router Cache

React Server Component

• react 18버전부터 새롭게 추가된 새로운 유형의 컴포넌트
• 오직 서버에서만 실행되는 컴포넌트(브라우저에서 실행 x)
• 페이지의 대부분을 서버 컴포넌트로 구성할 것을 권장!
• 클라이언트 컴포넌트는 꼭 필요한 경우에만 사용할것

---

서버 컴포넌트

• 서버측에서 사전 렌더링을 진행할 때 딱 한번만 실행됨
• 브라우저에서 실행될 코드가 포함되면 x
• 클라이언트 컴포넌트에게 직렬화되지 않는 Props는 전달불가

---

클라이언트 컴포넌트

• 서버측에서 사전 렌더링 진행할때 한번, 하이드레이션 진행할 때 한번 총 2번 실행
• => 클라이언트에서만 실행하는건 아님
• 서버 컴포넌트 import 못함

//클라이언트 컴포넌트
"use client";

import { useEffect } from "react";
...
export default function Home() {
  useEffect(() => {});
  ...
}

---

* Co-Location

코드, 파일, 데이터, 또는 로직을 그것이 사용하는 컴포넌트나 기능과 가까운 위치에 배치

---

Client Router Cache

• 페이지 전환 시 이전에 로드된 데이터를 저장하여 빠른 렌더링을 지원
• 사용자 경험과 성능을 개선

// app/products/[id]/page.js (클라이언트 라우팅)
import { useRouter } from 'next/router';
import { getProduct } from '../../lib/api';

export default function ProductPage() {
  const router = useRouter();
  const { id } = router.query;
  const product = getProduct(id); // 클라이언트에서 데이터 가져오기

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <button onClick={() => router.back()}>뒤로 가기</button>
    </div>
  );
}