1. Commerce
  2. System Management
  3. Site Performance
  4. SuiteCommerce Rehydration
  5. How SuiteCommerce Rehydration Addresses Stale Content
  6. Recommended Approach for Custom Components

Recommended Approach for Custom Components

If you customize pages through themes or extensions, you don't need to make changes for rehydration itself. Rehydration happens automatically.

You only need to customize a component if you want to control what appears in prerendered cached content before the SPA finishes loading. In general, add logic that applies only when the page is rendered by the SEO page generator. This lets you control prerendered output without changing the shopper's interactive SPA experience.

When you create a custom component, consider the following:

You can use the following approaches:

  1. Blur content when a placeholder is useful.

    Add the .blur class to the appropriate element in the template. This uses the same blur treatment SuiteCommerce uses for price content. This approach retains a visible placeholder in the layout. It can help reduce layout shift. However, it may not be suitable for large content areas because it can create a large blurred block.

  2. Prevent content from being prerendered when it shouldn't appear in cached output.

    If you want to exclude a child view from prerendered cached content, see Excluding Content from the SEO Page Generator. Wrap the factory function that creates the child view in a conditional statement that runs only when the page is not being rendered by the SEO page generator. This approach prevents the child view from being included in prerendered output. You may prefer this approach when the content shouldn't appear in cached HTML. However, because no placeholder is rendered, the content can cause layout shift when the SPA later adds it to the DOM.

  3. Create a custom effect when needed.

    If blurring or excluding content isn't the right approach for your web content, you can create a custom effect. For example, you can use a custom placeholder or another visual treatment. The main decisions to make are:

    • What should appear in prerendered cached content?

    • What should appear only after the SPA loads?

  4. Use blur, hidden-state, or exclusion logic so that it applies only during prerendering by the SEO page generator.

    When the SPA loads in the shopper's browser, that prerender-only logic no longer applies. The SPA then renders or replaces the content naturally. You don't need a separate step to remove the effect.

Related Topics

General Notices