Server Side Rendering
Frameworks like Next.js and Remix, render your react components on the server before shipping them to the client. Our React SDK does not offer support for server-side rendering at this moment. The work around is to prevent rendering on the server, and only render MagicBell on the client.
jsximport MagicBell, { FloatingNotificationInbox } from '@magicbell/magicbell-react';
export default function Index() {
return (
<nav>
{typeof window !== 'undefined' ? (
<MagicBell apiKey="..." userEmail="...">
{(props) => <FloatingNotificationInbox {...props} />}
</MagicBell>
) : null}
</nav>
);
}
Support
Please check our GitHub Issue Tracker or GitHub Discussions if you're experiencing issues that are not listed on this page.