React 에서의 데이터 Fetching react 에서는 useEffect 를 사용 하여 데이터를 fetching 을 하게 된다. 이로서 컴포넌트가 렌더릴 될 때 나 데이터가 변경 되었을 때 데이터를 불러올 수 있다. 하지만 화면이 렌더링 된 후 데이터를 불러오기 시작한다. 빈화면이 보이고, 자바스크립트실행 해서 이제 드디여 화면이 보였는데 또다시 데이터 fetching 하는 시간 까지 기다려야 한다. Next.js 에서의 데이터 fetching SSR (Server Side Rendering) Next.js 에서는 사전렌더링 과정중에 데이터 fetching 까지 수행 하여서 진행 하기 때문에 React 의 느린 FCP 를 좀더 빠르게 진행할 수 있다. 컴포넌트 상단에 getSeverSideP..

react 렌더링 방식 : CSR ( Client Side Rendering ) 1) 접속요청 2) index.html 빈껍데기를 브라우저에 전달한다. 3) 빈화면을 유저에게 먼저 렌더링 4) 후속으로 서버에서 JavaScript 번들을 전달한다. 5) 브라우저에서 JavaScript 를 실행 한 후 6) 컨텐츠를 렌더링 한다 ---------------------------------- 여기까지 걸리는 시간을 FCP : First Content for Paint 라고 한다. 7) 초기접속 이후 페이지 이동 시 8) 브라우저에서 JavaScript 를 실행 해서 ( 4번에서 서버에서 JS 번들을 모두 전달 받았다 ) 9) 컨텐츠를 렌더링 한다. 장점 1. 페이지 이동이 매우 빠르고 쾌적하다 단점 ..

SSR 방식과 SSG 방식 사용법SSR : Server Side RenderingSSG : Static Site Generation 사용방법 컴포넌트 페이지에 getServerSideProps 함수를 사용사여 데이터를 전달하면 SSR 방식으로 작동 getStaticProps 함수를 사용하여 데이터를 전달하면 SSG 방식으로 작동 getStaticProps + fallback 옵션으로 사용시에는 아래와 같이 작동한다. 🔁 fallback 옵션 정리 (ISR과 함께 쓰이는 핵심 옵션)✅ 사용 맥락getStaticPaths를 사용하는 **동적 라우팅(static generation)**에서어떤 경로를 빌..