Fetching Page Data
For dynamic and consistent rendering, Weaverse fetches page data server-side, primarily through a Remix route's
loader function using the
loadPage() function takes an optional object as its parameters:
strategy: Sets the caching strategy for the page data. Defaults to
CacheShort(). Dive deeper into caching in the Data Fetching and Caching page.
locale: Specifies the page's locale. Default:
handle: Indicates the handle of the requested page. Default:
type: Defines the type of the page to load. The supported types include:
PRODUCT(Product details page)
ALL_PRODUCTS(All products page)
COLLECTION(Collection details page)
COLLECTION_LIST(All collections page)
ARTICLE(Article details page)
CUSTOM(Coming soon 🚧)
When no custom parameters are passed to
context.weaverse.loadPage(), Weaverse smartly auto-detects the page type based on the current route's request URL.
The mapping is similar to a native liquid theme:
Remix's Route Pattern
Break Free from Static Routes
In a native liquid theme, routes are often rigid and pre-defined, limiting the developer's flexibility in presentation and data flow. Weaverse shatters this limitation with flexible page loading & Remix's dynamic routing features! By specifying the desired
type parameter, you can load a particular page at any route of your choice 😎.
Imagine you want to load a collection page, which traditionally resides under
/collections/some-collection-handle. With Weaverse, you can present this page at a unique URL, such as
/featured-products. Here's a snippet to achieve this:
Then the page will be available at this URL: https://example.com/featured-products
This freedom in routing & page loading not only enhances the user experience but also empowers developers to structure content in a way that best serves their e-commerce objectives.
Once you've loaded the desired content, the next step is rendering it on the front end. The
WeaverseContent component is designed for this purpose, ensuring your content is displayed correctly within the Weaverse ecosystem.
WeaverseContent component is essentially a wrapper around the
Here's how it is typically structured: