NextJS 13 App Router GSAP Template

[Deallie_Digital]

Hello All

 

When running performance insights with Chrome I am getting these details using the NextJs App Router, but in NextJs Pages Router everything works fine. Can someone please provide insight on how to properly load GSAP + Shockingly with the App Router or does anyone have a NextJS 13 App Router Template?

 

Thanks! 

[Rodrigo]

Hi,

 

This is the only template we have so far using the app router:

https://stackblitz.com/edit/nextjs-ysf649?file=README.md

 

When working with Next app router is a good practice to register ScrollTrigger and ScrollSmoother plugins inside the useLayoutEffect/useEffect hooks.

 

I never ran performance insights so I couldn't tell you about it honestly, but the fact that GSAP's tick is considered one of the longest functions certainly seems fishy to me TBH.

 

As for loading GSAP IDK what you mean about that, you just import GSAP in the files you need them and same with the plugins. If you have a main layout that can be used as a client component, then maybe register all the plugins in a single entry file would be a good approach as far as I can tell.

 

Hopefully this helps.

Happy Tweening!

[Deallie_Digital]

Thanks! When loading, I was talking about Streaming UI with GSAP imports. I wrapped the components in Suspense which improved performance

[Rodrigo]

Mhh... what exactly is Streaming UI? I googled it and the closest thing I found was this:

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

 

If so, then the approach of using Suspense seems to be the way to proceed.

 

Happy Tweening!