React Server Component 在 Shopify 中的最佳实践

·  阅读 2310
React Server Component 在 Shopify 中的最佳实践

首发于公众号前端从进阶到入院,欢迎关注。

Shopify 是国外的一个允许客户自由搭建商城的 nocode 产品,工程师 Cathryn Griffiths 分享了他在 Shopify 中实用 React Server Component 的最佳实践。

Hydrogen 是基于 React 的框架用来创建自定义店面的框架,他们试用 RSC(React Server Component)有两个理由:

  1. 再见了,臃肿的 bundle 体积,你好,更棒的购物体验!
  2. 技术人的一种自私情结:这玩意一定很有趣!

这是一件很有挑战性的事。RSC 是一种范式转变,一开始他们遇到的问题是构建的客户端组件太多,服务器组件太少。经过数月的反复尝试和重构才找到较好的方案。

这篇文章将着重讨论工程师在构建 Hydrogen 时候发现的 RSC 最佳实践,不光是对个人的,也是对团队的。希望能让读者们更加理解如何在 RSC 应用中编写组件,减少你的无效时间。

优先写共享组件

当你需要在 RSC 应用程序中从头构建组件时,请从共享组件开始。共享组件可以同时在服务器和客户端上下文中执行,而不会出现任何问题。它们是客户端和服务器组件之间的天然中间地带,是个不错的起点。

从中间地带开始,可以帮助你更好的思考,引导你构建正确类型的组件。你必须问自己:“这段代码只能在客户机上运行吗?”,类似地,“这段代码应该在客户机上执行吗?”下一节列出了一些您应该问的问题。

不要总是默认构建客户端组件。虽然方便,但最后应用程序会太臃肿,很多组建更适合在服务端运行。

在少数情况下选择客户端组件

RSC 应用程序中的大多数组件应该是服务器组件,因此在确定是否需要客户端组件时,需要仔细分析用例。

通常只有客户端特定的逻辑部分需要被提取到客户端组件中:

  • 整合客户端交互性
  • 用了 useStateuseReducer
  • 用了生命周期渲染逻辑(比如 useEffect
  • 用了不支持 RSC 的第三方库
  • 用了服务端不支持的浏览器 APIs

重要说明:不要只是盲目将整个共享组件转换为客户端组件。相反,有意地提取需要的特定功能。这有助于保持您的客户端组件和 bundle 尺寸尽可能的小。文章末尾会有一些示例。

尽可能以服务端组件为主

如果组件不包含任何客户端组件用例,那么它应该被改为服务器组件(如果它符合以下条件之一):

  • 该组件包含不应该在客户端上暴露的代码,如专用业务逻辑和密钥。

  • 客户端组件中不会使用该组件。(RSC 的限制,客户端组件中不能直接导入服务端组件)

  • 代码从不在客户端上执行(据你所知)。

  • 代码需要访问文件系统或数据库(客户端上不可用)。

  • 代码需要从 StoreFront API 获取数据(在 Hydrogen 中特定的情况)。

如果组件需要在客户端组件中使用,可以先深入研究用例和实现。很可能你可以将组件实例作为 children props 传递给客户端组件,而不是让客户端组件直接导入并实用它。这样就不需要把组件转换为客户端组件了。

探索一些例子

有很多东西需要记住,我们可以用 Hydrogen 启动模板来试几个例子。

订阅注册

第一个示例是一个组件,它允许买家注册订阅我的在线商店的时事通讯。它出现在每个页面的页脚,看起来像这样:

我们从一个名为 NewsletterSignup.jsx的共享组件开始:

export default function NewsletterSignup() {
  return (
    <div>
      <p>
        Sign up for our newsletter to never miss out on latest news and product
        drops!
      </p>
      <label for="emailInput">Email</label>
      <input type="text" id="emailInput" name="email" placeholder="Email" />
      <button
        onClick={() => {
          /* TODO */
        }}
      >
        Sign me up
      </button>
    </div>
  );
}
复制代码

在这个组件中,我们有两个客户端交互部分(输入字段和提交按钮),这说明这个当前编写的组件不能是共享组件。

我们别将其完全转换为客户端组件,而是将客户端功能提取到一个单独的 NewsletterSignupForm.client.jsx组件里:

export default function NewsletterSignupForm() {
  return (
    <>
      <label for="emailInput">Email</label>
      <input type="text" id="emailInput" name="email" placeholder="Email" />
      <button
        onClick={() => {
          /* TODO */
        }}
      >
        Sign me up
      </button>
    </>
  );
}
复制代码

然后更新 NewsletterSignup 组件来使用这个客户端组件:

import NewsletterSignupForm from './NewsletterSignupForm.client';

export default function NewsletterSignup() {
  return (
    <div>
      <p>
        Sign up for our newsletter to never miss out on latest news and product
        drops!
      </p>
      <NewsletterSignupForm />
    </div>
  );
}
复制代码

我们很容易到此为止,并将 NewsletterSignup 组件保持为一个共享组件。然而我知道这个组件只在我的在线商店的页脚中使用,而我的页脚组件是一个服务端组件。所以它不需要是一个共享组件,也不需要成为客户端 bundle 的一部分,简单地将其重命名为 NewsletterSignup.server.jsx来安全地将其更改为服务端组件。

搞定,你可以在最终的 Stackblitz 代码示例 中查看这个时事通讯注册组件。

产品常见问题组件

在下一个示例中,我们将产品常见问题部分添加到产品页面。这里的内容是静态的,对我的在线商店中的每个产品都是一样的。来自买家的互动可以展开或收起内容。它看起来是这样的:

让我们从一个共享的ProductFAQs.jsx开始。jsx 组件:

export default function ProductFAQs() {
  return (
    <ul>
      <li>
        <span>Where was this board made?</span>
        <p>
          All our boards are designed in Canada by our Hydrogen design team.
        </p>
        <p>Materials are sourced from local manufacturers.</p>
        <p>
          Assembly is done by our skilled team on site in our brick and mortar
          shop.
        </p>
      </li>
      <li>
        <span>What if I don't like it?</span>
        <p>
          The Hydrogen team stands by their products. We strive to delivery high
          quality boards that will last a lifetime and, importantly, make you
          happy.
        </p>
        <p>
          That said, if you don't like it, you can return it to us (free of
          cost!) and we'll reimburse you the money. Contact us directly for more
          details.
        </p>
      </li>
    </ul>
  );
}
复制代码

