JWT public key security

I have backend and frontend applications. On the backend side I'm using RSA private + public keys to issue JWTs. I understand that the private key should never be shared, but what about public key?

I'm using next.js for the frontend and I want to render or NOT to render some components based on user's role within the JWT. Suppose that I have some kind of <AdminNavigationBar/> and I want to render it only if user's role is ADMIN. Now I have two options and the first one is exactly about my question.

1. Include public key into frontend and verify JWTs on client side. But I don't understand if it's safe to expose public RSA key to be anyhow visible to someone else.
2. Create separate /endpoint on the backend side for JWT verification and call it every time I need to verify JWT to render/not to render some components.

*Note: it's important to understand that I'm not talking about regular API endpoints to get any kind of data. In this case I would just return 403 and public key will be used only on the backend side (and therefore not exposed). I'm talking about frontend only.

I ended up to this:

• On the frontend side check if there's JWT with required role (no verification, so it's fast)
• If yes, then I'm calling separate /endpoint implemented on the backend to verify that JWT is valid, not expired and contains required role.
• If backend verified that everything is okay then I'm rendering this on UI.

It's probably bad approach (because even if I'm an admin I need to wait for additional request to be finished) but it works. There is a mention about server side rendering in the comments but I didn't have enough time to invest into researching & implementing this even though it's probably the way to go.