> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pureclarity.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuration Mode

> Understanding client-side vs server-side display modes in Magento 2.x and their impact on PureClarity recommendations

PureClarity offers two distinct display modes for rendering recommendations in Magento 2.x. Understanding these modes helps you choose the best approach for your specific requirements and technical constraints.

## Accessing Mode Configuration

Navigate to **Stores > Configuration > PureClarity** and locate the **"Mode"** section.

<img src="https://mintlify.s3.us-west-1.amazonaws.com/pureclarity/images/magento/mode-configuration.webp" alt="Mode settings in PureClarity configuration page in Magento 2 admin" />

## Display Mode Options

### Client-Side Mode (Default)

**Recommended for:** Most standard implementations\
**Processing location:** PureClarity servers\
**Template management:** PureClarity admin console

In client-side mode, all recommendation data and HTML rendering occurs on PureClarity's servers. When a customer visits your site, JavaScript requests recommendations directly from PureClarity and displays them in real-time.

**How it works:**

1. **Page loads** with PureClarity JavaScript
2. **Recommendations requested** from PureClarity servers
3. **Complete HTML returned** and inserted into zones
4. **No additional Magento processing** required

**Advantages:**

* **Faster page loads** - No server-side processing delays
* **Reduced server load** - Offloads recommendation processing
* **Real-time updates** - Content changes immediately in PureClarity admin
* **Global CDN delivery** - Fast content delivery worldwide
* **Simplified implementation** - No complex server-side customizations

<Note>
  Client-side mode is the standard implementation and works well for most e-commerce sites without complex pricing rules or customer-specific restrictions.
</Note>

### Server-Side Mode

**Recommended for:** Complex pricing, custom restrictions, or advanced customizations\
**Processing location:** Your Magento server\
**Template management:** Magento templates with PureClarity data

In server-side mode, PureClarity provides product SKUs and recommendation logic, but Magento handles the final data assembly and HTML rendering using current store data.

**How it works:**

1. **Page loads** and triggers server-side recommendation request
2. **PureClarity returns SKUs** and recommendation metadata
3. **Magento processes SKUs** with current pricing, inventory, and rules
4. **Custom templates render** final HTML with live data
5. **Complete recommendations** inserted into page

**Advantages:**

* **Live pricing integration** - Real-time price calculations
* **Customer-specific data** - Personalized pricing and availability
* **Complex business rules** - Custom logic and restrictions
* **Full template control** - Complete customization of appearance
* **Inventory accuracy** - Current stock levels reflected

<Warning>
  Server-side mode requires additional development work and may impact page load performance. Use only when client-side mode cannot meet your requirements.
</Warning>

## When to Choose Each Mode

### Client-Side Mode Best For:

* **Standard pricing** - Fixed prices without complex rules
* **Public catalogs** - Same prices and availability for all customers
* **Fast implementation** - Quick setup without custom development
* **High traffic sites** - Reduced server load requirements
* **Global audiences** - CDN-delivered content for speed

### Server-Side Mode Best For:

* **Dynamic pricing** - Customer group pricing, volume discounts
* **B2B features** - Account-specific pricing and catalogs
* **Complex inventory** - Multi-location, reserved, or allocated stock
* **Custom restrictions** - Product visibility rules beyond standard Magento
* **Advanced integrations** - ERP systems, custom pricing engines

<Tip>
  Start with client-side mode unless you have specific requirements that demand server-side processing. You can always migrate to server-side mode later if needed.
</Tip>

## Technical Implementation Details

### Client-Side Implementation

```html theme={null}
<!-- Zone placement in templates -->
<div data-pureclarity="bmz:ZONE-ID;"></div>
```

**JavaScript loading:**

* PureClarity script loads asynchronously
* Recommendations request product data from PureClarity
* Complete HTML inserted into zone containers
* No Magento processing required

### Server-Side Implementation

```html theme={null}
<!-- Zone placement in templates -->
<div data-serverside-pureclarity="bmz:ZONE-ID" 
     data-pureclarity-bmz-id="ZONE-ID" 
     class="pc_bmz" />
```

**Processing flow:**

* Magento processes recommendation requests
* SKUs retrieved from PureClarity
* Product data loaded from Magento database
* Custom templates render final output
* HTML inserted into zone containers

