App Router3 Next.js의 App Router와 Pages Router ※ 해당 글은 Next.js 13.4.0 이후 버전 기준 App Router와 Page Router의 차이를 비교한 글입니다. Routing nextjs는 파일 시스템을 기반으로 라우팅을 구현한다. Built-on App Router 서버 중심 라우팅 Next.js 13.4.0 버전의 App Router는 서버 중심 라우팅 방식으로, React Server Components를 사용하여 구현되었다. 가장 큰 변화로는, 서버에서 데이터를 조금 더 쉽게 가져오게 되며, 페이지 이동 시에도 페이지를 재렌더링하지 않고 SPA(Single Page Application)처럼 URL만 업데이트하여 변경된 부분만 렌더링 하는 방식을 제공한다. React Server Components를 기반으로 한 서버 중심 라우팅.. 2024. 3. 20. Next.js 13 업데이트 알아보기 Next.js13 버전의 주요 업데이트 내용에 대해서 알아보자 App Router 기존에 pages/ 디렉터리에서 라우팅 되던 방식과 다르게, app/ 디렉터리로 라우팅 하는 방식이 추가됨 app/ 디렉토리를 생성하여 라우팅을 설정할 수 있으며, 라우팅 환경 개선뿐만 아니라, 레이아웃, 서버 컴포넌트, 스트리밍, 데이터 패칭까지도 지원하는 형태로 향상 app/ 폴더로 기존 파일 시스템 라우팅을 구현할 수 있으며, 여기의 page.js가 해당 경로(라우팅)의 페이지 컴포넌트가 됨 pages/ 라우팅과 함께 사용 가능 (점진적 업데이트) // pages/index.js export default function Page() { return Hello, Next.js!; } // app/page.js expo.. 2024. 3. 19. Suspense란 무엇인가 React Spense란 무엇인가? 를 사용하면 자식이 로딩을 완료할 때까지 폴백을 표시할 수 있다. 기본 사용법 여기서 fallback은 로딩이 완료되지 않은 경우 실제 UI 대신 렌더링 할 대체 UI라는 뜻이다. 유효한 어떤 React 노드든 사용가능하며, 주로 로딩 스피너나 스켈레톤 같은 가벼운 플레이스홀더 뷰를 사용한다. Suspense는 children이 일시 중단되면 자동으로 fallback으로 전환되고, 데이터가 준비되면 다시 children으로 전환된다. 렌더링 중 fallback이 일시 중단되면 가장 가까운 상위 Suspense 경계가 활성화된다. 아래 예시에서 앨범 목록을 가져오는 동안 Albums 컴포넌트가 일시 중단된다. 렌더링할 준비가 될 때까지 React는 가장 가까운 상위 Su.. 2024. 3. 7. 이전 1 다음
