Next.js 앱 라우터의 에러 핸들링
Frontend/Next.js
error.tsxApp Router에서는 error.tsx 파일을 사용하여 특정 경로 및 그 하위 경로에서 발생한 에러에 대한 UI를 설정할 수 있다.기본 사용법"use client";export default function Error() { return ( 오류가 발생했습니다. );};"use client" 지시어를 통해 반드시 클라이언트 컴포넌트로 설정해야 한다.서버와 클라이언트 양쪽에서 발생할 수 있는 모든 에러에 대응할 수 있다. Props 활용Next.js는 error와 reset props를 에러 컴포넌트에 자동으로 전달한다."use client";import { useEffect } from "react";export default function Error({ ..
스트리밍 (Streaming)
Frontend/Next.js
스트리밍이란?스트리밍은 서버에서 클라이언트로 대용량 데이터를 전송할 때, 데이터를 작은 조각으로 나누어 순차적으로 전송하는 기술이다.데이터 크기가 크거나 서버에서 데이터 준비에 시간이 많이 소요될 때 유용하다.작동 원리서버에서 데이터를 여러 조각으로 분할준비된 데이터 조각을 순차적으로 클라이언트에 전송클라이언트는 전체 데이터를 기다리지 않고 받은 조각부터 처리장점사용자 경험 향상: 긴 로딩 시간 없이 콘텐츠를 점진적으로 표시리소스 효율성: 서버와 클라이언트의 메모리 사용 최적화반응성 개선: 부분적인 데이터로도 사용자 상호작용 가능 Next.js의 HTML 스트리밍Next.js는 자체적으로 HTML 페이지를 스트리밍하는 기능을 제공한다.특징컴포넌트 단위의 스트리밍: 개별 컴포넌트를 독립적으로 스트리밍우선순..
라우트 세그먼트 옵션과 클라이언트 라우터 캐시
Frontend/Next.js
Route Segment Option라우트 세그먼트 옵션은 Next.js에서 특정 페이지의 동작을 강제로 설정할 수 있는 옵션이다.모든 컴포넌트를 개별적으로 확인하지 않고도 페이지를 정적(Static) 또는 동적(Dynamic) 페이지로 설정하거나, 페이지의 리밸리데이트 시간을 강제로 설정할 수 있다.dynamic 옵션dynamic 옵션을 사용하여 특정 페이지의 유형을 강제로 설정할 수 있다.export const dynamic = '옵션';설정 값'auto' 기본값으로, 아무것도 강제하지 않는다.Next.js가 페이지 내 컴포넌트들의 동작을 분석하여 자동으로 페이지 유형을 결정한다.'force-dytnamic' 페이지를 강제로 dynamic 페이지로 설정한다.모든 요청에 대해 서버에서 페이지를 렌더링한..