ayeongjin 님의 블로그

🌐 CSR, SSR, SSG, ISR의 렌더링 방식과 SEO, Hydration의 관계SEO 최적화를 고민하다가 CSR/SSR뿐만 아니라 SSG, ISR 그리고 SEO, Hydration에 대한 개념을 정리하고 실제 사용 시 어떤 조합이 적절한지 고민해보게 되었다. ✅ Hydration이란?Hydration은 서버에서 생성된 정적 HTML을 클라이언트에서 React가 연결하여 실제로 동작하게 만드는 과정이다. SSR, SSG, ISR 모두 hydration이 필요하다HTML만으로는 상호작용이 불가능하며, React의 이벤트 바인딩이 완료되어야 비로소 인터랙션이 가능해진다Hydration 동안에는 버튼 클릭, 입력 등이 잠시 비활성화될 수 있어 사용자 경험에 영향을 줄 수 있다 예를들어,서버가 만들어준 ..

이미지 최적화웹페이지에서 가장 많은 용량을 차지하는 파일은 이미지 파일입니다. Next.js의 Image 내장 컴포넌트를 사용하면 쉽게 최적화할 수 있습니다. 1. 이미지 최적화 전의 문제점비효율적인 파일 포맷 사용: jpeg 파일을 렌더링하면 용량이 크므로, webp 또는 avif 같은 더 경량화된 포맷을 사용하면 성능이 향상됩니다.불필요한 이미지 로딩: 현재 화면에 렌더링할 필요가 없는 모든 이미지가 동시에 로드됩니다.과도한 이미지 크기: 화면에서 필요로 하는 크기보다 훨씬 큰 이미지가 불러와져 성능 저하가 발생합니다. 2) 이미지 컴포넌트로 변경외부 서버에서 이미지를 불러올 경우 Next.js의 보안 정책에 의해 차단될 수 있으므로 next.config.mjs에서 도메인을 허용해야 합니다.// ne..

패럴렐 라우트(Parallel Route)란?병렬 라우트: 하나의 화면 안에서 여러 개의 페이지 컴포넌트를 병렬로 렌더링할 수 있는 패턴 소셜 미디어 서비스나 관리자 대시보드처럼 복잡한 페이지 구조를 렌더링하는 데 적합합니다. 1) 슬롯패럴렐 폴더 안에 @폴더 이름으로 생성 가능병렬로 렌더링될 페이지 컴포넌트를 보관하는 폴더app/parallel/@슬롯/page.tsx : 해당 경로 안의 페이지 컴포넌트는 자신의 부모 레이아웃 컴포넌트에서 props로 전달됩니다.@슬롯 : URL 주소에는 영향을 주지 않음. 따라서 parallel/@sidebar로 접속해도 페이지가 렌더링되지 않습니다.// src/app/parallel/layout.tsximport Link from "next/link";import {..

서버 액션이란?Next.js의 서버 액션(Server Actions) 은 브라우저에서 호출할 수 있지만, 서버에서 실행되는 비동기 함수입니다. 이를 통해 API 엔드포인트를 따로 만들지 않고도 브라우저와 서버 간 데이터 통신을 손쉽게 구현할 수 있습니다.기존에는 브라우저에서 서버로 데이터를 보내려면 API 라우트를 따로 구현해야 했습니다.하지만 서버 액션을 사용하면 일반 함수처럼 서버에서 실행되는 코드를 작성할 수 있습니다.즉, 기존 API 라우트를 대체하는 더 간편한 방식 1) 서버 액션 vs 기존 API 라우트 비교구분기존 API 라우트 방식서버 액션 방식사용 방식pages/api 또는 app/api에 API 엔드포인트 작성use server를 명시하여 함수 정의호출 방식브라우저 → API 라우트 →..

스트리밍이란?데이터가 너무 커서 빠르게 전송하기 어려울 때, 데이터를 작은 단위로 나누어 전송하는 방식 1) Next.js에서 제공하는 HTML 스트리밍사용자가 페이지에 접속하면 먼저 렌더링이 빠른 단순한 컴포넌트를 표시데이터 페칭 등 렌더링이 오래 걸릴 것으로 예상되는 컴포넌트는 대체 UI를 표시했다가 나중에 렌더링장점:사용자가 빠르게 콘텐츠를 볼 수 있도록 UX 개선로딩 바 등 대체 UI를 보여줄 수 있어 더 좋은 환경에서 대기 가능✅ Next.js의 스트리밍은 Dynamic Page에서 주로 사용된다.  스트리밍 적용하기1) 페이지 - 자동 스트리밍loading.tsx 파일을 생성하면 자동으로 스트리밍 적용됨// src/app/(with-searchbar)/search/loading.tsxexpor..

