전자 상거래 단일 페이지 응용 프로그램 (SPA)에 적합한 호스팅 공급자를 선택하는 방법

상점을 운영하고 주식을 관리하는 데 어려움을 겪을 때 웹 서버를 유지하는 것이 주요 초점이 아닐 수 있습니다. SPA 호스팅은 서버에서 정적 HTML 사이트를 제공하는 것보다 조금 더 복잡합니다.

다행히도 전자 상거래 스파에 대한 추세는 웹 애플리케이션과 정적 웹 사이트를 실행하는 올인원 호스팅 및 서버리스 백엔드 인프라 플랫폼의 완전히 새로운 시장을 창출했습니다. 이러한 플랫폼에는 Netlify, Vercel, AWS, Firebase 및 Layer0(현재 Edgio)이 포함됩니다. 이 게시물에서는 복잡한 전자 상거래 스파를 호스팅하기위한 적합성 측면에서 비교하는 방법을 살펴 봅니다.

스파는 어떻게 작동합니까?

스파가 특별한 호스팅 처리를 필요로하는 이유를 완전히 이해하려면 이러한 사이트가 생성되는 방법과 프로세스의 고유 한 문제를 알아야합니다.

SPA에서 서버는 브라우저의 HTML 코드(즉, DOM)를 동적으로 변경하거나 조작하는 많은 JavaScript를 가진 하나의 기본 HTML 페이지만을 반환합니다. 그러나 서버는 보안상의 이유로 여전히 프로세스에 관여합니다. 클라이언트측 JavaScript 코드는 데이터베이스에 직접 연결할 수 없습니다. 액세스 자격 증명과 같은 중요한 데이터가 노출될 수 있기 때문입니다. 프런트엔드 JavaScript 코드를 숨길 수는 없습니다.

전체 UI 업데이트 프로세스는 브라우저에서 수행됩니다(클라이언트측 JavaScript를 통해). 이를 통해 모바일 앱과 유사한 사용자 환경을 제공하고 속도를 개선할 수 있습니다. 업데이트 및 변경 사항은 거의 즉시 발생하며 사용자는 새 페이지가 로드될 때까지 기다릴 필요가 없습니다. 물론 앱은 때때로 일부 데이터를 필요로 하므로 앱은 데이터를 백그라운드에서 가져올 때까지(예: AJAX를 통해) 일종의 로딩 애니메이션을 표시하거나, 페이지가 비어 있지 않도록 해골로 요소를 미리 채울 수 있습니다.

JavaScript를 사용하여 클라이언트 쪽 HTML 페이지 전체를 동적으로 업데이트하려면 많은 JavaScript 명령어가 필요하며, 일반적으로 프레임워크(React.js, Angular 또는 Vue.js) 또는 라이브러리를 사용하여 처리합니다. Angular, React 및 Vue 웹 사이트의 성능을 비교하려면 이 블로그 게시물을 읽어보십시오.

단일 페이지 응용 프로그램과 Jamstack의 혼동

단일 페이지 응용 프로그램은 단일 정적 HTML 페이지를 로드하고 사용자가 상호 작용할 때마다 새 콘텐츠로 동적으로 하이드레이션하는 웹 응용 프로그램입니다. SPA는 정적 페이지를 JavaScript 및 Lightweight API와 결합하기 때문에 Jamstack으로 간주할 수 있습니다(이름은 JavaScript, API 및 Markup의 매시업입니다).

Jamstack과 SPA의 중복은 중요하고 언뜻 보면 약간 혼란스럽지만 몇 가지 차이점이 있습니다. 예를 들어, 모든 SPA가 캐시에서 직접 컨텐츠를 제공하는 것은 아닙니다. SEO 및 성능을 향상시키기 위해 많은 최신 SPA는 Isomorphic 프레임 워크(범용 JavaScript라고도 함)를 기반으로 구축되어 서버 측 렌더링과 클라이언트 측 렌더링을 모두 활용하여 보다 빠른 사이트 속도를 통해 SERP 순위를 향상시킬 수 있습니다.

