如何为您的电子商务单页应用程序(SPA)选择正确的托管提供商

当您努力运行门店和管理库存时，维护Web服务器可能不是您的主要关注点。 更不用说托管SPA比从服务器上提供静态HTML站点更复杂一点。

幸运的是，电子商务SPA的趋势已经创建了一个全新的市场，运行Web应用程序和静态网站的一体化托管和无服务器后端基础设施平台。 此类平台包括Netliff，Vercel，AWS，Firebase和Layer0 (现为Edgio)。 在这篇文章中，我们看看他们如何比较在适合托管复杂的电子商务水疗。

水疗中心如何工作？

要充分了解SPA为何需要特殊托管处理，您需要了解这些站点是如何生成的，以及该过程中固有的挑战。

在SPA,服务器只返回一个基本的HTML页面，其中有许多JavaScript负责在浏览器中动态更改或操作HTML代码(即DOM)。 但是，出于安全原因，服务器仍参与此过程。 客户端JavaScript代码无法直接连接到数据库，因为这可能会暴露访问凭据等敏感数据—您无法隐藏前端JavaScript代码。

整个UI更新过程在浏览器中进行(通过客户端JavaScript)。 这提供了类似移动应用程序的用户体验，并提高了速度。 更新和更改几乎立即进行，用户不必等待加载新页面。 当然，您的应用仍会不时需要一些数据，因此应用可以显示某种加载动画，直到数据在后台获取(例如通过AJAX )，或使用框架预填充元素，以便页面不会显示为空。

使用JavaScript动态更新整个HTML页面客户端需要大量的JavaScript指令，您通常使用框架(React.js，Angular或Vue.js)或库来处理。 要比较Angular，React和Vue网站的性能，请阅读此博客文章。

单页应用程序与Jamstack的混淆

单页应用程序是一种Web应用程序，它加载单个静态HTML页面，并在用户每次与之交互时动态地将其与新内容水合起来。 由于SPA将静态页面与JavaScript和轻量级API相结合，因此可以将该设置视为Jamstack (名称是JavaScript，API和Markup的混搭)。

Jamstack与SPA的重叠很明显，乍一看有点令人困惑，但也有一些差异。 例如，并非每个SPA都直接从缓存提供内容。 为了提高SEO和性能，许多现代SPA都建立在同构框架(也称为通用JavaScript )上，通过利用服务器端和客户端渲染，帮助它们通过更快的网站速度来提高SERP排名。

由于Jamstack提倡客户端和服务器端代码的分离，它不符合同构(或通用JavaScript )设计—Jamstack鼓励依靠API来增加功能，但不建议对数据的使用和解释提供完全的API控制。 使用Jamstack前置加载API,建议在构建时使用和摄取内容。 如果需要，无服务器功能也可以在运行时提供API。

Jamstack便于生成预渲染的HTML站点，与传统的SPA相比，它提供了一些改进。 在构建过程中，每个页面都构建为静态页面，这些页面易于缓存，因此最终结果是CDN交付您的网站，而不是服务器。 这种方法的主机成本低且速度快，因为SPA必须首先请求显示内容。 支持”静态”Jamstack的流行框架包括Nuxt.js，Next.js，Eleventy和Gatsby，尽管每个框架的作用略有不同。

• Eleventy主要提供预生成的HTML。
• Nuxt/Next/Gatsby等通常会提供静态HTML，加载JavaScript后，它们会将页面转换为SPA。

还有一些托管平台，如Layer0，它们实现了相同的目标，甚至速度更快。 通过应用程序感知CDN，Edgio可以在95%以上的时间边缘缓存动态数据，从而消除交付过程中几乎完全位于CDN上的服务器，就像静态Jamstack站点一样。 这是一个动态的Jamstack。

SPA的主要挑战

水疗中心的普及主要是由于其提供的性能改进。 但SPA网站的设计，即处理所有UI更新和浏览器中的内容呈现，也会导致某些限制。

水疗不是很好的搜索引擎优化

水疗的最大缺点是与SEO相关。 搜索引擎无法理解空HTML容器之外的内容。 一些爬虫程序(如Google)现在据称能够解释JavaScript并等待页面呈现。 尽管如此，自2014年以来，所有关于JavaScript SEO的可靠来源都一直告诉你不要依赖Googlebot来进行JS爬行。 对同步加载的内容进行爬网；不对异步加载的内容进行爬网。