풀 라우트 캐시Next.js 서버에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능입니다. 이 기능을 활용하면 정적 페이지의 로딩 속도를 향상시킬 수 있습니다. 1) Dynamic Page로 설정되는 기준특정 페이지가 접속 요청을 받을 때마다 변화가 생기거나, 데이터가 매번 달라지는 경우 자동으로 Dynamic Page로 분류됩니다. (1) 캐시되지 않는 Data Fetching을 사용할 경우cache: "no-store" 설정 시 Dynamic Page로 분류됨서버 컴포넌트에서만 해당됨 (클라이언트 컴포넌트는 영향 없음) (2) 동적 함수 (쿠키, 헤더, 쿼리스트링)를 사용하는 경우cookies(), headers(), useSearchParams() 등의 함수가 포함되면 자동으로 Dynami..

데이터 페칭 1) Next.js에서 데이터 페칭서버 컴포넌트에서의 데이터 페칭// 서버 컴포넌트에서 비동기 함수 사용 가능export async function Page(props){ const data = await fetch('...'); // 기존의 getServerSideProps, getStaticProps 대체 return ...}클라이언트 컴포넌트에서는 async 키워드 사용 불가 (브라우저에서 문제 발생 가능)Next.js 공식 문서에서는 데이터는 필요한 곳에서 직접 불러오는 것이 최적의 방식이라고 권장 2) 서버 컴포넌트에서 데이터 불러오기 예제서버 컴포넌트는 async 함수로 정의 가능데이터 요청 실패 시 오류 메시지 출력// 컴포넌트 자체가 async function이 될 수 있음//..

App Router란?Next.js 13버전부터 추가된 새로운 라우터 시스템으로, 기존 Page Router를 완전히 대체함. ✅ App Router 주요 변경 사항데이터 페칭 방식 변경레이아웃 설정 방식 변경페이지 라우팅 설정 방식 변경React 18의 신규 기능 추가React Server Component (RSC)Streaming 지원 1) App Router 프로젝트 생성npx create-next-app@latest section03 2) 페이지 라우팅 설정기존 Page Router에서는 pages/ 디렉토리를 사용했지만, App Router에서는 app/ 디렉토리를 사용하여 페이지를 구성합니다. 3) 레이아웃 설정App Router에서는 개별 페이지마다 레이아웃을 설정하는 방식이 아니라, 레이..

✅ Page Router의 장점1) 파일 시스템 기반의 간편한 페이지 라우팅 제공Next.js에서는 pages/ 폴더 안에 파일을 생성하는 것만으로 자동으로 라우팅이 설정됨별도의 라우팅 설정 없이 파일 기반으로 쉽게 관리 가능2) 다양한 방식의 사전 렌더링 제공서버 사이드 렌더링 (SSR)요청이 들어올 때마다 서버에서 HTML을 생성하여 클라이언트에 전달동적인 데이터를 렌더링하는 데 적합정적 사이트 생성 (SSG)빌드 타임에 미리 HTML을 생성하여 정적 페이지로 제공성능이 뛰어나며 SEO에 유리함증분 정적 재생성 (ISR)SSG 방식에서 일정 시간이 지나면 새로운 페이지를 생성하여 최신 데이터 반영실시간 데이터 갱신이 필요한 경우 활용 가능 ❌ Page Router의 단점1) 페이지별 레이아웃 설정이 ..

SEO 설정하기 1. 썸네일과 Favicon 설정하기Next.js 프로젝트에서 썸네일과 파비콘을 설정하려면 public 폴더에 favicon.ico와 썸네일 이미지를 추가하면 됩니다.📌 설정 방법public 폴더에 favicon.ico 파일 추가프로젝트의 썸네일 이미지를 public 폴더에 추가 2. 메타태그 설정하기Next.js에서는 Head 컴포넌트를 활용하여 페이지별로 메타태그를 설정할 수 있습니다. 📌 설정 방법import Head from "next/head"; // 메타태그 설정을 위한 Head 컴포넌트 import ⚠️ 주의사항SSG 방식으로 렌더링하면 초기 로딩 중에 메타태그가 적용되지 않을 수 있음따라서 다음과 같이 로딩 화면에서도 기본 메타태그를 설정하여 문제를 방지해야 함   Ne..