https://www.npmjs.com/package/astro-clerk-auth
Im wondering if its possible to load clerk only on certain pages, right now its adding 500kb bloat globally.
#Possible to load clerk only on certain pages?
next moon
heady pawnBOT
Hi @next moon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro's architecture allows you to control the loading of JavaScript on a per-component basis. This means you can import and use a package like astro-clerk-auth only on the pages where it's needed. This is achieved through a technique known as partial hydration (https://astro.build/blog/introducing-astro#how-astro-works) which is built into Astro itself.
However, if you're experiencing that astro-clerk-auth is adding bloat globally, it might be due to how you're importing or using it in your project. Make sure you're not importing it in a shared layout or a global script that gets included on every page.
Here's an example of how you can use a package only on certain pages:
---
// Import the package only in the components where it's needed
import { getSession } from 'astro-clerk-auth/server';
const session = await getSession(Astro.request);
---
{ session ? ( <p>Welcome {session.user?.name}</p> ) : ( <p>Not logged in</p> ) }
This code should be placed in the Astro components corresponding to the pages where you want to use astro-clerk-auth. This way, the JavaScript for astro-clerk-auth will only be loaded on those pages.
If you're still experiencing issues, it might be due to a bug or a limitation in Astro or the astro-clerk-auth package. In such cases, it would be best to raise an issue in the Astro GitHub repository (https://github.com/withastro/astro/issues) or the repository of the astro-clerk-auth package.
Sources:
- Astro: Ship Less JavaScript (https://astro.build/blog/introducing-astro#how-astro-works)
- Astro Authentication Guide (https://docs.astro.build/en/guides/authentication#usage-1)
- Astro GitHub Issues (https://github.com/withastro/astro/issues)