性能

SPA的初始加载时间比静态网站要长，因为浏览器需要先下载一大块JavaScript，然后才能在屏幕上显示任何内容。 必须解析和执行代码，这会对网站的性能产生负面影响。 但是，此代码还包括后续页面的资产，因此，SPA的浏览转换速度极快。

一些JavaScript框架有一种处理SPA性能问题的方法。

• next.js在每个请求时使用服务器端呈现将页面”转换”为服务器上的HTML。 这需要很长时间才能到达第一个字节，但数据始终是最新的。
• next.js使用静态站点生成在每个请求之前将页面预呈现为服务器上的HTML格式。 HTML可由CDN全局缓存并即时提供服务。

理想情况下，您的托管选项应具有解决上述挑战的功能。

单页应用程序，先进的Web应用程序和加速的移动页面可以增强客户体验。 但是，网站速度仍然是一个涉及浏览器，边缘和服务器的全堆栈问题。 需要完整堆栈解决方案来加速任何网站，SPA和静态多页面应用程序。

一个高性能的托管解决方案为您的电子商务水疗应该提供:

一种静态站点生成器，它从输入内容(无论是从CMS还是从内置模板获取)中构建静态HTML页面。

服务器端渲染—对于SPA,服务器端渲染有点麻烦，但一些方案使这一过程更容易(下文将详细介绍)。

如何托管一个典型的电子商务SPA网站
下面我们将详细了解您的SPA的热门托管选项，并讨论它们如何解决SPA网站固有的典型挑战。

1托管巨头:Google云平台，Azure和AWS

Google Cloud Platform，Azure和AWS已成为当今云服务的基石，并提供了非常相似的一系列功能。 正如一些人所说，他们的产品已成为商品—三大提供商中的每一家都包括一个具有POP的CDN，无服务器JavaScript以及一些适合开发人员的好东西，如分支预览和无限回滚。 没有太多的区别。 例如，在AWS上托管站点将需要Amazon S3来存储静态资产，需要Amazon CloudFront来存储CDN,需要AWS Lambda with API Gateway来存储无服务器功能API。

这些服务是新一轮中间提供者建立服务的基础。 像Vercel或Netlify这样的公司基本上通过添加额外功能以标记转售AWS/GCP/Azure服务。

Layer0与同类网站的不同之处在于，该平台是从头开始构建的，旨在为大型，基于API的网站(如电子商务SPA和旅游网站)提供最简单，最可靠和性能最佳的托管服务。

2净重

Netfliy符合Jamstack设置的定义—该公司创造了这句话！ Netlify是一家提供静态Jamstack托管解决方案和无服务器后端服务的云计算公司。 部署过程很简单。 这消除了管理基础设施的麻烦，使开发团队能够专注于编码。

有HTTP/2标准，HTTPS，您的网站通过CDN提供服务。 Netliff具有许多功能和丰富的加载项生态系统(例如，无服务器功能，即时表单，身份，分析等)。 您也可以创建自己的加载项。

Netliff提供可靠的客户支持，并有一个用户社区作为后盾，您可以在出现问题时咨询他们。

面向开发人员的功能

Netlify通过提供一些提高工作效率的解决方案来努力简化开发人员的生活。

Netliff Dev 允许开发人员在单个开发服务器中本地测试站点生成器，API集成，无服务器功能和边缘规则，从而提高工作效率。

Netliff Build 允许开发人员使用Git工作流进行开发，并实现持续部署—每次提交后使用唯一的URL部署更改。

Netliff Edge 是Web应用程序的交付网络。 开发人员可以将其连接到您的开发工作流，使其处理复杂任务或运行一些自定义逻辑。 它在全球各地传播项目的工件，类似于普通的CDN,但以更智能，更快的方式。

Netliff无服务器函数

使用Netliff Serverless函数，您可以编写JavaScript或Go API来执行一些后端任务，并随着需求的增加自动扩展。 虽然您自己设置AWS lambdas可能相当复杂，但Netlify中的无服务器功能相对简单—它们在后台使用AWS Lambda但将其抽象掉，因此无需触摸API网关，IAM角色权限和高级AWS样板。

Netliff自由层

Netliff还提供了一个几乎无限的免费等级，提供了上述许多好处。

3 vercel

