프론트엔드 렌더링 방식으로 CSR과 SSR은 많이 들어보고 접해봤지만,나머지 ISG과 SSG는 아직 잘 몰라서 글을 작성하면서 정리해보려고 한다 !🍑 CSR (클라이언트 사이드 렌더링) 클라이언트 사이드 렌더링(CSR)은 웹 애플리케이션의 동적인 사용자 경험을 제공하는 데 최적화된 방식이다. 이 방식에서는 브라우저가 HTML을 받은 후에 JavaScript를 통해 콘텐츠를 동적으로 생성하고 렌더링한다. 이 과정에서 사용자의 상호작용에 따라 필요한 데이터만을 서버로부터 비동기적으로 불러오게 되며, 이를 통해 사용자 경험을 크게 향상시킬 수 있다. 😇 CSR의 장점1. 높은 사용자 경험 : CSR은 클라이언트 측에서 데이터를 받아와 렌더링하기 때문에 페이지 이동 속도가 빠르고, 사용자 경험이 높다.2...

🔍 서버 사이드 렌더링이란? (SSR)SSR은 Server Side Rendering의 약자로, 화면의 렌더링이 서버에서 이루어지는 아키텍처를 의미한다. 사전적인 의미는 이렇지만, 일반적으로 현대의 SSR은 "첫 HTML 렌더링을 서버에서 처리하고, 이후의 렌더링 사이클은 클라이언트에서 처리" 하는 하이브리드 형태의 SSR을 가리킨다. SSR은 첫 HTML 렌더링을 서버에서 처리하기 때문에, 사용자의 화면에 콘텐츠가 그려지는데 걸리는 시간 (FCP)이 짧다. 🚀 Next.js의 SSR 실행 과정 1️⃣ 접속 요청 - 사용자가 브라우저에서 특정 URL에 접속하면, 브라우저는 서버에 해당 URL에 대한 요청을 보낸다. Next.js는 해당 요청을 감지하고, SSR을 통해 서버에서 페이지를 렌더링할 준비..