NextJS 공식문서 파헤치기 (Caching)

0️⃣ Next.js의 캐싱 매커니즘 분류매커니즘설명위치목적지속 기간Request Memoization서버에서 함수의 반환 값을 메모이제이션 하여 저장한다.Server리액트 컴포넌트 트리에서 데이터를 재사용하기 위함요청 라이프 사이클 동안 (각 요청별로 유지)Data Cache서버에서 데이터 자체를 저장한다.Server사용자 요청과 배포 간에 데이터를 유지하여 불필요한 데이터 재요청을 줄인다.영구적이며, 필요에 따라 재검증(revalidation) 할 수 있다.Full Route Cache서버에서 HTML과 RSC Payload를 캐시한다.Server경로를 미리 렌더링하여 렌더링 비용을 줄이고 성능을 향상 시킨다.영구적이며, 필요에 따라 재검증(revalidation) 할 수 있다.Router Cache..

• format_list_bulleted FE/NextJS
• · 2024. 11. 15.
• textsms

NextJS 공식문서 파헤치기 (Linking and Navigating)

NextJS 에서 경로를 탐색하는 방법 컴포넌트 사용useRouter 훅 사용(클라이언트 컴포넌트)redirect 함수 사용(서버 컴포넌트)네이티브 Histroy API 사용1️⃣ 컴포넌트 컴포넌트는 HTML 태그를 확장하여 경로간 prefetching 과 클라이언트 측 탐색을 제공하는 내장 컴포넌트이다.NextJS에서 경로를 탐색하는 기본적이고 권장되는 방법next/link 에서 import 하여 사용할 수 있다.컴포넌트에 href prop을 전달하여 사용 가능 import Link from 'next/link'export default function Page() { return Dashboard}2️⃣ useRouter() 훅클라이언트 컴포넌트에서 useRouter 훅을 통해 경로를 변경할 수..

• format_list_bulleted FE/NextJS
• · 2024. 11. 14.
• textsms

NextJS 공식문서 파헤치기 (Defining Routes, Pages, Layouts and Templates)

Defining Routes1️⃣ 경로 생성폴더를 사용하여 경로를 정의하는 파일 시스템 기반 라우터를 사용한다.각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타낸다.page 파일이 없는 폴더는 공개적으로 액세스할 수 없다.2️⃣ UI 만들기NextJS 공식문서 파헤치기(1) 에서 알아보았던 파일 컨벤션에 따라 각 경로 세그먼트에 대하여 UI를 만들 수 있다.// app/page.tsx// 각 폴더에 page 파일을 사용하여 해당 폴더 라우트에 액세스할 수 있게 해준다.export default function Page() { return Hello, Next.js!}Pagespage.js는 경로에 고유한 UI 이다.컴포넌트를 내보내는 페이지를 정의할 수 있다.ex) index 페이지를 ..

• format_list_bulleted FE/NextJS
• · 2024. 11. 14.
• textsms

NextJS 공식문서 파헤치기 (Routing Fundamentals)

라우팅 기본 사항1️⃣ App RouterNextjs 13 버전에서 React Server Components 를 기반으로 새롭게 구축 하였다.app 이라는 이름의 디렉토리를 통해 기본 레이아웃을 정의한다.기본적으로 내부 컴포넌트는 React Server Components 이다. use client 예약어를 사용하여 Client Components를 사용할 수도 있다.(Server Components에 대한 자세한 내용은 추후에 다루도록 하겠다.)2️⃣ 폴더와 파일의 역할폴더는 경로를 정의하는 데 사용된다.파일은 경로 세그먼트에 표시되는 UI를 만드는 데 사용된다.경로의 각 폴더는 경로 세그먼트를 나타낸다. 각 경로 세그먼트는 URL 경로 의 해당 세그먼트 에 매핑된다.파일 이름 규칙layout: 세그..

• format_list_bulleted FE/NextJS
• · 2024. 11. 13.
• textsms