<Note>
  Server-side mode requires additional template development and configuration. See [Server-Side Mode Guide](/integrations/magento/magento-2/serverside) for detailed implementation instructions.
</Note>

## Performance Considerations

### Client-Side Performance

**Advantages:**

* **Faster initial page load** - No server-side processing delay
* **Cached content** - CDN delivery and browser caching
* **Parallel loading** - Recommendations load independently
* **Reduced server load** - Offloaded processing

**Considerations:**

* **JavaScript dependency** - Requires client-side JavaScript
* **Network requests** - Additional API calls to PureClarity
* **Content delay** - Slight delay before recommendations appear

### Server-Side Performance

**Advantages:**

* **No client dependencies** - Works without JavaScript
* **SEO friendly** - Server-rendered content for crawlers
* **Complete control** - Full optimization possibilities

**Considerations:**

* **Server processing** - Additional load on Magento servers
* **Database queries** - Extra product data retrieval
* **Page load impact** - Potential slowdown during processing
* **Scaling challenges** - Increased resource requirements

## SEO and Accessibility

### Client-Side SEO

* **JavaScript-dependent** content may not be indexed
* **Asynchronous loading** can delay content visibility
* **Modern crawlers** generally handle JavaScript well
* **Fallback content** can provide basic SEO value

### Server-Side SEO

* **Server-rendered** content is immediately indexable
* **No JavaScript dependency** for search engines
* **Complete control** over meta tags and structured data
* **Better accessibility** for non-JavaScript environments

<Info>
  For SEO-critical recommendation content, consider server-side mode or implement proper fallback content for client-side implementations.
</Info>

## Migration Between Modes

### Client-Side to Server-Side

Migration requirements:

1. **Template development** for recommendation rendering
2. **Custom logic implementation** for pricing and rules
3. **Testing and validation** of recommendation accuracy
4. **Performance optimization** for server-side processing

### Server-Side to Client-Side

Migration considerations:

1. **Template simplification** - Remove server-side logic
2. **Pricing validation** - Ensure client-side pricing is acceptable
3. **Testing recommendations** - Verify recommendation quality
4. **Performance monitoring** - Check for improvement

## Configuration Best Practices

### Mode Selection Strategy

1. **Assess requirements** - Pricing complexity, customizations needed
2. **Evaluate technical resources** - Development capabilities
3. **Consider performance** - Server load vs. page speed priorities
4. **Plan for scalability** - Future growth and complexity

### Implementation Guidelines

* **Start simple** - Begin with client-side unless requirements dictate otherwise
* **Test thoroughly** - Validate recommendations in both modes during evaluation
* **Monitor performance** - Track impact on site speed and server load
* **Document decisions** - Record reasoning for mode selection

## Troubleshooting Mode Issues

### Client-Side Troubleshooting

**Recommendations not loading:**

* Check JavaScript console for errors
* Verify PureClarity script loading
* Confirm zone placement HTML
* Test network connectivity to PureClarity

**Content not updating:**

* Clear browser cache
* Check PureClarity admin for campaign changes
* Verify feed data is current
* Test with different browsers

### Server-Side Troubleshooting

**Slow page loads:**

* Profile server-side processing time
* Optimize database queries
* Check server resource usage
* Review custom template efficiency

**Incorrect data display:**

* Verify Magento product data
* Check custom pricing logic
* Test template rendering
* Validate recommendation SKUs

## Related Configuration

### Zone Implementation

* [Adding Zones Using HTML](/integrations/magento/magento-2/adding-zones-html) - Direct template integration
* [Adding Zones Using Widgets](/integrations/magento/magento-2/adding-zones-widgets) - Widget-based placement

### Advanced Features

* [Server-Side Mode](/integrations/magento/magento-2/serverside) - Detailed server-side implementation
* [Product Attributes](/integrations/magento/magento-2/product-attributes) - Custom product data
* [Category Attributes](/integrations/magento/magento-2/category-attributes) - Category customizations

### Performance Monitoring

* [Dashboard Overview](/integrations/magento/magento-2/dashboard) - System performance metrics
* [Feed Status](/integrations/magento/magento-2/feed-status) - Data synchronization monitoring