Jamstack은 클라이언트와 서버측 코드의 분리를 촉진하기 때문에 Isomorphic(또는 Universal JavaScript) 설계와 일치하지 않습니다. Jamstack은 추가 기능을 위해 API에 의존할 것을 권장하지만, 데이터 소비 및 해석 방법에 대한 완전한 API 제어 기능을 제공하는 것은 권장하지 않습니다. Jamstack 프론트 로딩 API를 사용하면 빌드 시 소비와 콘텐츠 수집을 권장합니다. 필요성이 생기면 서버리스 함수도 런타임에 API를 사용할 수 있도록 할 수 있습니다.

Jamstack은 미리 렌더링된 HTML 사이트를 쉽게 생성할 수 있으며, 이는 클래식 스파에 비해 몇 가지 향상된 기능을 제공합니다. 모든 페이지는 빌드 과정에서 정적 페이지로 구축되며 이러한 페이지는 쉽게 캐싱할 수 있으므로 CDN은 서버가 아닌 웹 사이트를 전송합니다. 이 방식은 호스팅 비용이 저렴하고 속도가 빠릅니다. SPA가 먼저 컨텐츠 표시를 요청해야 하기 때문입니다. “정적” 잼스택을 촉진하는 인기있는 프레임워크에는 Nuxt.js, Next.js, Eleventy 및 Gatsby가 포함되지만 각각은 약간 다릅니다.

• Eleventy는 주로 사전 생성된 HTML을 제공합니다.
• Nuxt/Next/Gatsby와 다른 사람들은 일반적으로 정적 HTML을 제공하며, JavaScript가 로드되면 페이지를 SPA로 변환합니다.

같은 목표와 더 나은 속도를 달성하는 Layer0와 같은 호스팅 플랫폼도 있습니다. 애플리케이션 인식 CDN을 통해 Edgio는 동적 데이터를 엣지에서 95% 이상 캐싱할 수 있으므로 정적 Jamstack 사이트의 경우와 마찬가지로 CDN에만 있는 전송 프로세스에서 서버를 제거할 수 있습니다. 동적 Jamstack입니다.

스파의 주요 과제

스파는 주로 그들이 제공하는 성능 향상으로 인기를 얻고 있습니다. 그러나 SPA 웹 사이트의 디자인, 즉 모든 UI 업데이트와 브라우저에서 콘텐츠 렌더링을 처리하는 것 또한 특정 제한 사항으로 이어집니다.

스파는 SEO에 좋지 않습니다.

스파의 가장 큰 단점은 SEO와 관련이 있습니다. 검색 엔진은 빈 HTML 컨테이너 이외의 콘텐츠를 이해하지 못합니다. 일부 크롤러 (Google과 같은)는 현재 JavaScript를 해석하고 페이지가 렌더링 될 때까지 기다릴 수 있다고 주장합니다. 그럼에도 불구하고 2014 년 이후 자바 스크립트 SEO의 모든 신뢰할 수있는 소스는 JS 크롤링에 대한 Googlebot에 의존하지 말라고 계속 말합니다. 동기적으로 로드되는 콘텐츠는 크롤링되고 비동기적으로 로드되는 콘텐츠는 크롤링되지 않습니다.

성능

화면에 렌더링되기 전에 브라우저에서 JavaScript의 큰 부분을 다운로드해야 하기 때문에 SPA의 초기 로드는 정적 사이트보다 시간이 오래 걸립니다. 코드를 구문 분석하고 실행해야 하며, 웹 사이트의 성능에 부정적인 영향을 미칩니다. 그러나 이 코드에는 후속 페이지에 대한 자산도 포함되어 있으므로 스파의 검색 전환이 번개처럼 빠릅니다.

일부 JavaScript 프레임워크는 SPA의 성능 문제를 처리하는 방법을 가지고 있습니다.

• next.js는 서버측 렌더링을 사용하여 모든 요청에서 페이지를 서버에서 HTML로 “변환”합니다. 이 작업은 첫 번째 바이트까지 오랜 시간이 걸리지만 데이터는 항상 최신 상태입니다.
• next.js는 정적 사이트 생성을 사용하여 각 요청 전에 페이지를 서버의 HTML로 미리 렌더링합니다. HTML은 CDN에 의해 전역적으로 캐시되고 즉시 서비스될 수 있습니다.

