高性能Hydrogen店面构件

The future of commerce is dynamic, contextual, and personalized. Hydrogen is a React-based framework for building custom and creative storefronts giving developers everything they need to start fast, build fast, and deliver the best personalized and dynamic buyer experiences powered by Shopify’s platform and APIs. We’ve built and designed Hydrogen to meet the three needs of commerce:

商业的未来是动态的、情景化的和个性化的Hydrogen是一个基于React的框架,用于构建自定义和创造性的店面,为开发人员提供他们所需的一切,以快速启动、快速构建,并提供由Shopify平台和API支持的最佳个性化和动态买家体验。我们已经建立和设计了Hydrogen,以满足商业的三种需求。

  1. fast user experience: fast loading and responsive
  2. 快速的用户体验:快速加载和响应
  3. best-in-class merchant capabilities: personalized, contextual, and dynamic commerce
  4. 一流的商户能力:个性化、情景化和动态商务
  5. great developer experience: easy, maintainable, and fun.
  6. 伟大的开发者体验:简单、可维护、有趣。

A visualization of a .tsx file showing the ease of adding an Add to Cart button to a customized storefront

Hydrogen provides optimized React components enabling you to start fast.

Hydrogen提供优化的React组件,使你能够快速启动。

These objectives have inherent tension that’s important to acknowledge. You can achieve fast loading through static generation and edge delivery, but you must forgo or make personalization a client-side concern that results in a deferred display of critical content. Vice versa, rendering dynamic responses from the server implies a slower initial render but, when done correctly, can deliver better commerce and shopping experience. However, delivering efficient streaming server-side rendering for React-powered storefronts, and smart server and client caching, is a non-trivial and unsolved developer experience hurdle for most teams.

这些目标有内在的张力,必须承认。你可以通过静态生成和边缘交付实现快速加载,但你必须放弃或使个性化成为客户端的关注点,导致关键内容的延迟显示。反之亦然,从服务器渲染动态响应意味着较慢的初始渲染,但如果操作正确,可以提供更好的商务和购物体验。然而,为React驱动的店面提供高效的流式服务器端渲染,以及智能的服务器和客户端缓存,对大多数团队来说是一个非难事,也是未解决的开发者经验障碍。

Hydrogen is built and optimized to power personalized, contextual, and dynamic commerce. Fast and efficient server-side rendering with high-performance storefront data access is the prerequisite for such experiences. To optimize the user experience, we leverage a collection of strategies that work together:

Hydrogen的建立和优化是为了支持个性化的...

开通本站会员,查看完整译文。

首页 - Wiki
Copyright © 2011-2024 iteam. Current version is 2.125.3. UTC+08:00, 2024-05-20 21:14
浙ICP备14020137号-1 $访客地图$