Tastify — Frontastic component rendering optimizations

tastify is the default way you should be exposing your Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code.. It's optimized to access only the relevant information as well as optimize the performance of your Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code..

The less data you depend on, the fewer re-renders will happen in your components. Here, we'll show you some ways to make the most out of tastify.

Adapting a Frontastic component

Instead of connecting a Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. with the Redux-store using the connect helper, you can use the tastify higher-order component and opt-in to additional properties you want to receive:

import tastify from '@frontastic/catwalk/src/js/helper/tastify'

// ... your tastic implementation ...

export default tastify({
  connect: {
    context: true,
    node: true,
    cart: true,
    wishlist: true,
  },
  translate: true,
})(NavigationTastic)

You'll always receive the Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. configuration data, which includes the data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site..

Currently, the following types are supported to be connected:

  • connect.cart: Whether to pass information about the current cart
  • connect.context: Whether to pass the Frontastic context object
  • connect.deviceType: Whether to pass the deviceType
  • connect.isServerSideRendering: Whether we should pass a flag isServerSideRendering
  • connect.node: Whether to pass information about the current node (also known as page folder)
  • connect.page: Whether to pass information about the current page
  • connect.rawData: Whether to pass "rawData" but it shouldn't be needed anymore
  • connect.tastic: Whether to pass the schema of the current Frontastic component but this is rarely needed
  • connect.wishlist: Whether to pass information about the current wishlist
  • connect.order: Whether to pass information about the last or currently selected order
  • connect.notifications: Whether to pass information about the current notifications
  • connect.route: Whether to pass information about the current route

In addition, you can use a setting to get your Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. data automatically translated:

  • translate: Automatically translates the Frontastic component fields from the Frontastic studio

📘

Prevent false-positive notices about deprecation

We highly recommend wrapping all of your Frontastic components into tastify() so we raise a deprecation notice when one is found without it. However, this detection can't be 100% accurate and there might be valid reasons for you to explicitly not apply tastify(). If this is the case for you, you can set the property __suppressNotTastifiedNotice to true on the exported component.

Enable auto-tastify

You can enable auto-tastify and your Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. will only use it if additional data is required. To do this, open your project.yml which you'll find in your config folder of your GitHub repository.

Within the data, set autoTastify: true, for example:

data:
  autoTastify: true
  layout:
    breakpoints:
      -
        identifier: mobile
        name: Mobile
        userAgentRegexp: '/(Android|webOS|iPhone|iPod|BlackBerry|Windows Phone)/i'
      -

Server Side Rendering Frontastic components

With tastify, we also added the ability to check inside a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. whether we're running inside a Server Side Rendering process.

In order to get that information, you need to enable the connect configuration for isServerSideRendering:

export default tastify({
  connect: {
    isServerSideRendering: true,
  }
})(YourTastic)

Then you can check for the isServerSideRendering prop inside your Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. to know whether this call comes from the browser or our SSR process.

Constantly changing data-prop

Too often in the past, the data prop that Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. receive was recreated. So now, it's being memorized in the TasticWrapper-component. Because of this, for a PureComponent no unnecessary re-render would be caused for data prop.

In addition to data, Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. also receive a rawData prop, that still changes very often. rawData is only required in edge cases. Some legacy Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. might still use it. If your Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. currently uses rawData, please check if you can migrate it to use data instead. If that's not possible, please let us know what you are missing to work without rawData.

Remove unnecessary props from components

Tastify removes rawData, node, and page props from the Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. per default. This makes sure that your Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. only re-renders when the data prop changes. But, you can opt-in to receive them if you want to.


Did this page help you?