이상적으로, 호스팅 옵션에는 위의 문제를 해결하는 기능이 있어야합니다.

단일 페이지 애플리케이션, 점진적인 웹 애플리케이션 및 가속화된 모바일 페이지는 고객 경험을 향상시킬 수 있습니다. 그러나 웹 사이트 속도는 브라우저, 에지 및 서버와 관련된 전체 스택 문제로 남아 있습니다. 모든 웹 사이트, SPA 및 정적 다중 페이지 애플리케이션의 속도를 높이려면 풀 스택 솔루션이 필요합니다.

전자 상거래 SPA를위한 고성능의 호스팅 솔루션은 다음을 제공해야합니다.

CMS 또는 기본 제공 템플릿에서 가져온 정적 HTML 페이지를 입력 콘텐츠로 작성하는 정적 사이트 생성기입니다.

서버 쪽 렌더링 – SPA의 경우 서버 쪽 렌더링은 약간 번거롭지만 일부 이니셔티브는 프로세스를 좀 더 쉽게 만듭니다(아래에서 자세히 설명).

일반적인 전자 상거래 SPA 웹 사이트 호스팅 방법
아래에서 SPA에 대한 인기있는 호스팅 옵션을 자세히 살펴보고 SPA 웹 사이트에 내재된 일반적인 문제를 해결하는 방법에 대해 논의합니다.

1. 호스팅 거인 : Google 클라우드 플랫폼, Azure 및 AWS

Google Cloud Platform, Azure 및 AWS는 오늘날 클라우드 서비스의 빵이자 버터가되었으며 매우 유사한 기능 라인업을 제공합니다. 그들의 제품은 일부가 적절하게 말했듯이 일상화되었습니다. 빅 3 제공 업체 각각은 전세계 POP가 포함 된 CDN, 서버리스 JavaScript 및 브랜치 미리보기 및 무제한 롤백과 같은 개발자를 위한 일부 제품을 포함합니다. 차이가 별로 없습니다. 예를 들어, AWS에서 사이트를 호스팅하려면 정적 자산의 저장을 위해 Amazon S3, CDN을 위한 Amazon CloudFront, 서버리스 함수 API를 위한 API 게이트웨이가 포함된 AWS Lambda가 필요합니다.

이러한 서비스는 중급 공급자의 새로운 물결이 서비스를 구축하는 토대입니다. Vercel 또는 Netlify와 같은 회사는 기본적으로 추가 기능을 추가하여 마크업과 함께 AWS/GCP/Azure 서비스를 재판매하고 있습니다.

Layer0이 무리와 다른 점은 플랫폼이 전자 상거래 스파 및 여행 웹 사이트와 같은 대규모 API 기반 웹 사이트에 가장 쉽고 안정적이며 최고의 성능을 제공하는 호스팅을 제공하기 위해 처음부터 구축되었다는 것입니다.

2. Netlify

Netflify는 Jamstack 설정의 정의에 부합합니다. 이 회사는 이 문구를 만들어 냈습니다! Netlify는 정적 Jamstack 호스팅 솔루션 및 서버리스 백엔드 서비스를 제공하는 클라우드 컴퓨팅 회사입니다. 배포 프로세스는 간단합니다. 따라서 인프라 관리의 번거로움이 없어지므로 개발 팀이 코딩에 집중할 수 있습니다.

HTTP/2 표준인 HTTPS가 있으며, 귀사의 웹사이트는 CDN을 통해 제공됩니다. Netlify는 많은 기능과 풍부한 애드온 생태계(예: 서버리스 기능, 인스턴트 양식, ID, 분석 등)를 보유하고 있습니다. 자신만의 추가 기능을 만들 수도 있습니다.

Netlify는 견고한 고객 지원을 제공하며 문제 발생 시 상담할 수 있는 사용자 커뮤니티의 지원을 받습니다.

개발자 대상 기능

Netlify는 생산성 향상 솔루션을 제공하여 개발자의 삶을 단순화하기 위해 노력합니다.

