ayeongjin 님의 블로그

✅ Page Router의 장점1) 파일 시스템 기반의 간편한 페이지 라우팅 제공Next.js에서는 pages/ 폴더 안에 파일을 생성하는 것만으로 자동으로 라우팅이 설정됨별도의 라우팅 설정 없이 파일 기반으로 쉽게 관리 가능2) 다양한 방식의 사전 렌더링 제공서버 사이드 렌더링 (SSR)요청이 들어올 때마다 서버에서 HTML을 생성하여 클라이언트에 전달동적인 데이터를 렌더링하는 데 적합정적 사이트 생성 (SSG)빌드 타임에 미리 HTML을 생성하여 정적 페이지로 제공성능이 뛰어나며 SEO에 유리함증분 정적 재생성 (ISR)SSG 방식에서 일정 시간이 지나면 새로운 페이지를 생성하여 최신 데이터 반영실시간 데이터 갱신이 필요한 경우 활용 가능 ❌ Page Router의 단점1) 페이지별 레이아웃 설정이 ..

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의 동작 방식클라이언트가 페이지를 요청함서버에서 데이터 요청 및 페이지 렌더링을 수행함..