Pages Router페이지 라우터에서는 사전 렌더링 과정 중 Next.js 서버 사이드에서 다른 백엔드 서버나 데이터베이스로부터 데이터를 페칭한다.작동 원리페이지 역할을 하는 파일 안에 서버 측에서만 실행되는 특수 함수를 사용하여 데이터를 직접 페칭하며, 페칭한 데이터는 페이지 컴포넌트에 props로 전달한다.export async function getServerSideProps() { const res = await fetch('https://api.example.com/data'); const data = await res.json(); return { props: { data }, }}export default function Page({ data }) { return {data}..

Next.js의 App Router에서는 컴포넌트를 서버 컴포넌트와 클라이언트 컴포넌트로 구분한다.이 구분은 상호작용 유무와 렌더링 위치에 따라 이루어진다.Client Component클라이언트 컴포넌트는 브라우저에서 실행되며, 사용자와의 상호작용을 처리할 수 있다.'use client' // 파일 최상단에 지시어 선언import { useState } from 'react'export default function Counter() { const [count, setCount] = useState(0) return setCount(count + 1)}>{count}}사전 렌더링 시 한 번, 하이드레이션 시 한 번, 총 두 번 실행useState, useEffect 등의 React 훅 사용 가능브라..

Pages RouterHead페이지 별로 Head 컴포넌트 안에 작성하여 SEO 관련 메타 데이터를 설정할 수 있다.import Head from "next/head";export default Page() { return ( 타이틀 // ... );} Fallback 상태에서의 SEO 처리동적 라우팅을 사용하는 페이지(예: 아이템별 상세 페이지)에서 fallback:true를 설정했을 때, 지정하지 않은 경로에 대해 SSR과 유사하게 동작한다. 이때 초기 HTML에 SEO 관련 메타 데이터가 포함되지 않는 문제가 발생할 수 있는데, 이를 방지하기 위해 fallback 상태에서..