Dynamic Content
Dynamic Content allows you to customize your home and landing pages with server-side data fetching using FastStore. This feature improves performance and SEO by dynamically displaying fetched data in store sections on these pages.
In the example above, we've already set up the page slug,
/my-landing-page, in the store code, and now we are including it 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
To benefit from this feature, your store
@faststore/core package must have a version equal to or above v3.0.55. Follow the steps below to update the package:-
Update your store’s
@faststore/corepackage to, for example, thev3.0.55by running the following command:_10yarn add @faststore/core@3.0.55 -
Run
yarn devto sync the changes to your project.
Understand Section Override
To work with dynamic content, you need knowledge of Section Override.
Next steps
To use the Dynamic Content feature in your home and landing pages, refer to the following guides:
- Setting up your store code for Dynamic Content: Request Fetch API or any HTTP library to fetch the data directly (Axios, fetch, etc).
- Consuming Dynamic Content within sections: Fetch the data using the existing API Extension feature.