분류 전체보기

[Next.js] app router - 데이터 페칭

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 4.1) 앱 라우터의 데이터 페칭 Page Router의 데이터 페칭Parge Router에서는 서버나 데이터베이스로부터 데이터를 페칭하기 위해서 특정 함수들을 사용했다.(GetServerSideProps, GetStaticProps, GetStaticPath 등) 저 함수들에서 데이터를 받아서 page component에 데이터를 Props로 전달해주었다.page router에서는 모든 컴포넌트가 클라이언트 컴포넌트 이기 때문에 page component 역시 브라우저에서 다시 실행되기 때문에 저러한 함수들을 page component에 작성할 수 없었다.page router의 data fetching의 단점페이지 컴포넌트에게만 데이터가 props..

[Next.js] App Router - 네비게이팅

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 3.6) 페이지 라우터 정리3.6 네비게이팅Page Router에서의 네비게이팅1. 페이지 요청2. 넥스트 서버로부터 이동할 페이지에 필요한 모든 컴포넌트들이 포함된 JS Bundle 파일 받음3. Bundle 파일을 브라우저 차원에서 실행4. 현재 페이지에 맞도록 컴포넌트 교체 JS Bundle 생성이 오래걸린다면 이동가능한 페이지의 Bundle을 미리 불러오는 프리페칭(Pre-Fetching) 기능도 수행가능App Router에서의 네비게이팅page router와 크게 다르지 않다.서버 컴포넌트가 추가되었기 때문에 이 부분을 위한 중요한 차이점이 존재한다.1. 페이지 요청2. 넥스트 서버로부터 JS Bundle 파일 받음 -> Client Com..

[Next.js] 리액트 서버 컴포넌트

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 3.4) 리액트 서버 컴포넌트 이해하기3.5) 리액트 서버 컴포넌트 주의사항3.4 리액트 서버 컴포넌트 이해하기리액트 서버 컴포넌트란?- 리액트 18 버전부터 새롭게 추가된 새로운 유형의 리액트 컴포넌트- 서버 측에서만 실행되는 컴포넌트이다. 리액트 서버 컴포넌트가 나타나게된 배경Page router에서의 사전렌더링을 다시 떠올려보면 하이드레이션(화면에 상호작용을 추가)을 위해 서버는 모든 JS 파일들을 묶는 번들링을 진행하고 브라우저에게 번들파일이 전달한다고 했다.하지만 상호작용이 필요하지 않은 모든 자바스크립트 파일 또한 번들에 포함될 필요는 없다. 왜냐하면 후속으로 JS 번들 과정을 진행하기 전에 서버는 사전 렌더링을 통해 컴포넌트를 생성하기 ..

[Next.js] App Router - 레이아웃

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 3.3) 레이아웃 설정하기3.3 레이아웃 설정하기Root Layoutsrc/app/layout.tsx 에서 설정할 수 있으며, 이 루트 레이아웃은 하위 모든 페이지 컴포넌트의 레이아웃으로 적용된다. 페이지별 Layoutapp├── layout.tsx├── page.tsx└── search ├── layout.tsx └── page.tsx이런식으로 search 경로에도 layout.tsx가 존재한다면, root layout을 덮는 것이 아닌 중첩으로 Layout이 적용된다.따라서 Root Layout > search/layout.tsx > search/page.tsx 순으로 렌더링이 된다. Layout 설정 주의사항export default..

[Next.js] App Router - 페이지 라우팅

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 3.2) 페이지 라우팅 설정하기3.2 페이지 라우팅 설정하기Page Router vs App Router공통점- 폴더기반 페이지 라우팅이 가능하다.차이점- Page Router : 특정 폴더 안에 index.tsx가 페이지 컴포넌트 역할, 경로.tsx(ex. search.tsx) 역시 페이지 경로(/search)로 구분 가능- App Router : page.tsx가 페이지 컴포넌트 역할을 함, 무조건 page.tsx로 페이지 컴포넌트를 지정할 수 있기 때문에 경로 폴더가 필요 App Router의 query string 받아오기App Router에서는 페이지 컴포넌트에게 자동으로 전달이 되는 Props에는 쿼리 스트링이나 URL 파라미터와 같은 값..

[Next.js] Page Router 장단점

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.21) 페이지 라우터 정리Page router 장점1. 파일 시스템 기반의 간편한 페이지 라우팅 제공 - pages 폴더의 구조 기반 라우팅 - 동적 경로 - Catch All Segment - Optional Catch All Segment 2. 다양한 방식의 사전 렌더링 제공 - SSR : 요청을 받을 때마다 매번 새롭게 페이지 생성 -> 항상 최신 데이터 보장 - SSG : 빌드타임에 페이지 생성 - ISR : revalidate를 통한 페이지 재생성 - On-Demand ISR : 페이지 재생성 트리거Page router 단점1. 페이지별 레이아웃 설정이 번거롭다.type NextPageWithLayout..

[Next.js] Page Router - ISR

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.17) ISR 1. 소개 및 실습2.18) ISR 2. 주문형 재 검증2.17 ISR 1. 소개 및 실습ISR이란?ISR (Incremental Static Regeneration : 증분 정적 재생성)SSG 방식으로 생성된 정적 페이지를 일정 시간을 주기로 다시 생성하는 기술 기존 SSG 방식에서는 빌드 타임에 미리 생성한 페이지가 이 시간 이후에는 다시 생성되지 않기 때문에 페이지를 다시 요청해도 동일한 페이지만 계속 반환되었는데, ISR 방식으로 페이지를 다시 생성함으로써 새로운 요청이 발생했을 때 새로 생성된 페이지를 보여줄 수 있다. ISR의 장점1. 미리 생성해둔 정적페이지를 응답하기 때문에 매우 빠른 속도로 동작한다. (SSG의 장점..

[Next.js] page router - SSG(정적 사이트 생성)

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.13) SSG 1. 소개 및 실습2.14) SSG 2. 정적 경로에 적용하기2.15) SSG 3. 동적 경로에 적용하기2.16) SSG 4. 폴백옵션 설정하기2.13 SSG 1. 소개 및 실습SSR의 장단점장점 : 브라우저에 접속 요청이 들어올 때마다 사전 렌더링 과정에서 백엔드 서버에서 새로운 데이터를 요청하면서 페이지 내부의 데이터를 항상 최신 버전으로 유지할 수 있음단점 : 데이터 페칭이 너무 느리게 되면 사용자 경험이 안좋아진다.SSG(정적 사이트 생성)란SSR의 단점을 해결할 수 있는 사전 렌더링 방식.빌드 타임에 미리 페이지를 사전 렌더링 하는 방법(페이지를 미리 딱 한 번 생성한다)SSG의 장단점장점 : 사전 렌더링 과정에 많은 시간..

[Next.js] page router - SSR

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.11) SSR 1. 소개 및 실습2.12) SSR 2. 실습getServerSidePropsgetServerSideProps는 페이지가 SSR 방식으로 사전 렌더링이 이루어지게 한다.export const getServerSideProps = () => { // 컴포넌트보다 먼저 실행되어서, 컴포넌트에 필요한 데이터 불러오는 함수 const data = "hello"; return { props: { data, }, };};getServerSideProps는 약속된 이름의 함수인데 이를 export하면 해당 페이지는 그때부터 SSR로 동작하게 된다. 어떻게 작동하는가1. 해당 페이지 경로로 페이지를 요청2. 넥스트 서버..