Rendering a Weaverse Page

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.

WEAVERSE_EMBEDED_CODE

The loadPage() function takes an optional object as its parameters:

WEAVERSE_EMBEDED_CODE

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
`INDEX`	https://example.com/	`_index.tsx`
`ALL_PRODUCTS`	https://example.com/products https://example.com/collections/all	`products._index.tsx` or `collections.all.tsx`
`PRODUCT`	https://example.com/products/shirt	`products.$productHandle.tsx`
`COLLECTION_LIST`	https://example.com/collections	`collections._index.tsx`
`COLLECTION`	https://example.com/collections/men	`collections.$collectionHandle.tsx`
`PAGE`	https://example.com/page/about-us	`pages.$pageHandle.tsx`
`BLOG`	https://example.com/blogs/news	`blogs.$blogHandle._index.tsx`
`ARTICLE`	https://example.com/blogs/news/new-arrival	`blogs.$blogHandle.$articleHandle.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 😎.

Example:

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:

WEAVERSE_EMBEDED_CODE

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.

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.

WEAVERSE_EMBEDED_CODE

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

Here's how it is typically structured:

WEAVERSE_EMBEDED_CODE

Fetching Page Data

Break Free from Static Routes

Using the WeaverseContent Component

Using the `WeaverseContent` Component