Best Practices

Guidelines for using the Bynder DAM SDK efficiently in production.

Performance

• Use BynderDamNextImage in Next.js projects for image optimization.
• Use loading="lazy" for below-the-fold images.
• Prefer optimized derivatives where available to reduce payload size.
• Import only the components you need to keep bundle size small.

Styling

Pass standard HTML attributes and class names directly to SDK components:

<BynderDamImage
  asset={asset}
  alt={asset.name}
  className="rounded-lg shadow-md"
  width={400}
  height={300}
/>

Error Handling

Keep rendering resilient by handling missing/invalid data paths explicitly.

For full strategies and patterns, see:

• Error Handling

Data Parsing

When consuming field values from different Sitecore contexts, normalize them first:

const asset = parseBynderField(fieldValue)

This helps keep your components format-agnostic across SitecoreAI, Content SDK, and legacy XP/XM field values (<asset><![CDATA[{"type":"Assets",...}]]></asset>).