Vercel (以前称为Now.sh，Now或Zeit)提供了与Netliff相似的产品，但强烈强调零配置部署，他们称之为传统且完全向后兼容的部署方法。 它可与多个框架(例如Gatsby，Vue，Ember，Svelte)配合使用。 使用构建脚本上载package.json项目后，您将获得开箱即用的完全静态或混合渲染。

Vercel提供了与Netlify类似的体验，在Netlify中，您可以连接Git存储库并获得持续部署的好处—每次提交后使用唯一的URL部署更改。

Vercel无服务器函数

Vercel提供无服务器功能，在机罩下使用AWS Lambda。 由于支持更多语言和地区,Vercel的服务是从Netliff迈出的一步。

此外,Vercel还提供了一个强大的交付网络，可以缓存静态资产之外的无服务器功能响应。

尽管它基于AWS Lambda，但Vercel决定将自定义函数签名用于处理程序，而不是使用AWS格式的Netliff。

4 Layer0 (Edgio)

Layer0 (Edgio)是一个完整的解决方案，用于为SPA网站启用动态Jamstack，使它们可以即时加载并更容易开发。 它结合了先进的优化技术来加速大型数据库驱动的网站(如电子商务SPA)，以及功能强大的工具，只需将代码置于工作流的中心，即可让开发人员每周返回一天。 Edgio从本质上将Jamstack引入大型电子商务网站。

Edgio附带了应用程序感知型CDN-as-JavaScript，它可以扩充甚至替换您当前的CDN，并将您需要的所有Web安全功能带到边缘。 Layer0还附带了一系列以开发为中心的技术，这些技术使开发，部署，预览，试验，监视， 运行您的无头前端Simple，包括自动化的全堆栈预览URL，前端的无服务器JavaScript后端，高级缓存监控等。

Layer0 ❤ 开发人员

Edgio使SPA部署 简单快捷 。

通过将现代SPA电子商务前端与边缘的动态内容缓存命中率为95%的CDN-as-JavaScript和前端的Node.js后端相结合，Edgio帮助复杂网站优化堆栈的速度。 Layer0 (现在的Edgio)是唯一一个能保证大型电子商务网站的中位次第二大内容的(LCP)涂刷次数的平台。

与Netliff和Vercel一样，Layer0 (现在的Edgio)允许开发人员使用Git工作流进行开发，并实现持续部署—每次提交后使用唯一的URL部署更改。

Edgio是您开发，部署，预览，实验，监控， 运行您的SPA电子商务前端，让您：

• 通过预渲染和即时渲染利用Jamstack进行电子商务
• 通过从产品目录API预取数据，实现零延迟网络连接
• 在您的应用中本地配置边缘(CDN-as-JavaScript)
• 在本地和预处理中运行边缘规则
• 从GitHub，GitLab或Bitbucket为每个新分支创建预览URL并推送
• 在边缘运行拆分以进行性能A/B测试，金丝雀部署和个性化
• 无服务器JavaScript比AWS Lambda更简单，更可靠

是什么使Layer0不同于Netlify和Vercel

Netliff和Vercel专注于静态网站。 它们适用于可以是静态的较小站点，而Edgio专门针对较大，动态，频繁变化和更复杂的站点。 这种区别是重要的，特别是如果你正在寻找一个有效的方式来托管您的电子商务SPA网站。

此外，Netliff和Vercel在支持的页面数量方面存在限制，他们的客户通常平均拥有较少的页面。 另一方面，Edgio支持的网站页面数以百万计。

对于由数千页组成的复杂动态网站，在每次构建过程中创建”静态”页面会使构建时间呈指数级增长，并且每次发生轻微数据更改时都需要构建。 预渲染不会影响具有1000个SKU，A/B测试，动态定价，实时库存查找和促销的动态电子商务网站。 无服务器JavaScript可以处理联机，即时，服务器端呈现的内容，这些内容在CDN-as-JavaScript边缘一致缓存。

这正是Edgio展示其优于竞争基础设施产品的主要优势，并将动态Jamstack的原则付诸实践的地方。 CDN即JavaScript服务工作者会在访客点击链接之前智能获取动态页面。 我们的网络和监控工具可确保动态数据至少在95%的时间内进行缓存，从而保护您的数据库不受预取创建的额外请求的影响。

Edgio开发和部署流程将开发人员置于流程的中心，为他们提供了所有控制，同时简化了维护流程。