Next.js Discord

Discord Forum

How to correctly lazy load Intercom (3rd party package)?

Answered
Capple posted this in #help-forum
Open in Discord
Avatar
CappleOP
Hello,
I'm having some trouble lazy loading Intercom to my application which is hurting the performance of my page.

I tried lazy loading it using dynamic import and the import() function, as per docs, but It didn't seem to make any difference. What is the correct way to lazy load it? I'm using it in the main layout of my application.

IntercomClient.tsx
'use client'

import Intercom from '@intercom/messenger-js-sdk'

export default function IntercomClient() {
  Intercom({
    app_id: 'ABC123',
  })

  return null
}
Image
Answered by B33fb0n3
The whole component must be in a suspense, yes.

Wrong:
IntercomClient.tsx
'use client'

import Intercom from '@intercom/messenger-js-sdk'

export default function IntercomClient() {
  Intercom({
    app_id: 'ABC123',
  })

  return<Suspense fallback={<SomeFallback/>}>null<Suspense/>
}


Right:
…
  return return<Suspense fallback={<SomeFallback/>}>

<IntercomClient/>
<Suspense/>
}
View full answer

7 Replies

Avatar
@B33fb0n3 Did you tried it with a suspense boundary around the whole component?
Avatar
CappleOP
I'll give it a try. So I'll only wrap the IntercomClient in the suspense in my root layout?
Avatar
@Capple I'll give it a try. So I'll only wrap the IntercomClient in the suspense in my root layout?
Avatar
B33fb0n3
The whole component must be in a suspense, yes.

Wrong:
IntercomClient.tsx
'use client'

import Intercom from '@intercom/messenger-js-sdk'

export default function IntercomClient() {
  Intercom({
    app_id: 'ABC123',
  })

  return<Suspense fallback={<SomeFallback/>}>null<Suspense/>
}


Right:
…
  return return<Suspense fallback={<SomeFallback/>}>

<IntercomClient/>
<Suspense/>
}
Answer
This is pretty much all I can do right? I still get the "Some third-party resources can be lazy loaded with a facade" warning in the pagespeed insights, but the blocking time is down significantly.
Avatar
@Capple This is pretty much all I can do right? I still get the "Some third-party resources can be lazy loaded with a facade" warning in the pagespeed insights, but the blocking time is down significantly.
Avatar
B33fb0n3
Yea, you can try to import it with disabled SSR (like you tried once, but now in combination with suspense), but I don’t think that would do so much. The „third parties“ also want to be loaded somewhen
Avatar
B33fb0n3