ayeongjin 님의 블로그

ISR (Incremental Static Regeneration) 1. SSG의 문제점SSG 방식으로 페이지를 빌드 타임에 정적으로 생성하면, 이후에도 같은 페이지가 계속 반환됨속도는 빠르지만 최신 데이터를 즉시 반영하기 어려움 2. ISR이란?*증분 정적 재생성(Incremental Static Regeneration)**의 약자로, 일정 시간마다 정적 페이지를 다시 생성하는 기술SSG 방식으로 생성된 페이지에 유통기한을 설정하여 일정 시간이 지나면 새롭게 생성 가능최신 데이터가 필요할 때만 페이지를 재생성하여 성능과 신선한 데이터를 모두 보장 ✅ ISR의 장점빠른 응답 속도 (기존 SSG의 장점 유지)최신 데이터 반영 가능 (SSR의 장점 추가)서버 부하 감소: 필요할 때만 페이지를 재생성 3. I..

SSG (Static Site Generation) 1. SSR의 문제점요청 시마다 서버에서 렌더링을 수행해야 하므로 서버 부하 증가트래픽이 많을 경우 응답 속도가 느려질 수 있음캐싱이 어렵고 동적인 요청마다 HTML을 다시 생성해야 함 2. SSG (Static Site Generation)이란?SSR의 단점을 해결하는 사전 렌더링 방식빌드 타임에 페이지를 미리 렌더링하여 정적인 HTML을 생성함사전 렌더링이 완료된 HTML은 클라이언트 요청 시 즉시 제공됨✅ SSG의 장점페이지가 미리 생성되어 있어 사용자 요청에 빠르게 응답 가능트래픽이 많아도 서버 부하가 적음SEO에 유리함❌ SSG의 단점모든 페이지를 미리 빌드해야 하므로 빌드 시간이 길어질 수 있음동적인 데이터를 반영하기 어려움 (매번 빌드를 다..

SSR (Server-Side Rendering) 1. 기존 리액트 앱의 동작 방식불러온 데이터를 보관할 State 생성데이터 페칭 함수 생성컴포넌트 마운트 시점에 fetchData 호출데이터 로딩중일때의 예외처리💡 문제점클라이언트에서 데이터를 요청하고 로딩하는 데 오랜 시간이 걸림초기 접속 시, 화면이 렌더링되기 전에 필요한 데이터를 받아와야 하기 때문에 UX가 저하됨 2. SSR (Server-Side Rendering)이란?서버에서 미리 HTML을 생성하여 클라이언트에 전달하는 방식요청이 들어올 때마다 서버에서 렌더링을 수행하고, 완성된 HTML을 반환함SEO 최적화 및 초기 로딩 속도 개선에 유리함 3. SSR의 동작 방식클라이언트가 페이지를 요청함서버에서 데이터 요청 및 페이지 렌더링을 수행함..

1. Page Router란?pages/ 폴더 기반으로 자동 라우팅이 설정됩니다.pages/ 내부의 파일명과 경로가 곧 URL 경로가 됩니다.App Router (app/) 방식과 공존할 수 있으며, 프로젝트에 따라 선택적으로 사용할 수 있습니다.✅ Next.js 13 이후app/ 폴더를 사용하면 App Router (서버 컴포넌트 기반) 방식pages/ 폴더를 사용하면 Page Router (기존 방식) 유지 가능프로젝트 요구사항에 따라 app/과 pages/를 함께 사용할 수도 있음  2. Next.js 프로젝트 시작하기 1) 프로젝트 생성npx create-next-app@14 my-next-appcd my-next-appnpx: 최신 버전의 Node 패키지를 설치 없이 실행할 수 있도록 도와주는 ..

Next.js는 라이러리가 아닌 프레임워크 Libraryex. React.js, JQuery주도권을 개발자가 가짐기능 구현을 원하는 방향으로 진행한다.쓰고싶은 도구, 쓰고싶은 기술을 쓴다.자유도가 높음 (기본 기능 외 제공 X) Frameworkex. Next.js, Remix주도권을 프레임워크가 가짐프레임워크가 제공하는 기능을 이용하거나 허용하는 범위 내에서 코드를 작성해야함자유도가 낮음 (거의 모든 기능을 제공)사전 렌더링 이해하기브라우저의 요청에 사전에 렌더링이 완료왼 HTML을 응답하는 렌더링 방식Client Side Rendering의 단점을 효율적으로 해결하는 기술 Client Side Rendering (CSR)React.js 앱의 기본적인 렌더링 방식클라이언트(브라우저)에서 직접 화면을 렌..