에지 측 구성의 기초
SSI 및 이후 CSI는 HTML 페이지에 조각들을 배치하기 위해 나왔습니다. 이 중에 UI삽입 부분에 사용하려는 목적이라면 CSI가 더 좋은 방법입니다.
아키텍처
SSI와 차이점은 집계 계층의 사용에 있습니다. CDN에서 각 프레그먼트들을 하나의 정적이고 캐싱된 HTML 문서로 결합합니다. 이렇게 통합한다면 서버리스 함수를 사용하는 것도 가능합니다.
이를 구현할 때 고려할 점은 아래와 같습니다.
•
게이트웨이를 CDN 오퍼링, vanish 또는 Nginx와 같은 좀 더 적절한 에지 층으로 교체합니다.
•
모든 마이크로 프론트엔드에서 뷰를 수정해서 완전히 준비된 URL을 반환합니다.
장단점
에지 측 구성과 서버 측 구성을 살펴볼 필요가 있습니다. 만약 패턴이 올바르게 적용된다면, 훨씬더 가벼워지고, 캐싱같은 작업을 수행할 수 있습니다.
서버 측 구성에서 페이지를 평탄하게 만들어 시간을 줄여야 합니다.
여기에 캐시까지 적용하면 성능을 더 높일 수 있습니다.
SSI와 ESI
ESI는 아래 이유들로 인해서 발명되었습니다.
•
프레임셋은 더 많은 요청이 필요합니다.
•
부모의 기본 스타일등을 사용할 수 없습니다.
•
프레임셋은 일반적으로 웹사이트를 일관성없게 만듭니다.
많은 CDN 공급자들은 ESI를 지원합니다. 현대적 언어를 지원하는 것 외에도 가장 큰 이유는 W3C 사양을 기반으로하기 때문입니다. SSI는 모든 기능을 특정 주석 노드에 구성하지만, ESI는 esi 접두사를 가진 표준 컴포넌트를 사용합니다. 여기서 가장 큰 장점은 조건부 인데, esi:choose나 esi:when으로 작성된 자식 노드를 반복하여 사용할 수 있습니다.
BFF 결합하기
정적 리소스를 더 빨리 가져오기 위해 CDN을 가져오는 것은 확실히 성능으 ㄹ높이기 위한 좋은 방법입니다.