[Next.js] Caching

Next.js는 대부분의 영역에서 fetch 함수를 기반으로 캐싱을 한다!Next.js의 fetch는 브라우저 API가 아닌 Next.js에서 확장한 새로운 API다.그 중에서도 크게 두가지 포인트에서 캐싱을 진행하게 된다. Next.js의 두가지 캐싱 포인트Full Route Cache (build 시)- 빌드 시점에 페이지를 렌더링하고 그 결과를 캐싱하는 기능- 서버는 매 요청마다 페이지를 다시 렌더링할 필요 없이, 미리 생성된 HTML과 데이터를 빠르게 제공할 수 있어 페이지 로딩속도가 크게 향상됨- 서버에서 React의 API를 활용하여 렌더링 작업을 수행함- 기본적으로 Full Route Cache는 지속적이며, 사용자 요청에 의한 렌더링 결과가 캐싱되어 있음- 따라서 동일한 페이지에 대한 요청..

• format_list_bulleted Next.js
• · 2024. 9. 28.
• textsms

[Tanstack Query/Hooks] 네트워크 요청 결과에따라 훅 실행하기

로그인 요청을 서버로 보내고 나서, 성공할 경우 user 정보를 관리하는 zustand store에 정보를 업데이트하기위해 zustand의 훅을 사용했다. 그런데 ESLint에서 아래와같은 오류가 떴다! ESLint: React Hook "useUserStore" is called in function "onSuccess" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".(react-hooks/ rules-of-hooks) 리액..

• format_list_bulleted React
• · 2024. 9. 28.
• textsms

[Next.js] Router Handler & Server Action

API Route Handler클라이언트가 서버에 데이터를 요청하거나 전송할 때 사용하는 엔드포인트를 정의하고, 어떤 동작을 할지 정의하기위해 사용할 수 있다.즉, 클라이언트가 서버에 GET, POST, PUT, DELETE, PATCH 같은 HTTP 메서드 요청을 보낼 때 요청을 어떻게 보내고 처리한 값을 받을지 작성할 수 있다.  API Router Handler 예제1) app/api/data/route.ts 파일 생성- 컴포넌트에서 '/api/data' 경로로 fetch 요청을 보낸다- 그럼 route.ts에서 정의해둔 실제 API URL로 네트워크 요청을 정의해둔 동작에 맞게 처리한다// app/api/data/route.ts (서버에서 실행되는 코드)export async function GE..

• format_list_bulleted Next.js
• · 2024. 9. 27.
• textsms

[Next.js] Asset 최적화

Next의 이미지 최적화Next는 자동으로 이미지 크기를 최적화해주는 이미지 컴포넌트(Image)를 제공한다. Image 태그의 기능1) 크기 최적화- 각 기기에 맞는 크기의 이미지를 자동으로 제공하고, WebP 및 AVIF와 같은 최신 이미지 형식을 사용// next.config.js 설정 추가module.exports = { images: { // ... formats: ['image/avif', 'image/webp'], },} 2) 시각적 안정성- 이미지가 로딩도리 때 레이아웃 이동을 자동으로 방지 3) 빠른 페이지 로드- 네이티브 브라우저 지연 로딩을 사용하여 이미지가 뷰포트에 들어올 때만 로드됨- 블러업 플레이스 홀더를 옵션으로 사용 가능 4) 자산 유연성- 원격 서버에 저장된 이..

• format_list_bulleted Next.js
• · 2024. 9. 27.
• textsms

[Next.js] Error UI, Error Handling

프로젝트를 빌드한 후에 에러가 발생하면 사용자는 next.js의 기본 에러메세지가 표시된 페이지를 확인하게 된다 이런 UI말고 우리가 의도한 UI로 사용자에게 재시도를 유도할 수 있게하려면 어떻게 할 수 있을까?Error UI를 만들기위한 기능도 넥스트에서 기본으로 제공하고 있다.  Error UI 만들기1) route segment 폴더에 error.tsx 파일을 생성한다.2) error.tsx는 반드시 클라이언트 컴포넌트여야한다! ('use client')- 리액트의 error boundary와 연관- 에러 바운더리는 클래스 컴포넌트로 작성되어있고, 리액트 컴포넌트 트리 내에서 발생하는 오류를 잡아내 fallback UI를 렌더링하는 역할을 한다- 따라서 클라이언트 측에서 오류를 처리하기 위해서는 오..

• format_list_bulleted Next.js
• · 2024. 9. 27.
• textsms

[Next.js] Suspense, Loading UI, Streaming SSR

큰 데이터를 받아거나 네트워크가 느린 환경에서는 어쩔 수 없이 긴 로딩시간이 생길 수 있다.그럴 때 활용할 수 있는 방법들을 알아보자! 느린 데이터 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'..

• format_list_bulleted Next.js
• · 2024. 9. 27.
• textsms