Next.js

Next.js는 정적 렌더링과 서버 사이드 렌더링을 제공하는 React Framework다.Next.js에서 UI 요소는 React를 통해 만들 수 있고, 그걸 바탕으로 CSR, SSR, SSG의 다양한 렌더링 방식을 이용할 수 있도록 도와준다.클라이언트측(브라우저)에

브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식Client Side Rendering의 단점을 효율적으로 해결하는 기술

Page Router는 Next 초창기부터 제공되어 오던 구 버전의 라우터로 현재 많은 기업에서 사용되고 있는안정적인 라우터. React Router 처럼 페이지 라우팅 기능을 제공함.pages 폴더를 기반으로 페이지를 라우팅하여 pages폴더 아래 자바스크립트 파일을

프리패칭 (Pre-fetching)은 페이지 이동을 매우 빠른 속도로 지체 없이 처리하기 위해 현재 보고 있는 페이지에서 링크를 통해 이동할 수 있는 모든 페이지들을 사전에 불러와놓는 기능을 의미한다.그런데 한 가지 이상한 점이 있다. Next.js는 분명 유저의 초기

위와 같은 기존의 리액트 앱에서의 데이터 패칭 방식은 큰 단점이 있다.바로 백엔드 서버로부터 불러온 데이터가 화면에 나타나기까지 걸리는 시간이 매우 오래 걸린다는 것인데,이유는 백엔드 서버에 보내는 데이터 요청이 컴포넌트가 마운트된 이후에나 발생하기 때문에 데이터 요청

폴더와 파일을 생성하는 것만으로 라우트를 설정할 수 있어 설정이 간편하고 구조가 직관적이다.Page Router는 다양한 렌더링 방식을 지원한다:SSR (Server-Side Rendering): getServerSideProps()를 사용SSG (Static Site

Next.js 13부터 도입된 App Router는 기존의 Page Router를 완전히 대체하는 디렉터리 기반 라우팅(Directory-based Routing) 방식을 제공한다.이를 통해 서버 컴포넌트와 클라이언트 컴포넌트를 효율적으로 조합할 수 있으며, 성능 최적

React Server Components(RSC)는 React 18에서 도입된 개념으로, 서버에서만 실행되는 컴포넌트이다. 기존의 React 컴포넌트와 달리 클라이언트 번들 크기를 줄이고, 서버에서 직접 데이터를 가져와 렌더링할 수 있는 장점이 있다.Next.js에서

기존 페이지 라우터에서는 아래 그림처럼 초기 접속이 완료된 이후 곧바로 페이지 이동이 이루어지기 전에 프리패칭을 수행하게된다.앱라우터 또한 페이지 라우터의 프리패칭 방식과 거의 유사하게 이루어 지는데, 서버 컴포넌트의 추가로 작지만 중요한 차이점이 하나 발생하게 된다.

기존 Page Router에서는 사전 렌더링 시, Next.js 서버가 백엔드 API나 데이터베이스에서 데이터를 가져오는 역할을 했다.이를 위해 getServerSideProps() 같은 특수한 함수를 사용하여 데이터를 패칭한 후, 해당 데이터를 페이지 컴포넌트의 pr

fecth 메서드를 활용해 불러온 데이터를 Next 서버에서 보관하는 기능영구적으로 데이터를 보관하거나, 특정 시간을 주기로 갱신시키는 것도 가능불필요한 데이터 요청의 수를 줄여서 웹 서비스의 성능을 크게 개선할 수 있음.Fetch 메서드에 cache, next 옵션을

리퀘스트 메모이제이션은 데이터 캐시와 함께 데이터 패칭을 최적화해주는 기능이다.하나의 페이지 안에 여러 개의 컴포넌트에서 발생하는 동일한 URL을 가진 API요청에 대해 캐싱하여 불필요한 네트워크 요청을 줄이는 기법이다.1\. 클라이언트가 Next.js 서버에 요청을

스트리밍이란 서버에서 HTML 페이지를 생성하는 동안 클라이언트로 전송할 데이터의 크기가 너무 크거나 준비 시간이 오래 걸리는 경우, 데이터를 작은 조각으로 나누어 순차적으로 전송하는 기술이다.마치 강물에 하나씩 흘려보내듯이, 클라이언트는 준비된 부분부터 받아 처리할

Next.js에서는 서버 및 클라이언트에서 발생하는 에러를 효과적으로 처리할 수 있도록 다양한 에러 핸들링 방식을 제공한다.Next.js의 App Router를 사용할 경우, 특정 경로에서 발생하는 에러를 전역적으로 처리하려면 error.tsx 파일을 추가하면 된다.a

서버 액션은 클라이언트에서 직접 서버 함수를 호출할 수 있도록 도와주는 기능이다.기존의 API 라우트 또는 서버리스 함수 없이도 폼 제출, 데이터 처리, 데이터베이스 업데이트 등을 간결하게 구현할 수 있다.서버 액션은 서버에서 실행되는 비동기 함수이며, use serv

서버 액션을 서버 컴포넌트가 아닌 클라이언트 컴포넌트에서 호출해서 로딩 상태를 설정하거나 에러를 핸들링할 수 있다.useActionState는 서버 액션의 상태를 관리하는 React 훅이다.이를 활용하면 서버 액션의 실행 상태(로딩, 성공, 실패)를 손쉽게 관리할 수

Next.js 13에서 도입된 Parallel Routes는 여러 개의 경로를 동시에 렌더링할 수 있도록 해주는 기능이다.기존의 레이아웃 기반 라우팅보다 유연하며, 다양한 UI 구성에 활용할 수 있다.기본적으로, Parallel Routes는 여러 개의 @slot을 활

인터셉팅 라우트 (Intercepting Routes)? 인터셉팅 라우트(Intercepting Routes)는 기존의 라우팅 흐름을 가로채어 특정 컴포넌트를 원하는 방식으로 렌더링할 수 있는 기능이다. 이를 통해 모달(modal) 기반 내비게이션을 구현하거나, 기존