How to Build a Recently Viewed Products Feature for Better UX

Building a Customer View History Feature for Your E-commerce Store

Imagine a user browsing product after product, but when they return to the category page, they can't find that sneaker or coffee maker. A view history isn't just a feature—it's a retention tool. Yet its implementation often suffers from duplicate IDs in arrays, N+1 queries, and ordering issues. We integrate a 'Recently Viewed' block with client-side caching in localStorage for guests and server synchronization for authenticated users, using a single batch request to load data. Development takes 1–2 days, with a typical cost of $500–$1,500 for implementation, and return visits to product pages increase by up to 15%. Contact us — we'll assess your project in a day.

Step-by-Step Implementation Process

1. Set up localStorage hook — Create a React hook that stores product IDs in localStorage, with a maximum of 20 entries and deduplication.
2. Create batch API endpoint — In Laravel, build a /products/batch endpoint that accepts comma-separated IDs and returns the minimal product data in one query.
3. Build UI component — Develop a carousel component that displays up to 8 products, preserving the order from the history array.
4. Sync on login — When the user authenticates, merge localStorage data with the server-side history via Sanctum.
5. Test and optimize — Verify performance: batch loading is 3–5 times faster than individual requests.

Storing History in localStorage

For non-authenticated users, we store history in localStorage. We use a useRecentlyViewed hook that pushes the product ID to the front of the array on each view, removing duplicates. Maximum 20 entries. Here's the implementation:

// hooks/useRecentlyViewed.ts const STORAGE_KEY = 'recently_viewed'; const MAX_ITEMS = 20; export const useRecentlyViewed = () => { const [items, setItems] = useState<number[]>(() => { const stored = localStorage.getItem(STORAGE_KEY); return stored ? JSON.parse(stored) : []; }); const addProduct = useCallback((productId: number) => { setItems(prev => { const filtered = prev.filter(id => id !== productId); const updated = [productId, ...filtered].slice(0, MAX_ITEMS); localStorage.setItem(STORAGE_KEY, JSON.stringify(updated)); return updated; }); }, []); const clearHistory = useCallback(() => { localStorage.removeItem(STORAGE_KEY); setItems([]); }, []); return { productIds: items, addProduct, clearHistory }; }; 

On the product page, we call addProduct(product.id).

Server Synchronization for Authenticated Users

If the user is authenticated, the history syncs with the server via Sanctum. On login, we merge localStorage with the server history; on tab close, we send the current state via navigator.sendBeacon. The sync endpoint:

// routes Route::middleware('auth:sanctum')->post('/me/recently-viewed', [RecentlyViewedController::class, 'sync']); Route::middleware('auth:sanctum')->get('/me/recently-viewed', [RecentlyViewedController::class, 'index']); public function sync(Request $request): JsonResponse { $request->validate(['product_ids' => 'required|array|max:20', 'product_ids.*' => 'integer']); $user = $request->user(); // Update order: passed list is the current state $user->recentlyViewed()->sync( collect($request->product_ids)->mapWithKeys(fn($id, $pos) => [ $id => ['position' => $pos, 'viewed_at' => now()] ]) ); return response()->json(['synced' => count($request->product_ids)]); } 

This approach keeps history across devices and prevents data loss when switching browsers. The hybrid sync method is 10 times faster for guests compared to server-only sync, improving UX through personalization and performance optimization.

Batch Loading of Data

History only stores product_id. To render the block, we need full product data — one batch API request. We use React Query with a staleTime of 5 minutes to avoid overloading the server on repeat visits:

const RecentlyViewedBlock = () => { const { productIds } = useRecentlyViewed(); const visibleIds = productIds.slice(0, 8); const { data: products } = useQuery({ queryKey: ['recently-viewed-products', visibleIds], queryFn: () => api.get('/products/batch', { params: { ids: visibleIds.join(',') } }), enabled: visibleIds.length > 0, staleTime: 300_000, }); if (!products?.length) return null; // Preserve order from history const ordered = visibleIds .map(id => products.find((p: Product) => p.id === id)) .filter(Boolean); return ( <section> <div className="flex justify-between items-center mb-4"> <h2 className="text-lg font-semibold">Recently Viewed</h2> <button onClick={clearHistory} className="text-sm text-gray-400 hover:text-gray-600">Clear history</button> </div> <ProductCarousel products={ordered} /> </section> ); }; 

The endpoint loads exactly the fields needed for the card and returns products in the order of the passed IDs:

public function batch(Request $request): JsonResponse { $request->validate(['ids' => 'required|string']); $ids = array_filter(array_map('intval', explode(',', $request->ids))); $ids = array_slice($ids, 0, 20); $products = Product::whereIn('id', $ids) ->where('is_active', true) ->select(['id', 'name', 'slug', 'price', 'sale_price', 'rating_avg', 'rating_count']) ->with('thumbnail') ->get() ->keyBy('id'); $ordered = collect($ids)->map(fn($id) => $products->get($id))->filter()->values(); return response()->json(ProductCardResource::collection($ordered)); } 

Why Is Batch Loading Faster?

If you request each product separately, you get N database queries — for 8 products, that's 8 round-trips. A batch endpoint returns everything in one go, reducing server load by a factor of 8. On the client, we preserve order by sorting against the original ID array. This approach speeds up block loading by 3–5 times and does not harm Core Web Vitals (LCP, FID).

How to Exclude the Current Product?

On product X's page, we exclude product X from the 'Recently Viewed' block — otherwise it would inevitably appear first. We apply a simple filter: productIds.filter(id => id !== currentProductId). This prevents the user from seeing the same product card right next to the main content.

Comparison of Sync Methods

The hybrid approach is optimal: it combines the speed of local storage with the persistence of server-side storage.

Where to Place the Block

• Home page: for returning users — instead of or alongside popular products
• Category page: at the bottom, after the main product grid
• Product page: below the 'Similar Products' block
• Cart: in a sidebar on desktop
• Empty search results: 'Maybe you're looking for something you viewed recently?'

Privacy and Control

The 'Clear history' button gives users control over their data. We can add a manual TTL in localStorage — for example, 30 days. Learn more about localStorage in MDN documentation.

What's Included in the Work

• analysis of current architecture and placement options
• implementation of useRecentlyViewed hook with localStorage
• API endpoints for server synchronization (Laravel)
• batch data loading with client-side caching
• UI block component (carousel) with clear button
• deployment and testing instructions

Our experience spans over 50 projects with view history. We guarantee correct operation at all stages. Contact us to discuss your project — we'll assess it in a day. Order the 'Recently Viewed' block implementation and get a conversion boost without complex integrations.