N
Novu•4w ago
Kuoun

Fallback on server rendering

Hello, I'm trying to add the Inbox from @novu/react into my app, which uses server-rendering through Tanstack Start. I noticed that the Inbox is client-only and won't render anything on the server. I would like to provide a fallback on the server to display a simple bell icon in the initial HTML. However, this seems to be more problematic than expected. Since Inbox does not render its children on the server, I need to wrap Inbox with tanstack router ClientOnly to provide a fallback icon. This creates another issue though, as components wrapped in ClientOnly re-render multiple times while a response is streamed from the server. For large server-rendered pages, this can amount to 20 to 30 re-renders of Inbox, each of which apparently triggers an API call to api.novu.co/v1/inbox/session. Eventually, this leads to rate limit 429 errors. I don't see a great solution to this problem right now besides accepting the icon not being present on initial render. Did I miss something?
2 Replies
Kuoun
KuounOP•4w ago
Slightly hacky but I might have found a workaround: use Inbox side by side with ClientOnly and only provide a fallback to ClientOnly: 
<>
  <ClientOnly
    fallback={
      ...
    }
  />
  <Inbox/>
</>
<>
  <ClientOnly
    fallback={
      ...
    }
  />
  <Inbox/>
</>
Pawan Jain
Pawan Jain•3w ago
@Kuoun Thanks for sharing the issue and possible fix

Did you find this page helpful?