Sauce embeds are delivered via a JavaScript script tag. When that script runs in the browser, it injects HTML into the page and calls Sauce APIs to fetch the latest content. In a Next.js environment, this means the embed should be mounted from a Client Component, because it depends on browser-side JavaScript, DOM access, and script execution.
Important: even if your Next.js site is otherwise server-side rendered, this approach can still work for you. Next.js allows you to introduce Client Components within an SSR application, which means browser-dependent functionality like a Sauce embed can still be mounted and run correctly on the client side where needed.
In practical terms, the goal is to:
render a placeholder container for the embed
load the Sauce script on the client
let the script rebuild the embed when the component mounts
clean up the container when the component unmounts
This is especially important in Next.js because shared layouts in the App Router preserve state and do not re-render on navigation. For that reason, if you want a Sauce embed to initialize fresh as users move between pages, it is usually best to mount it in a page-level Client Component rather than a shared layout.
Recommended approach
Use a Client Component and inject the Sauce script inside useEffect:
'use client';
import { useEffect, useRef } from 'react';
type SauceEmbedProps = {
src: string;
containerId?: string;
};
export default function SauceEmbed({
src,
containerId = 'sauce-embed',
}: SauceEmbedProps) {
const containerRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const container = containerRef.current;
if (!container) return;
// Clear any previous embed output before re-initialising
container.replaceChildren();
const script = document.createElement('script');
script.src = src;
script.async = true;
script.className = 'snapppt-widget';
container.appendChild(script);
return () => {
script.remove();
container.replaceChildren();
};
}, [src]);
return <div id={containerId} ref={containerRef} />;
}
Example Usage
import SauceEmbed from '@/components/SauceEmbed';
export default function Homepage() {
return (
<SauceEmbed src="https://app.addsauce.test/widgets/widget_loader/abc-123/sauce_homepage.js" />
);
}
Troubleshooting
The embed works on a full page refresh, but not after navigating within the site
This usually means the script is not being re-initialised on client-side navigation. Mounting the Sauce embed in a page-level Client Component is usually the best fix.
The embed renders twice during development
React development mode may run effects more than once to help surface side-effect issues. A cleanup function that removes the old script and clears the container helps keep the component predictable during development and navigation.
The script appears in the DOM, but no embed shows
Check that the src value is the exact Sauce embed URL you intend to use, and make sure the component is running on the client rather than in a Server Component.
If you need help adapting this pattern to your Next.js setup, please contact Sauce Support and we’ll help you get everything working.