반응형 next js2 NextJS 데이터 최신화 설정, ISR과 캐싱 전략 NextJS의 데이터 최신화 1. ISR(Incremental Static Regeneration) ISR란? Next.js에서 제공하는 기능으로, 정적 생성과 서버 사이드 렌더링의 장점을 결합한 형태이다. ISR를 사용하면, 정적페이지를 빌드 시점에 미리 생성하고, 배포 후에도 정해진 간격으로 페이지를 업데이트 할 수 있다. 이 방법을 통해 페이지 로드 시간을 줄이고, 동시에 최신 컨텐츠를 유지할 수 있는 방법을 제공한다. ISR의 작동방식? 처음으로 페이지를 빌드할 때, 모든 페이지가 정적 파일로 생성된다. 개별 페이지에 revalidate 속성을 설정하면, 해당 페이지는 정해진 시간 간격마다 재생성될 수 있다. 페이지가 재생성되는 동안, 사용자들은 여전히 이전에 생성된 정적 페이지를 보게되며, 새로.. 2024. 1. 7. Next JS, Client 컴포넌트와 Server 컴포넌트란? Client Components와 Server Components는 리액트 컴포넌트를 서버와 클라이언트 측에서 어떻게 처리하고 렌더링하는지에 대한 새로운 개념이다. 기본 리액트 컴포넌트 기본 리액트 앱에서는 모든 컴포넌트가 클라이언트 측에서 렌더링된다. 즉, 사용자의 브라우저에서 JS를 실행해서 UI를 구성한다는 의미이며, 이 방식은 상호작용이 많은 동적인 웹 애플리케이션에 적합하지만, 초기 로딩 시간이 길거나 SEO(검색 엔진 최적화)에 불리한 점이 있다. 서버 컴포넌트 서버 컴포넌트는 이름 그대로, 서버에서만 렌더링이되고, 최종 HTML 결과만 클라이언트로 전송된다. 즉, 상호작용이 없거나 병경되지 않는 UI를 작성할 때 이상적이라고 할 수 있다. 예를 들어, 데이터를 로드하고 표시하는 컴포넌트가 서.. 2024. 1. 6. 이전 1 다음 반응형