尽管它的所有优点，应用JAMSTACK电子商务网站与大目录和频繁的更新涉及到许多挑战. 如果您在后端平台(如Salesforce Commerce Cloud，Magento或SAP-Hybris)上运行电子商务网站，您可能已经面临其中一些问题。
本文介绍了构建大规模电子商务Jamstack站点的主要挑战以及Layer (现在为Edgio)如何帮助您解决这些问题。
有关Layer0 CTO Ishan Anand在Jamstack Conference 2020上的演讲的完整版本，请访问Layer0官方YouTube频道。
什么是Layer0 (现在是Edgio)？
Layer0将Jamstack的优势引入电子商务，加快网站速度并简化开发工作流。 通过将缓存数据从边缘流式传输到浏览器，Edgio可以在请求之前让网站提前5秒进行浏览。 Sharper Image，Revolve和Shoe Carnival只是利用Layer0 Jamstack平台提高开发人员工作效率并提供次秒级网站的网站的示例。
大规模使用Jamstack进行电子商务有哪些挑战？
在电子商务中使用Jamstack和Headless，尤其是在具有大型目录，频繁更新的网站上，或者在单片电子商务平台上使用，通常与应对以下挑战相关：
- 制造时间长
- 频繁更新
- 棘手的站点迁移
- 动态数据
- 个性化
- A/B测试
- API不完整
- 数据管道体系结构
- API丢失的自定义设置
- 数据库连接限制
- 团队能力
- CMS集成
- CMS内容中嵌入的样式
- BackOffice工作流集成
大规模构建时间摩擦和其他挑战
Jamstack具有内置的高流量可扩展性。 但构建步骤引入了一个新的缩放尺寸，因为典型的静态渲染在构建过程中发生。 当您扩展您的网站或执行更频繁的更改时，您将退出Jamstack快速而灵活的甜蜜点。 其结果是制造时间摩擦。 如果你在一个小网站上工作，很容易在地毯下清除问题，但这不是典型的电子商务网站的情况。
另一个需要记住的重要事项是，站点是由非开发人员和开发人员构建的。 由于内容，营销和营销不断改变事情，构建时间摩擦可能很快成为整个组织的问题。
所有这一切都是说，”规模化”发生的事情比你想象的要多，而且不仅仅限于电子商务。 看看零售商和新闻网站之间的比较。 对于电子商务网站，SKU数量代表页面数量。
电子商务网站与许多产品(SKU)，出版商与许多文章
有很多文章的出版商
虽然您可能认为只有亚马逊这样的网站处理数百万个SKU，但事实并非如此。 汽车零件网站就是一个很好的例子—它们根据年份/型号/制造/车辆搜索标准(YMMV)托管数百万种产品。 例如，TruPar.com仅销售8 M SKU的叉车零件。
值得庆幸的是，一些静态和动态渲染技术有助于处理Jamstack的规模问题。
“静态”技术
- 优化构建时间
- 客户端渲染
- 增量静态(重新)生成
“动态”技术
- 无服务器服务器端呈现+ CDN
- 并行静态渲染
“混合”渲染技术
- 为每类页面选择最佳渲染技术
- 选择允许您根据需要混合技术的框架和平台
在下面的段落中，我们将讨论这些技巧的含义。
静态技术
优化构建时间
有多种方法可以优化动态JavaScript页面的构建时间。
增量构建
使用增量构建，您可以保存构建工件并仅重新生成已更改的内容。 如果只更改了单个页面，则将重新生成该单个页面。
并行构建
该框架将构建拆分为多个进程或线程。 这对图像处理很有帮助。
备用静态站点生成器
本机支持的SSG是一种新兴方法，已发现可以报告更好的构建时间。 例如Hugo (GO)和Nift (C++)。 但是，许多本机编写的静态站点生成器不能很好地与JavaScript密集型网站配合使用。 相对较新的吐司正试图解决这一问题。
需要注意的是，框架和云提供商对并行和增量构建的支持各不相同。 不是所有的人都支持它，而那些确实只提供有限的支持。
访问次数不多的页面可能会产生额外成本
还有潜在的超额费用问题。 如果您有一个拥有成千上万个或更多SKU的大型网站，则您的大多数流量都遵循配电，您需要花费额外的计算时间来重建永远不会被访问的页面。 更新站点越多，成本就越高。 在考虑其中一些技巧时，请记住这一点。
根据willit.build (一个Gatsby构建基准页面，提供基于Gatsby Cloud构建的网站的历史构建时间)，Contentful和WordPress网站的构建时间大约为每页200毫秒，这意味着对于一个拥有10000页的网站，完整的网站构建可能需要25分钟。 增量版本可以让您缩短几分钟，显示增量版本的功能。 如果您不执行完整构建，此技巧可能会很有帮助。
客户端渲染
客户端呈现也称为应用程序shell或SPA回退模型，是CDN路由。 如果您的网站托管了一百万个产品，所有这些产品都将通过此CDN层路由到index.html并成为一个包含应用程序shell的静态文件，并在客户端呈现。 当浏览器加载该页面时，客户端站点路由器将在浏览器中获取并呈现页面内容。
使用客户端呈现，您可以有效地托管无限数量的页面，但有一些重要的注意事项:
CSR可能会对SEO产生负面影响
客户端呈现的注意事项是它可能会影响性能—因为页面在加载JavaScript之前无法呈现。 自2021年5月起,Google将根据三速度量标准对网站进行排名,CLS，LCP和FID,统称为核心Web虚拟数据。 客户端渲染会对所有这些都产生负面影响，尤其是累积版式偏移。 这不是不可能的，它只是很难获得良好的CLS与应用程序外壳模型. 为此，您必须为每种页面类型创建自定义版本的应用程序外壳。
客户端呈现的页面不能被(某些)机器人读取
某些爬虫程序无法读取客户端呈现的内容。 Google声称他们的爬虫程序可以渲染和解释JavaScript，但我们知道大多数其他爬虫程序都不能，包括大多数社交平台的爬虫程序，这是许多网站的重要流量来源。
CSR需要支持重写和重定向规则
实施CSR的第三个警告是，它需要CDN提供商对重写和重定向规则的支持，有些提供商比其他提供商做得更好。 例如，您必须在AWS CloudFront上通过其404页面支持或使用Lambda@Edge处理程序来shoehorn这一点。
值得庆幸的是，领先的Jamstack平台Netliff，Vercel和Layer0提供了一种相当简单的方法来启用CSR。
在Netliff中，您有一个重定向文件。 有了200个修饰符，这是一个重写，但它是一个隐藏的重定向，用户永远看不到。
Netliff
Vercel在Vercel.json中提供重写支持，它还与Next.js紧密集成。
Vercel
Layer0中的CDN-as-JavaScript命令shell提供Next.js重写并支持其他框架。
Layer0 (Edgio)
增量静态生成
此技术由Next.js率先开发，涉及根据需要生成新的静态页面，以响应传入的流量。 浏览器请求尚未访问的新页面，并且对于每一个页面(无论页面是什么)，CDN将快速返回仅包含占位符数据且不包含内容的通用回退页面。
显示回退页面时，页面的静态构建进程在后台运行。 该构建完成后，回退页面将加载静态JSON数据并显示最终页面。 从那时起，以后的访问将获得静态构建的HTML。
增量静态再生
有一种称为增量静态再生的增量静态生成版本，这基本上是相同的过程。 但是，它还需要更新现有的静态页面以响应流量。 因此，如果基础数据发生变化，它将重新运行构建过程，其灵感来自过时而重新验证，这是一种流行但尚未得到广泛认可的缓存协议。 在重建页面时，这将提供页面的旧版本，而不是回退版本，然后在构建过程完成后将其替换为新版本。
增量静态再生：
- 更新现有静态页面以响应流量，
- 用作页面的过时版本，而不是回退。
增量静态再生对SEO和兼容性的影响很小，尤其是在第一页上。 回退页面完全是CSR，没有数据，因此不清楚爬虫程序将如何响应。
动态技术
除了静态技术之外，电子商务网站还可以从以下动态技术中受益：
- 无服务器服务器端呈现+ CDN
- 并行静态渲染
无服务器服务器端呈现+ CDN
将SSR与CDN结合使用，您可以根据流量按需生成页面，这为您提供了一些优势。 这种技术也更符合传统电子商务平台的制作方式。 它允许您支持多个页面—您可以在需要时动态生成这些页面—并确保与传统平台的高度兼容性。
然而，这种技术也有一些争议。 Jamstack社区对什么是Jamstack非常教条，并声称Jamstack需要静态生成。
当满足以下两个条件时，无服务器服务器端呈现实际上是Jamstack-ish：
- 无需管理任何DevOps和服务器。 它是无服务器的，开发人员不必管理扩展方式。 它与许多Jamstack平台用于支持其API的无服务器平台相同，这意味着您可以使用它来支持HTML数据并通过SSR。
- HTML从CDN提供。 这是一个严重的情况。 在首次缓存丢失后，CDN服务站点的速度与静态生成的Jamstack站点一样快。 请注意，这需要适当的缓存管理，对于多页面网站来说更难。
并行静态渲染/SSR预加载
Layer0允许您指定在部署期间应在边缘预呈现和缓存的一组URL，以确保用户在访问您的网站时获得次秒级体验。
静态预渲染涉及在部署站点后立即向应用程序代码发送请求并缓存结果。 通过这种方式，您只需构建应用来实现服务器端呈现，并为您的部分或全部页面获得静态网站的速度优势。 此功能对于大型复杂站点特别有用，因为这些站点要进行预发程序的URL太多，而不会产生非常长的构建时间。
SSR预加载是Layer0用于加速页面速度的另一项技术。 它与常规SSR管道非常相似，但基于部署后的流量日志分析。 高流量页面与部署并行预加载。 我们让部署立即进行，并异步构建高流量页面。 通过这种方式，您可以将部署与构建分开。 因此，您可以立即部署，同时最大限度地提高缓存命中率。
本质上，如果有一个请求的页面具有高流量水平，很可能会有缓存命中。 这是在这种环境中获得最佳缓存命中的最佳方式。
并行静态渲染允许您：
- 分析高流量页面的日志
- 部署后异步获取和存储高流量页面的HTML
- 立即部署，同时最大程度地提高缓存命中率
静态预览
混合渲染技术
您不必在静态和动态渲染技术之间进行选择。 您可以为网站上的每类页面选择合适的内容。 您可能希望将”关于我们”，”退货政策”或博客静态页面以及购物车，产品和类别等其他页面声明为动态页面。 我们建议您选择一家平台提供商，让您可以根据需要灵活地混合各种技术，尤其是在大规模混合时。
为每类页面选择最佳渲染技术，例如，声明某些页面为静态(例如博客，关于我们等)，以及其他页面为动态(例如购物车，产品，类别等)
选择一个框架和平台提供商，让您可以根据需要灵活地混合技术
使用Layer0进行大规模的Jamstack
如今的CDN可缓存图像，JavaScript和CSS，但不能缓存JSON或HTML文件，这正是阻碍页面加载时间的原因。 Layer0 CDN-as-JavaScript使其可以在边缘缓存数据，即使在动态的，无服务器的SSR环境中也是如此。
Jamstack让服务器摆脱困境，让CDN有效地管理流量，无论流量波动如何，它都可以轻松地做到这一点。 Layer0执行相同但不同的操作—我们不是在构建时渲染，而是在请求时渲染，但在边缘缓存每个构建，因此在1个构建后不再需要构建。
在构建时渲染每个页面对于较小的网站来说很好，但一旦你变得更大，构建时间就几乎无法忍受。 由于缺乏自定义/个性化或提供这些解决方案的变通办法，使得Jamstack专注于构建时间对于大型数据库驱动的网站(如电子商务和旅行)不太相关。
CDN-as-JavaScript
Layer0 CDN-as-JavaScript为您提供对缓存密钥，标头，cookie等的强大边缘控制，它还适用于您的代码。 它了解您的代码和框架的路由，并可在本地或预生产环境中仿真。
边缘规则存在于您的代码中，就像在经典的Jamstack中一样，通过实时日志，版本控制和一键回滚，让您可以完全控制边缘。
有关CDN-as-JavaScript路由模式的一些详细示例，请参阅Layer0/Edgio Cookbook。
性能监视器
要最大程度地提高缓存命中率，首先了解这些速率是很重要的，但这些信息通常会深入到您的CDN的访问日志中。
Layer0具有内置的性能监控功能，可以更轻松地了解何时发生页面缓存命中和未命中，并以非常友好的方式将此信息公开给开发人员。 Layer0中的性能监视器允许您：
- 基于路由而不是URL了解流量，因为这就是开发人员对其应用的看法。 它还跟踪每次部署，以便开发人员可以精确定位任何回归。
- 测量堆栈和加载方案(API，SSR，Edge等)中的性能问题
Layer0还创建了一个工具来诊断响应是否来自源服务器的边缘：DevTools。 DevTools帮助您确定响应是否来自源服务器的边缘。 下面的示例介绍了它如何在使用React Storefront构建的应用程序shell上工作，并显示请求点击的时间。 此示例中的响应来自Layer0 (现为Edgio)边缘网络。
Layer0 DevTools允许您诊断响应是来自边缘还是源服务器
了解响应是否来自边缘或源服务器对于大规模预取至关重要，这是Layer0为您做的另一件事。
按比例预取
预取对性能非常重要，因为它可以解锁即时页面速度。 传统的页面速度测试(如您使用Lighthouse进行的测试)侧重于客户单击后发生的情况。 但您可以在客户点击并获得零延迟和几乎无限带宽之前开始做很多事情。
Layer0 DevTools允许您诊断响应是来自边缘还是源服务器
Layer0上的网站速度惊人，因为它们使用高级预测性预取以及Layer0 CDN-as-JavaScript，这使它们能够在购物者的点击之前保持5秒。 这是通过在单击任何内容之前将缓存的动态数据从边缘流式传输到用户的浏览器来实现的，具体取决于用户下一步要单击的内容。 换句话说，您的商店可以在很短的时间内为您提供的不同产品，其价格和信息提供JSON数据。
增量迁移
Layer0提供迭代(渐进，渐进)迁移，允许您按照Martin Fowler的奇怪模式迭代迁移应用程序的一个部分。 这样，您就可以逐步”扼杀”特定功能，并将其替换为新的应用程序和服务。 这就像一颗石头一颗地移动着一座山石。
增量迁移需要在CDN边缘或源站进行路由控制。 以下是您如何使用CDN-as-JavaScript在Layer0上执行此操作的示例。
个性化和细分
增量，渐进，渐进的迁移对于大型站点非常重要。 但这不仅限于个性化！ 它还包括语言，地理等 这是有道理的，因为大型站点通常跨地理位置工作，并且它们必须能够在用户访问站点时对内容进行自定义。
一般准则是:如果此内容低于折线，我们建议延迟加载和客户端渲染。 如果它是顶级的个性化内容，您希望它以服务器呈现的输出形式呈现。
在翻盖上方个性化=为缓存密钥添加个性化
在Layer0上，您可以声明自定义缓存密钥，并根据货币或行为对其进行个性化设置。 您可以根据某个人是常客还是新访客，在CDN-as-JavaScript中只需几行即可自定义类别页面上的促销和排序顺序。
A/B测试和Layer0
A/B测试和个性化为构建Jamstack站点增加了新的复杂性。 测试对于大型站点和大型组织非常重要，因为它们的决策是由投资回报率驱动的，并且必须经过验证才能提高转化率。
但是，在传统的Jamstack中，您唯一的选择是在浏览器中运行的客户端A/B测试。 问题在于，这会以两种方式影响性能并使您的测试无效。 它会损害你的变体的性能，抹去任何类型的改进。 有时，A/B测试在眼睛通过测试元素后生效。 您的头中可能有A/B测试，并且用户已经在JavaScript运行并更改该元素后扫描过该头。
客户端A/B测试的问题
- 通常是静态站点的唯一选项
- 它在JavaScript运行之前不会运行
- 性能不佳，可能会使测试无效
Layer0 Edge实验通过在边缘启用A/B测试来解决这些问题。 在XDN上，新体验始终为本机，缓存和次秒级。 这超出A/B测试范围，延伸到您网站的任何变体。
边缘实验
Layer0还内置了强大的Edge实验引擎。 该模块是CDN-as-JavaScript的一部分，并且了解您的所有变体，确保每个变体在边缘单独缓存。 这使您能够准确地控制哪些访客可以看到哪种变体。
Edge实验允许您：
- 将实时流量路由到网络边缘的任何已部署分支
- 运行A/B测试，Canary部署或功能标志
- 根据概率或标头值甚至编写路由规则
- IP地址
使用Edge Experiments，您可以轻松拆分测试，而不会影响您的站点性能。 通过易于使用且功能强大的界面在边缘执行拆分。 边缘实验可用于A/B和多变量测试，金丝雀部署，蓝绿色测试，传统网站的迭代迁移，个性化等。
我们的客户如何从Layer0受益
Layer0提供了向Jamstack和无头的顺畅过渡，并为具有大型目录，频繁更新或运行传统电子商务平台的网站提供了巨大的优势。 Shoe Carnival和Turnkey Vacation Rentals是大型网站开发团队在Layer0上使用Jamstack和Headless进行电子商务的两个示例
交钥匙
全包式度假租赁是一家提供全套服务的度假租赁物业管理公司，为全国顶级旅游目的地提供优质和豪华级别的租赁住宅。 与Airbnb等网站不同，交钥匙系统仅提供经过预先审核的商品信息。 它还使用一套标准化的技术工具集中处理管理细节。
原始设置
交钥匙在AWS Elastic Beanstalk上的Docker内运行一个应用程序，并正在寻找一种解决方案，为他们提供更好的性能控制和洞察。
他们考虑了一些Jamstack解决方案，但希望有一个能够本地支持Next.js的平台，如Layer0 其中一个决定性因素是，使用Layer0，他们可以避免重构其代码库和数据管道的工作方式。
Layer0已通过下面列出的一些功能帮助交钥匙提高了灵活性。
环境
过去，交钥匙使用Jenkins内部构建的自定义管道，而该团队从一个中继分支进行部署，对即将投入生产的产品毫无信心。
借助Layer0，分支机构拥有单独的环境，而统包团队可以设置原始环境—他们不会合并到临时环境中，直到他们知道某项内容已通过QA。 这消除了与QA相关的心理负担。
日志
在Beanstalk上挖掘服务器日志可能是一场噩梦—您必须准确地找出您要查找的日志，它们所在的服务器，它们是否负载平衡等 使用Layer0，您可以直接从构建中实时流式传输日志，这允许您查找要进行故障排除的构建，按”播放”并观看日志。
增量迁移
交钥匙有页面，而不是在React/Next.js上，并在旧架构上运行。 使用Layer0，他们可以采用已经迁移的内容，将其放在XDN上，然后继续增量迁移。
Layer0让交钥匙工具团队专注于性能。
鞋子狂欢节
Shoe Carnival Inc.是一家美国鞋类零售商。 该公司目前在美国中西部，南部和东南部地区经营着一家在线商店，以及419家实体店。
以下是一些Layer0的功能，鞋子嘉年华团队认为特别有用。
灵活性
Shoe Carnival使用Salesforce Commerce Cloud，而不是像Shoe Carnival那样运行无头前端。 在后端执行数据到前端时，需要大量的工程和理解。 由于Layer0后端在Salesforce和React前端之间提供的灵活性，这些难题可以得到解决。 Shoe Carnival的团队可以自由地使用React进行构建，而忽略Salesforce的局限性。
是时候提高产量了
鞋类嘉年华的生产时间大幅增加。 该团队可以从Salesforce开发周期中分离出来，并在部署中进行非常快速的更改。
站点速度
生产速度是一个巨大的好处，但网站的性能通常很难忽略，因为Shoe Carnival从5 -6的平均页面加载秒增加到次秒。 他们可以在非常精细的级别缓存东西，并有工具来确保客户正在寻找的总是可用的和最新的。
增量部署
增量部署使团队部署到生产环境的速度比构建完整的应用程序来部署要快得多。
至于迁移到Layer0的影响，当Shoe Carnival在CDN级别针对无头站点测试原始站点的转化率为50/50时，无头站点始终获胜，表现优于原始站点，并提高了速度和可见性。
摘要
在Layer0，我们相信Jamstack是Web开发的未来。 在大型动态电子商务网站(通常不适用传统静态技术)中，Layer0基本上将Jamstack的性能和简单性优势带给前端开发人员团队。 我们喜欢将其称为动态Jamstack。 它使SPA网站即时加载和更容易开发。
Layer0附带了应用程序感知型CDN-as-JavaScript，它可以扩充甚至取代您当前的CDN，并将您需要的所有Web安全功能推向边缘。 Layer0还附带了一系列以开发为中心的技术，这些技术使开发，部署，预览，试验，监视， 运行您的无头前端Simple，包括自动化的全堆栈预览URL，前端的无服务器JavaScript后端，高级缓存监控等。
Layer0是一个一体化开发平台，可让您：
- 通过预渲染和即时渲染利用Jamstack进行电子商务
- 通过从产品目录API预取数据，实现零延迟网络连接
- 在您的应用中本地配置边缘(CDN-as-JavaScript)
- 在本地和预处理中运行边缘规则
- 从GitHub，GitLab或Bitbucket为每个新分支创建预览URL并推送
- 在边缘运行拆分以进行性能A/B测试，金丝雀部署和个性化
- 无服务器JavaScript比AWS Lambda更简单，更可靠
