여고생쨩⭐️ 개발공부

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Lazy Loading 초기 로딩 개선 목적. 필요할때 로딩하게 구현 next/dynamic 클라이언트 컴포넌트 가져오기 'use client'; import { useState } from 'react'; import dynamic from 'next/dynamic'; // Client Components: const ComponentA = dynamic(() => import('../components/A')); const ComponentB = dynamic(() => import('../components/B')); const ComponentC = dynamic(() => import('../components/C'), { ssr..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Loading UI 인스턴스 로딩 상태 스켈레톤이나 스피너와 같은 로딩 표시기나 표지 사진, 제목등을 미리 렌더링 할 수 있음. loading.tsx export default function Loading() { // You can add any UI inside Loading, including a Skeleton. return } 같은 폴더에서 loading.js는 layout.js 안에 중첩됨. page.js 파일과 그 아래의 모든 하위 파일을 경계로 감쌈. 탐색은 서버 중심 라우팅에서도 즉각적임 네비게이션은 중단 가능 공유 레이아웃은 새 경로 세그먼트가 로드되는 동안 유지됨 서스펜스 경계 수동 정의 리액트의 fallback 활용