fix: remove useRef from ProductCard for full SSR compatibility

- Remove unnecessary useRef that was preventing SSR usage
- Change default seed from Date.now() to 0 for SSR consistency
- Add SSR documentation with seed usage guidelines
- All 58 tests still passing (32 client + 26 SSR)

BREAKING: Vector graphics now default to seed=0 instead of Date.now()
when no seed is provided. Always provide an explicit seed for production.

Fixes: useRef only works in Client Components error in Next.js

Author: Fergus Bisset

src/components/ProductCard/ProductCard.tsx

@@ -525,13 +525,13 @@ export const ProductCard: React.FC<ProductCardProps> = ({
 	elevated = true,
 	imageAspectRatio = 1.5,
 }) => {
-	const cardRef = React.useRef<HTMLDivElement>(null);
-
 	// Generate or use provided shapes
+	// Note: For SSR compatibility, always provide a seed if using graphic images
+	// to avoid hydration mismatches from Date.now()
 	const shapes = React.useMemo(() => {
 		if (image?.type === "graphic") {
 			if (image.shapes) return image.shapes;
-			const seed = image.seed ?? Date.now();
+			const seed = image.seed ?? 0; // Default to 0 for SSR consistency
 			const imgTheme = image.theme ?? theme;
 			return generateVectorShapes(seed, imgTheme);
 		}
@@ -653,7 +653,6 @@ export const ProductCard: React.FC<ProductCardProps> = ({
 
 	return (
 		<div
-			ref={cardRef}
 			className={cardClasses}
 			style={style}
 			onClick={onClick || href ? handleCardClick : undefined}

src/components/ProductCard/README.md

@@ -388,6 +388,43 @@ Themes must be one of the predefined values. To use custom colors, apply them vi
 />
 ```
 
+## Server-Side Rendering (SSR)
+
+ProductCard is fully SSR-compatible and can be imported from the `/ssr` barrel:
+
+```tsx
+import { ProductCard, ProductCardThemeEnum } from '@fergusbisset/nhs-fdp-design-system/ssr';
+```
+
+### Important SSR Considerations
+
+When using vector graphics with SSR (Next.js, Remix, etc.), **always provide a seed value** to ensure consistent rendering between server and client:
+
+```tsx
+// ✅ Good - Consistent SSR
+<ProductCard
+  image={{
+    type: 'graphic',
+    seed: 12345,  // Same shapes on server and client
+    theme: 'blue'
+  }}
+  title="My Product"
+  description="Description"
+/>
+
+// ❌ Avoid - Hydration mismatch
+<ProductCard
+  image={{
+    type: 'graphic',
+    // No seed = defaults to 0, but shapes change if seed is added later
+  }}
+  title="My Product"
+  description="Description"
+/>
+```
+
+**Why this matters**: Without a seed, the shape generation defaults to `0` for SSR consistency. If you later rely on dynamic seeds or change the implementation, it could cause hydration mismatches. Always be explicit with your seed values.
+
 ## Contributing
 
 When contributing to ProductCard:
@@ -396,7 +433,7 @@ When contributing to ProductCard:
 2. Maintain accessibility standards
 3. Update documentation for new props
 4. Test across major browsers
-5. Ensure SSR compatibility
+5. Ensure SSR compatibility (no client-only hooks like useRef)
 
 ## License