Netlify Dev는 개발자가 단일 개발 서버에서 사이트 생성기, API 통합, 서버리스 함수 및 에지 규칙을 로컬로 테스트할 수 있도록 하여 생산성을 향상시킵니다.

Netlify Build를 사용하면 개발자는 Git 워크플로우를 개발에 사용할 수 있으며, 커밋할 때마다 고유한 URL을 사용하여 변경 사항을 배포할 수 있습니다.

Netlify Edge 는 웹 애플리케이션을 위한 전송 네트워크입니다. 개발자는 개발 워크플로에 연결하여 복잡한 작업을 처리하거나 일부 사용자 지정 논리를 실행하도록 할 수 있습니다. 일반 CDN과 유사하지만 더 스마트하고 빠른 방식으로 프로젝트의 아티팩트를 전 세계 여러 지역에 전파합니다.

Netlify 서버리스 함수

Netlify Serverless Functions를 사용하면 JavaScript 또는 Go API를 작성하여 일부 백엔드 작업을 수행하고 수요가 증가함에 따라 자동으로 확장할 수 있습니다. AWS 람다를 직접 설정하는 것은 상당히 복잡할 수 있지만 Netlify의 서버리스 함수는 상대적으로 간단합니다. AWS 람다를 백그라운드에서 사용하지만 추상화하여 API 게이트웨이, IAM 역할 권한 및 고급 AWS 상용판에 직접 연결할 필요가 없습니다.

Netlify 무료 등급

또한 Netlify는 위에서 언급한 많은 혜택을 제공하는 사실상 무제한 무료 계층을 제공합니다.

3. 베르셀

Vercel(이전의 Now.sh, Now 또는 Zeit)은 Netlify와 유사한 서비스를 제공하지만, 제로 구성 배포를 강력하게 강조합니다. 이 배포는 기존의 완전 역호환 방식이라고 합니다. 여러 프레임워크(예: Gatsby, Vue, Ember, Svelte)에서 작동합니다. 빌드 스크립트를 사용하여 package.json 프로젝트를 업로드하면 완전히 정적 또는 하이브리드 렌더링을 즉시 사용할 수 있습니다.

Vercel은 Netlify와 비슷한 경험을 제공합니다. Netlify에서는 Git 저장소를 연결하여 지속적인 배포의 이점을 누릴 수 있습니다. 커밋할 때마다 고유한 URL을 사용하여 변경 사항을 배포합니다.

Vercel 서버 없는 함수

Vercel은 후드 아래에서 AWS Lambda를 활용하는 서버리스 기능을 제공합니다. 더 많은 언어와 지역이 지원됨에 따라 Vercel의 제품은 Netlify에서 한 단계 더 발전했습니다.

Vercel은 또한 정적 자산과는 별도로 서버리스 기능 응답을 캐싱할 수 있는 강력한 전송 네트워크를 제공합니다.

AWS Lambda를 기반으로 하지만 Vercel은 AWS 형식을 사용하는 Netlify와 달리 핸들러에 사용자 지정 함수 시그니처를 사용하기로 결정했습니다.

4. 레이어 0 (에드지오)

Layer0 (Edgio)는 SPA 웹 사이트에 대한 동적 Jamstack을 활성화하기위한 완벽한 솔루션으로 즉각적인 로딩과 개발이 용이합니다. 고급 최적화 기법을 결합하여 전자 상거래 스파와 같은 대규모 데이터베이스 기반 웹 사이트의 속도를 높이고 코드를 워크플로의 중심에 두기만 하면 개발자가 일주일에 하루를 되돌릴 수 있는 강력한 도구를 제공합니다. Edgio는 Jamstack을 대규모 이커머스 웹사이트에 도입했습니다.

Edgio에는 애플리케이션 인식 CDN-as-JavaScript가 함께 제공되므로 기존 CDN을 보완하거나 대체할 수 있으며 엣지에 필요한 모든 웹 보안 기능을 제공할 수 있습니다. Layer0에는 개발, 배포, 미리보기, 실험, 모니터링, 자동화된 전체 스택 미리 보기 URL, 프런트엔드를 위한 서버리스 JavaScript 백엔드, 고급 캐시 모니터링 등을 포함하여 헤드리스 프런트엔드를 간단하게 실행할 수 있습니다.

