Next.js에서 prefetch의 필요성Next.js는 동적 데이터도 빌드 시점에 미리 fetch해서 로딩 속도를 향상시킬 수 있다. (SSG)하지만 빌드 시점의 상태가 아닌 최신 상태를 받아야하면서도, 로딩 속도를 향상시키고 싶다면 prefetch 를 활용할 수 있다! json-server 옵션으로 user 목록을 json-server에서 로드해오는 fetch에 2초 딜레이를 준 상태다메인 페이지에서 사용자 목록을 prefetch 해두었기 때문에 other 페이지에서 사용자 목록을 로딩 없이 바로 확인할 수 있다!예제Query Provider 만들기하위 컴포넌트들이 queryClient에 접근할 수 있도록 Query Provider를 생성한다// src/components/providers/TQPro..
Parallel RoutesURL 세그먼트를 담당하는 폴더에 @를 붙여 여러 페이지 경로를 렌더링할 수 있게하는 기능아래 사진처럼 한 페이지에 두가지 페이지 요소를 띄우는 등의 작업을 할 수 있게 함대시보드나 소셜 사이트의 피드, 상품 상세 페이지 모달 띄우기 같은 보여줘야하는 정보량이 많은 동적인 섹션에 유용하게 사용할 수 있음 모달 실습1) (root)/@modal/page.tsx 생성const ModalPage = () => { return ( modal 영역 );};export default ModalPage; 2) layout의 props에 modal: React.ReactNode를 추가export default function Layo..
Next.js는 대부분의 영역에서 fetch 함수를 기반으로 캐싱을 한다!Next.js의 fetch는 브라우저 API가 아닌 Next.js에서 확장한 새로운 API다.그 중에서도 크게 두가지 포인트에서 캐싱을 진행하게 된다. Next.js의 두가지 캐싱 포인트Full Route Cache (build 시)- 빌드 시점에 페이지를 렌더링하고 그 결과를 캐싱하는 기능- 서버는 매 요청마다 페이지를 다시 렌더링할 필요 없이, 미리 생성된 HTML과 데이터를 빠르게 제공할 수 있어 페이지 로딩속도가 크게 향상됨- 서버에서 React의 API를 활용하여 렌더링 작업을 수행함- 기본적으로 Full Route Cache는 지속적이며, 사용자 요청에 의한 렌더링 결과가 캐싱되어 있음- 따라서 동일한 페이지에 대한 요청..
Next의 이미지 최적화Next는 자동으로 이미지 크기를 최적화해주는 이미지 컴포넌트(Image)를 제공한다. Image 태그의 기능1) 크기 최적화- 각 기기에 맞는 크기의 이미지를 자동으로 제공하고, WebP 및 AVIF와 같은 최신 이미지 형식을 사용// next.config.js 설정 추가module.exports = { images: { // ... formats: ['image/avif', 'image/webp'], },} 2) 시각적 안정성- 이미지가 로딩도리 때 레이아웃 이동을 자동으로 방지 3) 빠른 페이지 로드- 네이티브 브라우저 지연 로딩을 사용하여 이미지가 뷰포트에 들어올 때만 로드됨- 블러업 플레이스 홀더를 옵션으로 사용 가능 4) 자산 유연성- 원격 서버에 저장된 이..
프로젝트를 빌드한 후에 에러가 발생하면 사용자는 next.js의 기본 에러메세지가 표시된 페이지를 확인하게 된다 이런 UI말고 우리가 의도한 UI로 사용자에게 재시도를 유도할 수 있게하려면 어떻게 할 수 있을까?Error UI를 만들기위한 기능도 넥스트에서 기본으로 제공하고 있다. Error UI 만들기1) route segment 폴더에 error.tsx 파일을 생성한다.2) error.tsx는 반드시 클라이언트 컴포넌트여야한다! ('use client')- 리액트의 error boundary와 연관- 에러 바운더리는 클래스 컴포넌트로 작성되어있고, 리액트 컴포넌트 트리 내에서 발생하는 오류를 잡아내 fallback UI를 렌더링하는 역할을 한다- 따라서 클라이언트 측에서 오류를 처리하기 위해서는 오..
큰 데이터를 받아거나 네트워크가 느린 환경에서는 어쩔 수 없이 긴 로딩시간이 생길 수 있다.그럴 때 활용할 수 있는 방법들을 알아보자! 느린 데이터 fetch 환경 만들기1. 크롬에서 속도를 조정할 수 있다.2. json-server 버전을 낮춰 딜레이를 준다- "dependencies": { "json-server": "0.17.4" }- "server": "json-server --watch db.json --delay 5000 --port 4000" 비동기 데이터 로딩페이지에 로딩 UI를 띄워두고, 데이터를 로딩하는 방식이다.'use client';import React, { useState, useEffect } from 'react';import { Product } from '@/types'..