SSG란?
Static Site Generation
CSR의 단점들을 보완하기 위해 코딩할 때는 편하게 하지만
배포할 때는 옛날처럼 정적으로 배포하고자 나온것이 SSG이다.
SSG는 렌더링하는 주체자가 서버이고 어플리케이션이 빌드될때 렌더링한다. (언제 렌더링이 되냐에 따라 ISR, SSR, SSG로 나뉜다.)
서버에 Next.js 어플리케이션을 배포해서 웹애플리케이션을 실행하기 전에 먼저 빌드를한다.
빌드할때 우리가 작성한 소스코드들을 서버에서 실행하면서
리액트 코드를 HTML로 변환한다.
코드에서 서버에 있는 데이터베이스를 읽거나 또는 클라우드에서 데이터를 읽어와서 페이지를 만드는 것도 빌드할 때 실행이된다.
필요한 데이터들을 다 읽어오고 브라우저 상에서 어떻게 표기될건지 태그들을 다 하나씩 만들어서 실제 HTML 파일들을 빌드할 때 만들어 둔다.
따라서 브라우저에서 페이지를 요청하면 서버에서 미리 만들어둔 HTML 파일을 보내준다.
그럼 클라이언트 측에서는 받아온 데이터를 바로 표기만하면 되는 것이다.
SSG의 장점
페이지 로딩 시간 (TTV)이 빠르다
서버에서 만들어둔 HTML파일만 받아서 표기하면 되기 때문에 리액트 라이브러리나 자바스크립트 소스코드들을 클라이언트 측에서 받을 필요가 없기 때문에 페이지 로딩 시간이 빠르다.
자바스크립트가 필요 없음
위의 이유로 자바스크립트를 활성화 하지 않아도 웹 애플리케이션을 사용할 수 있다.
SEO 최적화가 좋음
웹 크롤러가 우리 페이지를 확인할 수 있음
보안이 뛰어나다
불필요하게 소스코드들을 클라이언트 측에 보낼 필요가 없기 때문에 보안에 뛰어나다.
CDN에 캐시가 된다.
HTML파일만 주고 받으면 되기 때문에 CDN에 캐시가 가능하다.
SSG의 단점
데이터가 정적임
빌드할때 렌더링하기 때문에 데이터가 정적이다.
데이터가 가변적으로 변하는 웹사이트에는 적합하지 않음
사용자별 정보 제공이 어려움
사용자별로 장바구니에 담은 데이터가 달른경우 사용자별로 정보를 제공해야하는데 빌드할 때 렌더링하기 때문에 이런 정보를 제공하기가 어렵다.
즉, 사용자들이 모두 같은 내용의 정보만 봐도 괜찮은 웹애플리케이션에는 적합하나 그렇지 않으면 적합하지 않다.
