Rendering a Weaverse Page

2.5 Learn how to load and render Weaverse pages using optional parameters and the WeaverseContent component.

The Weaverse Team avatar
Written by The Weaverse Team
Updated over a week ago

Fetching Page Data

For dynamic and consistent rendering, Weaverse fetches page data server-side, primarily through a Remix route's loader function using the weaverse.loadPage() method.

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: en-us.

  • handle: Indicates the handle of the requested page. Default: /.

  • type: Defines the type of the page to load. The supported types include:

    • INDEX (Home page)

    • PRODUCT (Product details page)

    • ALL_PRODUCTS (All products page)

    • COLLECTION (Collection details page)

    • COLLECTION_LIST (All collections page)

    • PAGE (Regular page)

    • BLOG (Blog 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:

Page Type

Example URL

Remix's Route Pattern




products._index.tsx or collections.all.tsx













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:

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.

Using the WeaverseContent Component

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.

The WeaverseContent component is essentially a wrapper around the WeaverseHydrogenRoot component.

Here's how it is typically structured:

Did this answer your question?