💫 SSG(Static Site Generation)
✨ SSG의 특징
- 서버에서 정적인 HTML을 미리 생성
- SSR과 비교하여, SSG는 미리 다 만들어둔 후 요청 시에 해당 페이지를 응답하기 때문에 필요한 페이지를 미리 준비해뒀다가 요청을 받으면 완성된 파일을 단순히 반환
✨ SSG의 장점
- 페이지 로딩 시간이 빠름
- 이미 빌드할 때부터 페이지가 모두 렌더링되어 있으므로, 빠르게 페이지를 로딩할 수 있음
- JavaScript를 필요로 하지 않음
- SEO에 유리함
- 보안이 뛰어남
- CDN 캐시 가능
✨ SSG의 단점
- 정적인 내용
- 이미 완제품이므로 사용자가 여러 요청을 하더라도 서버에 미리 준비된 페이지들을 가져가는 것 외에는 할 수 없음
- 실시간 데이터가 아님
- 사용자별 정보 제공의 어려움
💫 SSR(Sever Side Rendering)
✨ SSR의 특징
- 렌더링 주체가 서버
- 즉, HTML을 생성하여 응답해 줌
- 새로운 요청이 있을 때마다 렌더링
✨ SSR의 장점
- 페이지 로딩 시간이 빠름
- 클라이언트에서 요청한 페이지의 HTML을 다운로드 하기 때문에 초기 진입시 로딩이 빠름
- JavaScript를 필요로 하지 않음
- SEO에 좋음
- 크롤러는 페이지를 인덱싱하기 위해 페이지에 관한 많은 정보가 필요한데, SSR을 활용하여 미리 페이지를 빌드하면 크롤러에게 많은 정보를 줄 수 있음
- 보안이 뛰어남
- 실시간 데이터를 보여줌
- 사용자별 필요한 데이터를 사용
✨ SSR의 단점
- 요청마다 HTML을 생성하기 때문에 SSG 또는 ISR에 비해 느림
- CSR과 비교하여 빠르지만, 중복되는 내용도 다시 렌더링하여 받아야 하기 때문에 초기진입은 느린 편에 속함
- 너무 많은 요청으로 인해 서버 과부화의 위험이 있음
- SSR은 서버 측에서 처리해야 하는 렌더링 로직 때문에 반드시 응답을 처리해줄 서버가 필요. 트래픽이 많이 몰릴 경우 응답이 느려지거나, 메모리가 한도를 초과해 서버가 동작을 멈출 수 있음.
- CDN 캐시가 이루어지지 않음
- 매 요청마다 콘텐츠를 읽어와 HTML에 포함하여 렌더링하기 때문에 cache를 하지 않음
- 페이지 이동할 때마다 화면이 깜박임
- 새로운 HTML을 받아오기 때문에 요청시마다 새로고침 되어 깜박임이 생김
💫 CSR(Client Side Rendering)
✨ CSR의 특징
- 렌더링 하는 주체가 클라이언트(브라우저)
- HTML, CSS, JavaScript 등을 서버로부터 받아서 클라이언트 측에서 DOM 요소를 조작하여 내용을 출력
- 초반에 모두 다운로드 후 이후 새로운 페이지 요청에 데이터만 갱신하여 해결
✨ CSR의 장점
- 한 번 로딩되면 빠른 UX 제공
- 부분적으로 필요한 내용만 불러와 업데이트를 하기 때문에 마치 앱을 사용하는 것과 같은 경험을 제공해 줌
- 서버의 부하가 적음
- 부분적으로 데이터를 불러와서 UI를 업데이트하기 때문에, 상대적으로 서버의 부하가 적음
✨ CSR의 단점
- 페이지 로딩 시간이 김
- 첫 로드 시서버로부터 필요한 자원을 응답받은 후, 렌더링을 하기 때문에 서버로부터 응답시간이 지연되면 초기 구동 속도가 느려짐
- JavaScript 활성화 필수
- 사용자가 JavaScript 사용 옵션을 비활성화한다면, React.js로 작성된 SPA는 정상적으로 동작하지 않음
- SEO에 취약
- 초기에 빈 HTML 파일만 받아서 사용하기 때문에 크롤러(검색봇)들이 어떤 내용이 있는지 확인하기 어려움
- 페이지마다 meta 태그 등에 정보를 따로 설정할 수 없음
- 최근 검색엔진은 SPA도 검색엔진에 색인이 되게끔 처리해주는 곳도 있긴 함
- 보안에 취약
- 클라이언트에 모든 코드를 내려받아 실행하기 때문에, 중요한 로직 및 key값이 노출될 수 있음 - CDN 캐시가 안 됨
- SPA는 클라이언트 측에서 렌더링이 시시각각 변화하기 때문에 이러한 부분이 캐싱되지 않음
- 즉, 동적으로 생성되는 콘텐츠는 캐싱이 이루어지지 않음
상위 노출이 필요하고 누구에게나 항상 같은 내용을 보여주는 동시에 업데이트가 거의 필요하지 않다면 => SSG
상위 노출이 필요하고 누구에게나 항상 같은 내용을 보여주는 동시에 자주 업데이트 되어야 한다면 => SSR
유저와 상호작용이 많으며 고객의 개인정보를 기준으로 이루어지는 서비스, 즉 상위 노출보다 고객의 데이터를 보호하는 것이 더 중요하다면 => CSR
참고 자료
10개의 댓글
각 렌더링 방식들의 특징, 장점, 단점을 깔끔하게 적어주셔서 아티클을 한번 읽고 나니 렌더링들의 차이점을 명확하게 알 수 있는것 같아요! 특히 특징을 따로 뺴서 적어주셔서 렌더링의 핵심을 잘 알고 갈수 있는것 같네요!! 마지막으로 각 렌더링이 주로 사용되는 경우도 적어주셔서 화룡점정입니다~~!! 깔끔하게 잘 정리된 아티클 잘 읽고갑니다 수고하셨습니다!
SSG, SSR, CSR의 특징들과 장단점을 보기 쉽게 나열해주셔서 쉽게 이해할 수 있었어요! 각 렌더링 방식 모두 장단점이 존재하니 어떤 방식을 채택할지 상황에 따라 신중하게 판단하고 결정해야겠다는 생각이 드네요. 유용한 아티클 감사합니다!!
SSG, SSR, CSR 각각의 주요 특징과 장/단점을 이미지 자료와 함께 정리해주셔서 이해하는데 더욱 수월했습니다. 특히, 마지막에 CSR, SSR, SSG의 렌더링 방식을 한눈에 이해할 수 있는 이미지 자료는 정말 좋았습니다. 어떤 상황에서 사용하면 좋은지 한줄 요약까지 감사합니다. 아티클 작성하느라 수고하셨어요~
엇 우선 커버 사진 굉장히 시선강탈이었네욤ㅎㅎ
정적으로 생성하는 SSG, 서버가 렌더링해주는 SSR, 브라우저가 랜더링하는 CSR의 성질들과 장점과 단점을 깔끔하고 세세하게 정리해주셔서 이해가 아주 잘 되었습니다. 각각에 맞는 설명 사진까지 있어서 화룡점정!!(규씨따라하기 ㅋㅋ) 이었습니다. 각 장단점을 프로그래머 입장에서 알기 쉽고, 적용하기 쉽게 설명해주셔서 나중에 이대로 적용할 수 있을 것 같아서 좋았습니다!! 마지막에 한줄 정리까지 정성스러운 아티클 감사합니다!!
SSG, SSR, CSR의 특징과 장단점을 명확하게 비교해줘서 각 방식의 차이점을 이해하는 데 큰 도움이 되었어요!!
특히, 각 기술을 사용할 때 고려해야 할 점들을 명확하게 제시해주어, 어떤 프로젝트에 어떤 기술을 적용해야 할지 결정하는 데 큰 도움이 되었습니다!! 좋은 아티클 감사합니다!
각 방식에 대한 장단점 및 특징을 설명해주신 덕분에 자세히 이해하고 갑니다~ 이미지도 첨부해주셔서 더 수월하게 이해할 수 있었어요!
설명 후에 마지막으로 서비스 특징에 따라 정리해주셔서 특징에 대해 다시한번 이해할 수 있었습니다.
좋은 글 감사합니다!
렌더링 과정을 그림으로 표현한 것도 같이 첨부해주셔서 과정을 더욱 자세히 이해할 수 있었던 것 같습니다 !특히 SSG는 다른 아티클들을 읽으며 조금씩 익혀가고 있었는데, CDN에 캐쉬한다는 내용은 정말 몰랐던 내용이라 너무 좋았습니다. 유용한 아티클 작성해주셔서 감사합니다, 고생하셨어요!
렌더링 방식들의 특징, 장점, 단점이 분류되어있어 가시적으로 술술 읽히는 좋은 아티클이었습니다. 적절한 참조 이미지들이 있어서 이해하기 더더욱 수월했습니다. 해당 특징들에 대한 부가적인 설명도 정말 잘 적혀있네요! 좋은 아티클 항상 감사합니다 :) 수고하셨어용 !!
각 렌더링 방식들의 장단점과 특징, 그리고 적절한 이미지들이 추가되어 있어 술술 읽히네요! 그리고 각 렌더링 방식에 대하여 보안과 관련된 특징, CDN 방식의 캐시 기능에 대해서도 언급하셔서 추가적인 정보를 알 수 있었습니다.
마지막에 각 렌더링 방식을 어떤 상황에서 활용하면 좋은지에 대해서도 요약해주셔서 머리속에서 잘 정리되는것 같네요. 바쁜 주간에 아티클 작성하시느라 고생하셨습니다~~!