Dynamic Content
Dynamic Content is a FastStore feature that allows you to customize your store home and landing pages using server-side data fetching. This feature improves performance and SEO by dynamically displaying fetched data in store sections on these pages.
In the following example, a page slug,
/my-landing-page, is configured in the store code and included in the Headless CMS.
The landing page features two Hero sections: a native one displaying an image added from the Headless CMS, and a custom one with a fixed image sourced directly from an API defined in the store code.
For other types of pages, such as collections (PLPs) and product pages (PDPs), server-side data fetching is already available via API Extensions. Refer to the API Extension documentation for more details on fetching data for these pages.
Before you begin
Update the @faststore/core package
Ensure your store uses
@faststore/core v3.0.55 or greater. Follow the steps below to update the package:- Update your store’s
@faststore/corepackage to the latest version by running the following command:
_10yarn add @faststore/core@latest
- Run
yarn devto sync the changes to your project.
Understand Section Override
To work with dynamic content, you need knowledge of Section Override.
Implementing Dynamic Content
To use the Dynamic Content feature in your home and landing pages, follow these steps:
- Step 1 - Setting up your store code for Dynamic Content: Request Fetch API or any HTTP library to fetch the data directly (Axios, fetch, etc).
- Step 2 - Handling Dynamic Content within custom sections: Fetch the data using the existing API Extension feature.