Layer0 ❤ 개발자

Edgio는 SPA를 즉각적이고 간단하게 구축할 수 있도록 합니다 .

Edgio는 최신 SPA eCommerce 프런트엔드와 엣지의 동적 콘텐츠에 대해 95%의 캐시 적중률을 가진 CDN-as-JavaScript와 Node.js 백엔드를 결합하여 복잡한 웹사이트가 스택에서 속도를 최적화하도록 지원합니다. Layer0(현재 Edgio)은 대규모 이커머스 웹사이트에 대한 중간 규모 LCP(Content Paint) 시간을 보장하는 유일한 플랫폼입니다.

Netlify 및 Vercel과 마찬가지로 Layer0(현재 Edgio)은 개발자가 Git 워크플로우를 개발에 사용할 수 있도록 하며, 커밋이 끝날 때마다 고유한 URL을 사용하여 변경 사항을 배포할 수 있도록 합니다.

Edgio는 개발, 배포, 미리보기, 실험, 모니터링, SPA eCommerce 프런트엔드를 실행하여 다음을 수행할 수 있습니다.

• 사전 렌더링과 Just-in-Time 렌더링을 통해 전자 상거래용 Jamstack 활용
• 제품 카탈로그 API에서 데이터를 프리페치하여 지연 시간이 없는 네트워킹 지원
• 앱에서 기본적으로 엣지 구성(CDN-as-JavaScript)
• 에지 규칙을 로컬로 실행 및 사전 프로덕션에서 실행
• GitHub, GitLab 또는 Bitbucket에서 모든 새 브랜치와 푸시로 미리보기 URL을 만듭니다.
• 성능 A/B 테스트, 카나리 배포 및 개인화를 위해 엣지에서 분할 실행
• AWS Lambda보다 훨씬 쉽고 안정적인 서버리스 JavaScript

Layer0이 Netlify 및 Vercel과 다른 점은 무엇입니까?

Netlify와 Vercel은 정적 웹 사이트에 중점을 둡니다. 정적일 수 있는 소규모 사이트에 적합하지만 Edgio는 크고 동적이며 자주 변경되고 복잡한 사이트에 특히 적합합니다. 이 구별은 특히 전자 상거래 SPA 웹 사이트를 호스팅하는 효율적인 방법을 찾고 있다면 중요합니다.

게다가 Netlify와 Vercel은 지원할 수 있는 페이지 수에 제한이 있으며 클라이언트는 일반적으로 페이지 수가 적습니다. 반면에 Edgio는 수백만 페이지의 사이트를 지원합니다.

수천 페이지로 구성된 복잡한 동적 웹 사이트의 경우 빌드 중에 “정적” 페이지를 만들면 빌드 시간이 기하급수적으로 증가하고 데이터가 조금만 변경될 때마다 빌드가 필요합니다. 1000개의 SKU, A/B 테스트, 동적 가격 책정, 실시간 재고 조회 및 프로모션을 갖춘 동적 이커머스 웹 사이트에서는 사전 렌더링이 부족합니다. 서버리스 JavaScript는 CDN-as-JavaScript의 엣지에서 캐시된 인라인, 즉각적인 서버 측 렌더링 콘텐츠를 일관되게 처리할 수 있습니다.

바로 이 부분에서 Edgio는 경쟁력 있는 인프라 제품에 비해 주된 이점을 보여주고 동적 Jamstack의 원칙을 적용합니다. CDN(CDN-as-JavaScript) 서비스 작업자는 방문자가 링크를 누르기 전에 동적 페이지를 지능적으로 가져옵니다. Akamai의 네트워크 및 모니터링 도구는 동적 데이터가 최소 95%의 시간 동안 캐시되도록 하여 사전 반입을 통해 생성되는 추가 요청으로부터 데이터베이스를 보호합니다.

Edgio 개발 및 배포 프로세스는 개발자가 프로세스의 중심에 위치하여 모든 제어 기능을 제공하는 동시에 유지 관리 프로세스를 단순화합니다.