How to handle feature and permission-based authorization in Next.js without delaying initial render?

I’m building a multi-tenant SaaS application with Django Ninja as the backend and Next.js as the frontend. I’m running into a problem around handling RBAC permissions and org-level feature entitlements without causing bad UI behaviour.

Current setup

The app has a pre-defined set of permissions and features.
Each organization can:
- Create their own RBAC roles for members.
- Define their own plans (feature bundles) for members.
Hierarchy looks like: Platform → Org → Members.

Problem

For RBAC, I first tried fetching permissions/features from an API after login. But in Next.js, this caused a UX issue:

On initial render, the UI displayed all components/features.
Only after the API call resolved (or a manual refresh), the UI updated to hide restricted components.
This led to a flicker effect where users briefly saw components they shouldn’t.

To avoid this for RBAC, I moved the permissions into the JWT, so the frontend can instantly check them at page load. This works well, but I’m unsure if I should do the same for feature entitlements (since those are org-level and can change dynamically).

Question

Is it acceptable to also put feature entitlements in the JWT (and refresh the token on org/plan changes)?
Or is there a better pattern for preloading entitlements in Next.js so components render correctly on first load without flicker?
How do people usually handle this combination of RBAC (user-level) and feature flags (org-level) in a multi-tenant SaaS?

Key constraints

The UI should render correctly on first load (no flicker).
I don’t want to bloat JWTs unnecessarily.
I follow “trust but verify” → JWT is convenient for instant checks, but the backend still validates entitlements.