민ズl으l 개발일ブl

dynamic 옵션특정 페이지의 유형을 강제로 Static 또는 Dynamic 페이지로 설정할 수 있는 옵션 1. auto기본값어떤 설정도 강제하지 않음export const dynamic = 'auto' 2. force-dynamic페이지를 강제로 Dynamic 페이지로 설정export const dynamic = 'force-dynamic'; 3. force-static페이지를 강제로 Static 페이지로 설정props가 undfined로 설정됨하위 데이터 패칭 함수에서 cache:'no-store'를 사용하더라도 강제로 캐싱됨정적페이지로 강제됨단점: 검색 페이지 등 동작이 필요한 페이지에서 문제가 발생export const dynamic = 'force-static'; 4. error페이지를 강제로..

캐싱이란🤔데이터를 효율적으로 저장하고 빠르게 제공하기 위한 기술🥳Next.js에서 클라이언트와 서버에서 데이터를 빠르게 제공하거나 서버 부하를 줄이는 데 사용캐싱의 종류1. 클라이언트 캐싱브라우저나 사용자 디바이스에 데이터를 저장하여 재요청 없이 데이터를 제공예시: 브라우저가 이미 로드된 이미지나 CSS 파일을 캐싱하여, 다시 방문 시 빠르게 로드 🏃‍♀️2. 서버 캐싱서버가 자주 사용하는 데이터를 미리 저장하여 클라이언트 요청에 빠르게 응답서버 부하를 줄이고 성능을 최적화 🌟예시 : API 요청 결과를 캐싱하여 동일 요청 시 더 빠르게 처리주요 캐싱 개념과 옵션1. Full Route Cache페이지 전체를 캐싱하여 요청 시 저장된 페이지를 반환정적 페이지나 cache : 'force-cache..

환경변수명 : NEXT_PUBLIC_~~~NEXT_PUBLIC_API_SERVER_URL=http://localhost:12345 환경변수 적용시const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/post`); [공식문서] Configuring: Environment Variables | Next.jsLearn to add and access environment variables in your Next.js application.nextjs.org

React Server Component react 18버전부터 새롭게 추가된 새로운 유형의 컴포넌트오직 서버에서만 실행되는 컴포넌트(브라우저에서 실행 x)페이지의 대부분을 서버 컴포넌트로 구성할 것을 권장!클라이언트 컴포넌트는 꼭 필요한 경우에만 사용할것서버 컴포넌트서버측에서 사전 렌더링을 진행할 때 딱 한번만 실행됨브라우저에서 실행될 코드가 포함되면 x클라이언트 컴포넌트에게 직렬화되지 않는 Props는 전달불가클라이언트 컴포넌트서버측에서 사전 렌더링 진행할때 한번, 하이드레이션 진행할 때 한번 총 2번 실행=> 클라이언트에서만 실행하는건 아님서버 컴포넌트 import 못함//클라이언트 컴포넌트"use client";import { useEffect } from "react";...export defa..

Linknext/link클라이언트 사이드 렌더링 방식의 링크 생성programmatic navigation=> push=> replace : 뒤로가기를 방지하며 페이지 이동=> back : 페이지 뒤로가기import { useRouter } from "next/router";...const router = useRouter();const onClickbutton = () => { router.push("/test");};인텔리센스 : 코드 문법 자동 완성 기능Pre-fetching사전에 페이지를 미리 불러옴빠른 페이지 이동을 위해 제공되는 기능연결된 모든 페이지의 JS Bundle 불러옴API RoutesNext.js에서 API를 구축할 수 있게 해주는 기능@경로src 폴더를 가리킴import boo..

🌟page router🌟Pages폴더의 구조를 기반으로 react router처럼 페이지 라우팅 기능을 제공함다양한 방식의 사전 렌더링 제공단점💩페이지별 레이아웃 설정이 번거로움데이터 페칭이 페이지 컴포넌트에 집중됨불필요한 컴포넌트들도 JS Bundle에 포함됨 동적 경로 : ~/post/1,,, => [post]🌟app router🌟페이지 라우팅 설정 방식 변경레이아웃 설정 방식 변경데이터 페칭 방식 변경React 18 신규 기능 추가ex: React Server Component, Streaming [next.js] React Server ComponentReact Server Component react 18버전부터 새롭게 추가된 새로운 유형의 컴포넌트서버측에서만 실행되는 컴포넌트(브라우저..

✔️SSR서버 사이드 렌더링가장 기본적인 사전 렌더링 방식브라우저 요청이 들어올 때마다 사전 렌더링을 진행함장점🌟 : 페이지 내부의 데이터를 항상 최신으로 유지할 수 있음단점💩 : 데이터 요청이 늦어질 경우 모든게 늦어짐export const getServerSideProps = async () => { const [allBooks, recoBooks] = await Promise.all([ fetchBooks(), fetchRandomBooks(), ]); return { props: { allBooks, recoBooks }, };};export default function Home({ allBooks, recoBooks,}: InferGetServerSideProps..

url parameter란🤔웹 애플리케이션에서 URL을 통해 데이터를 전달하기 위한 방식 중 하나URL의 특정 부분에 데이터를 추가하여 서버로 정보를 전달하거나, 클라가 어떤 특정 데이터를 표시할지 지정할 때 사용https://example.com/search?query=javascript&page=2URL에서 파라미터는 보통 ?(물음표)와 함께 시작하며, 키=값 형식으로 데이터를 전달여러개의 파라미터가 있을경우 &(앤드)로 구분url parameter의 종류👀 1. Query ParameterURL에서 ?와 &로 구성된 부분을 가리킴데이터를 추가적으로 서버나 클라이언트로 전달할 때 사용https://example.com/products?category=books&sort=price* category..

✔️개발모드npm run dev실시간 코드 반영서버 렌더링(모든 페이지를 서버에서 요청 시점에 렌더링, 정적 페이지도 요청시 즉성 생성)설정이 완벽하지 않아도(예: getStaticPaths를 작성하지 않아도) 동작하도록 Next.js가 도와줌페이지를 즉시 렌더링하지만, 빌드 최적화는 적용x개발중에 사용✔️빌드모드npm run build // 빌드 파일 생성npm run start // 실행getStaticProps와 getStaticPaths를 통해 빌드 타임에 필요한 정적 페이지를 미리 생성페이지와 코드가 압축되고, 성능 최적화가 적용개발모드에서는 문제없이 작동하던 코드도 빌드 타임에 에러가 발생할 수 있음생성된 정적 파일을 사용하므로 요청에 대한 응답이 매우 빠름실제 서버에 배포하기 전에 사용