xeunnie

SSG(Static Site Generation)란?🚀 Next.js에서 SSG(Static Site Generation, 정적 사이트 생성)빌드 시점에 HTML을 생성하여, 요청 시 빠르게 제공할 수 있도록 하는 렌더링 방식입니다. 즉, 페이지를 서버에서 미리 렌더링해놓고 정적인 HTML 파일로 저장하여, 사용자가 접속할 때 즉시 제공하는 방식이에요. 이렇게 하면 사용자에게 빠른 로딩 속도를 제공하고, 검색 엔진 최적화(SEO)에도 유리하다는 장점이 있습니다.🥸 SSG는 왜 생겨났을까요?과거에는 동적 콘텐츠를 제공하기 위해 서버사이드 렌더링(SSR)이나 클라이언트사이드 렌더링(CSR) 방식이 주로 사용되었습니다.그러나 이 방식은 페이지 로딩 시간이나 서버 부하 문제 등에서 한계를 드러냈습니다. 특히..

하이드레이션(Hydration) 톺아보기! 🌊웹 개발을 하다 보면 하이드레이션(Hydration)이라는 개념을 마주칠 때가 있을 거예요. 단어부터 어딘가 ‘촉촉’한 느낌이 들지만, 사실 하이드레이션은 서버와 클라이언트가 힘을 합쳐 빠르고 매끄러운 사용자 경험을 제공하기 위한 기술입니다. 오늘은 이 하이드레이션이 무엇인지, 어떻게 작동하는지, 그리고 왜 중요한지를 살펴보면서 웹 개발의 세계로 한 발짝 더 들어가 봅시다!🌟 하이드레이션이란?하이드레이션이란, 서버에서 렌더링된 정적 HTML에 클라이언트에서 JavaScript를 결합해 인터랙티브한 애플리케이션으로 변환하는 과정을 말해요.1. 서버에서 HTML 렌더링서버는 사용자가 요청한 페이지를 HTML 형태로 제공합니다. 이 HTML은 초기 화면을 보여주..

렌더링 방식을 선택할 때 무엇이 중요할까? 🪩웹 애플리케이션을 만들 때, 어디에서 HTML을 생성하고 콘텐츠를 렌더링할지는 매우 중요한 결정이에요. 과거에는 주로 서버에서 모든 작업을 처리하는 SSR 방식이 널리 사용되었어요. 이후엔 사용자 경험이 점점 중요해지면서 클라이언트 측에서 렌더링하는 CSR 방식이 부각되기도 했어요. 최근에는 다양한 요구에 맞춰 최적화된 솔루션으로 SSG와 ISR같은 새로운 렌더링 방식이 인기를 얻고 있기도 해요. 하지만 결국엔 각각에 장단점이 존재하기 때문에 도메인과 프로젝트의 특성과 목표에 따라 적절한 렌더링 방식을 선택하는 것이 점점 더 중요해지고 있어요. 각각이 어떤 렌더링 방식을 가지고 있는지 함께 살펴봅시다! 🚀1. 클라이언트사이드 렌더링 (CSR: Client-..