CH's 개발 공부 일지

(1) Route Cache클라이언트 내에 RSC Payload(화면렌더링에 필요한 정보)를 저장Link 컴포넌트의 prefetch로 RSC Payload를 저장하는 공간페이지 방문 시 Cache SET, 페이지 재방문 시 Cache HIT브라우저 세션동안만 유지되는 캐시(브라우저창 닫거나, 새로고침 시 초기화)(2) Full Route Cache서버에서 프리렌더링 결과인 html, RSC, Payload 저장되는 공간Full Route Cache SET 되는 경우 : SSG, ISR, generateStaticParams(3) Request Memoization같은 렌더링 과정에서 발생하는 fetch 요청을 일시적으로 캐싱하는 공간단일 렌더링 과정이 끝나면 자동으로 캐시에서 제거됨예시 코드// 같은 렌..

(1) SSG + ISR 하이브리드 패턴(generateStaticParams)[id] 처럼 경로 파라미터를 받는 동적 페이지라도, 내용이 거의 변하지 않는다면 빌드 타임에 미리 정적 페이지로 만들어 Full Route Cache에 캐싱해둘 수 있음 언제 쓰면 좋을까?페이지 주소는 id마다 달라지지만(동적), 한 번 정해진 내용은 거의 바뀌지 않는 경우예) 포켓몬 도감: /pokemon/25(피카츄)의 상세 정보는 한 번 정해지면 바뀔 일이 거의 없음이런 페이지를 매 요청마다 새로 그리는 건 낭비 -> 미리 만들어두면 응답이 빠르고 서버 부담도 줄어듦어떻게 동작?generateStaticParams가 반환한 파라미터 목록만큼 빌드 타임에 정적 페이지를 생성함// app/[id]/page.jsxexport..

(1) Streaming 이란?서버가 클라이언트(브라우저)에게 웹 페이지의 내용을 한 번에 전부 보내는 대신, 부분적으로 점진적으로 보내는 방식이는 페이지가 로딩되는 동안 일부 콘텐츠가 준비되면 그 부분부터 먼저 사용자에게 보여주기 시작하는 것을 의미함(2) page.tsx 내에서 Suspense로 Streaming 적용 시 SER와 UX 두 마리 토끼를 다 잡을 수 있음// page.tsx(SSR 페이지)export default async function SSRPage() { await fetch("서버URL"); // 이 부분은 loading.jsx에서 처리 return ( 로딩중...}> 로딩중...}> )}

프록시(proxy.js)는 특정 경로에 대한 사용자 요청이 서버에서 처리되기 전에 앞서 어떤 작업을 수행하고 싶을 때 사용하는 함수proxy.js 파일은 src/에 위치해야 함. app/ 안으로 넣으면 동작하지 않음(1) 알아두면 좋은 NextResponse의 4가지 메소드 의미// 요청을 계속 처리, 단순히 사용자 요청을 그대로 진행시킴return NextResponse.next();// about 경로로 redirect 시킴return NextResponse.redirect(new URL('/about', request.url));// faq 경로로 rewrite 함. (url path는 그대로인데 실행되는 페이지 컴포넌트가 다름)return NextResponse.rewrite(new URL("/f..

"서버가 그린 화면"과 "클라이언트가 처음 그린 화면"이 다를 때 나는 에러서버-클라이언트 사이에 렌더링 불일치 예시 1: 클라이언트 전용 API 사용'use client'; // 클라이언트 컴포넌트function UserLocation() { // 서버에서는 window 객체에 접근할 수 없음 const [location, setLocation] = useState(window.location.href); // Hydration Error const location = window.location.href; return 현재 URL: {location};} 해결법: useEffect를 사용해 클라이언트 측 코드 실행 지연"use client";import { useState, useEffe..

서버환경에서 실행되는 async 함수 (1) Form 제출 또는 데이터 변경용 api 요청에 적합폼 제출 예시export default function Page() { async function createInvoice(formData) { 'use server' const rawFormData = { customerId: formData.get('customerId'), amount: formData.get('amount'), status: formData.get('status'), } // mutate data // revalidate cache } return ...} "use server"로 선언된 모듈 내의 async ..

(1) 환경 변수 처리서버 환경(node)에서 환경변수 접근 시에는 자유롭게 환경변수 네이밍 가능process.env.DB_HOST// .envDB_HOST=https://db-host.com클라이언트 환경(browser)에서 환경변수 접근 시에는 prefix로 NEXT_PUBLIC_ 을 붙여줌NEXT_PUBLIC_MY_HOST=http://localhost:3000(2) SEO를 고려한 Metadata 설정정적인 metadata 설정export const metadata = { title: '...', description: '...',}export default function Page() {} 동적인 metadata 설정export async function generateMetadata({ p..

// src/app/providers.jsx"use client";import ThemeProvider from "@/context/ThemeProvider";export default function Providers({ children }) { return ( {children} )}클라이언트 컴포넌트로 Provider를 만들어 전체 앱에 컨텍스트를 제공함('use client' 지시어 사용)최상위 레이아웃(RootLayout)에서 이 Provider를 import하여 children을 감싸는 방식으로 모든 페이지와 컴포넌트에 컨텍스트를 제공함서버 컴포넌트(RootLayout)에서 클라이언트 컴포넌트(Providers)로 children을 전달하는 서버-클라이언트 컴포넌트 ..

(1) loading.jsx페이지가 렌더링 되는 동안 일시적으로 대신 UI를 보여주는 역할React의 Suspense 컴포넌트를 적용주로 SSR 페이지 컴포넌트와 함께 사용되는 경향 있(2) error.jsx페이지 컴포넌트 내에서 던져진 에러를 받아서 에러 발생 UI를 보여주는 역할React의 ErrorBoundary 컴포넌트를 적용에러 페이지를 별도로 보여주는 디자인이나 기획있을 때만 선택적으로 사용공식문서 제공 템플릿 사용 권장'use client' // Error boundaries must be Client Componentsimport { useEffect } from 'react'export default function Error({ error, reset }) { useEffect(() ..

(1) SSG(Static Rendering)Static Site Generation(정적 사이트 생성)은 빌드 시에 미리 페이지를 만들어 놓고 사용자가 해당 라우트에 들어왔을 때 바로 화면에 보여줄 수 있는 html 파일을 클라이언트에 줘서 화면을 그리는 렌더링 방식바뀌지 않는 정적인 컴포넌트에 적합한 렌더링 방식이며, Next.js 기본 렌더링 방식임빌드 시 해당 컴포넌트를 100% 프리렌더링 해놓고 클라이언트 요청 시 제공함프리렌더링 된 결과는 Full Route Cache에 저장됨(2) ISR(Static Rendering with Revalidation빌드 시 100% 프리렌더링 해놓고, 일정시간 지나면 사용자 요청에 따라 페이지 재생성할 준비하는 렌더링 방식2가지 ISR 적용 방법Route S..