💡 CSR (Client-Side Rendering)
CSR은 웹 페이지의 렌더링을 클라이언트(브라우저)에서 처리하는 방식이다.
첫 로딩 때 서버로부터 HTML, JavaScript 등 필요한 파일을 다 받아오고, 이후에는 JavaScript가 동적으로 페이지의 내용을 변경한다.
예를 들어, React 같은 SPA(Single Page Application) 프레임워크가 이 방식을 많이 사용한다.
🟢 장점: 페이지 간 전환 시 서버에 요청하지 않아서 빠른 사용자 경험 제공 가능.
🔴 단점: 초기 로딩이 느리고, 검색 엔진 최적화(SEO)가 어렵다.
💡 SSR (Server-Side Rendering)
SSR은 각 페이지 요청마다 서버에서 HTML을 생성해서 클라이언트에 보내는 방식이다.
사용자가 페이지를 요청할 때마다 서버에서 새로운 페이지를 생성해서 전달한다. 즉, 페이지가 완전히 새로고침되는 것이다.
🟢 장점: 초기 로딩 속도가 빠르고, 검색 엔진 최적화에 유리하다.
🔴 단점: 페이지를 이동할 때마다 서버에 부담이 가고, 페이지 로딩이 느릴 수 있다.
💡 SSG (Static Site Generation)
SSG는 빌드 시점에 모든 페이지를 정적 파일로 미리 생성하는 방식이다.
빌드할 때 서버에서 필요한 모든 페이지를 HTML로 만들어서 배포한다. 그래서 사용자가 페이지를 요청하면 이미 생성된 정적 파일을 바로 제공한다.
예를 들면, Next.js에서 getStaticProps 같은 함수를 이용해 구현할 수 있다.
🟢 장점: 서버 부담이 적고, 로딩 속도가 매우 빠르다. SEO에도 좋다.
🔴 단점: 빌드 시간이 길어질 수 있고, 실시간으로 변경되는 데이터를 다루기 어렵다.
