front end 배포

Question

지금 배포하는 방식이 csr 배포방식이라고 하셨는데,
ssg 배포와 어떤 차이가 있나요 ?? ssg 배포도 결국 정적 파일로 생성해서 dist 폴더 안에있는 파일들을 s3 에 올려서 배포하는 방식이라고 알고있습니다.

지금 당장 · Answer

안녕하세요. vuejs 에서 ssg 를 사용하려면 nuxtjs 를 프레임워크를 사용해야 합니다. 해당 강의 에서는 vuejs 만 사용하기 때문에 csr 를 설명 드렸습니다. 아래에 프런트엔드 배포 시 CSR(Client-Side Rendering)과 SSG(Static Site Generation)의 차이점 설명 추가하였습니다. 감사합니다.   CSR (Client-Side Rendering) : 동작 방식 : CSR에서는 브라우저가 서버로부터 HTML과 JavaScript를 받아옵니다. JavaScript가 실행되면서 페이지가 브라우저에서 동적으로 생성됩니다. 장점 : 동적인 상호작용에 유리합니다. 페이지 일부를 새로고침 없이 업데이트할 수 있어 사용자 경험이 좋습니다. 서버 부하가 감소합니다. 대부분의 렌더링 작업이 사용자의 브라우저에서 이루어지기 때문입니다. 단점 : 초기 로딩 시간이 길어질 수 있습니다. JavaScript 파일이 크면 클라이언트에서 모두 다운로드해야 하기 때문입니다. 검색 엔진 최적화(SEO)에 불리할 수 있습니다. 초기 HTML에 콘텐츠가 포함되지 않기 때문에 검색 엔진이 콘텐츠를 적절히 크롤링하지 못할 수 있습니다. SSG (Static Site Generation) : 동작 방식 : SSG에서는 빌드 타임에 모든 페이지가 정적 파일로 미리 생성됩니다. 장점 : 빠른 로딩 속도: 정적 파일이기 때문에 서버 응답이 빠르며, 캐싱이 용이합니다. SEO에 유리: 페이지의 콘텐츠가 빌드 시 이미 생성되어 있어 검색 엔진이 콘텐츠를 쉽게 크롤링할 수 있습니다. 단점 : 동적 콘텐츠에 대한 제한: 모든 페이지가 빌드 시 생성되므로 실시간 업데이트나 사용자별 맞춤 콘텐츠 제공이 어려울 수 있습니다. 빌드 시간이 길어질 수 있습니다. 사이트가 커질수록 빌드하는 데 시간이 많이 소요될 수 있습니다. 결론적으로, CSR과 SSG는 각각의 장단점을 가지고 있으며, 프로젝트의 요구 사항과 목표에 따라 적합한 방식을 선택해야 합니다. 동적인 상호작용과 클라이언트 측 기능이 중요한 경우 CSR을, 빠른 로딩 속도와 SEO가 중요한 경우 SSG를 선택하는 것이 일반적입니다.