接下来,我们将把它添加到产品页面。ProductDetails.client 组件用于展示此页面的主要内容,因此很容易把ProductFAQs转换为客户端组件,这样 ProductDetails 组件可以直接导入使用它。但是,我们可以通过将 ProductFAQs 传递给 product/[handle].server.jsx 页面来避免这种情况:

import ProductFAQs from '../../components/ProductFAQs';

export default function Product({ country = { isoCode: 'US' } }) {
  // ...
  return (
    <Layout>
      <ProductDetails product={data.product}>
        <ProductFAQs />
      </ProductDetails>
    </Layout>
  );
}
复制代码

然后更新 ProductDetails组件来使用 children:

export default function ProductDetails({ product, children }) {
  // ...

  return (
    <>
      <Seo product={product} />
      <Product product={product} initialVariantId={initialVariant.id}>
        ...
      </Product>
      {children}
    </>
  );
}
复制代码

接下来,我们想要将客户端交互部分添加到 ProductFAQs 组件。同样,我们很容易直接将 ProductFAQ 组件从共享组件转换为客户端组件,但没必要。这些交互仅用于展开和收起 FAQ 内容,而内容本身是硬编码的,不需要成为客户端 bundle 的一部分。我们要做的是将客户端交互提取到一个专门的客户端组件Accordion.client.jsx:

import { useState } from 'react';

export default function Accordion({ heading, children }) {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <div
        onClick={() => {
          setOpen(!open);
        }}
      >
        <span>{heading}</span>
        <span>{open ? '-' : '+'}</span>
      </div>
      {open && children}
    </div>
  );
}
复制代码

更新ProductFAQs组件来使用Accordion

import Accordion from './Accordion.client';

export default function ProductFAQs() {
  return (
    <ul>
      <li>
        <Accordion heading="Where was this board made?">
          <>
            <p>
              All our boards are designed in Canada by our Hydrogen design team.
            </p>
            <p>Materials are sourced from local manufacturers.</p>
            <p>
              Assembly is done by our skilled team on site in our brick and
              mortar shop.
            </p>
          </>
        </Accordion>
      </li>
      <li>
        <Accordion heading="What if I don't like it?">
          <>
            <p>
              The Hydrogen team stands by their products. We strive to delivery
              high quality boards that will last a lifetime and, importantly,
              make you happy.
            </p>
            <p>
              That said, if you don't like it, you can return it to us (free of
              cost!) and we'll reimburse you the money. Contact us directly for
              more details.
            </p>
          </>
        </Accordion>
      </li>
    </ul>
  );
}
复制代码

此时,不再有理由让 ProductFAQs 组件保持为共享组件了。所有的客户端交互都已经被提取出来,并且,类似于NewsletterSignup组件,我知道这个组件永远不会被客户端组件使用。现在剩下的就是:

  • 重命名 ProductFAQs.jsx 文件为 ProductFAQs.server.jsx

  • 更新 product/[handle].server.jsx 中的 import 声明

  • 通过 Tailwind 添加一些漂亮的样式。

你可以在 Stackblitz 中查看 Product FAQ 代码

React Server Components 是一种范式转变,为 RSC 应用程序编写组件可能需要一些时间来适应。当你在构建时,请记住以下几点:

  • 从共享组件开始。

  • 在特定情况下,将功能提取到客户端组件中。

  • 如果代码永远不需要或永远不应该在客户机上执行,则改写为服务端组件。

享受 coding 吧!

Cathryn 是 Shopify Checkout 团队的前端开发人员,也是 Hydrogen 的创始成员。她在加拿大蒙特利尔远程工作。当不写代码的时候,她通常会和她的狗玩、做手工或阅读。

参考:shopify.engineering/react-serve…

首发于公众号前端从进阶到入院,更多有趣的前端文章,欢迎关注。

分类:
前端
收藏成功!
已添加到「」, 点击更改