Синхронизация токена между сервером и клиентом

Здраствуйте! Делаю сайт на Next.JS. На сайте есть 3 роли: Admin, Guest и User. Эти роли сохраняются в токене ( если Guest, то нету токена самого ), который доступен в httpOnly куки. В чём собственно проблема: Есть главная страница, которая для каждой роли разная. То есть, если ты гость, то там призыв к регистрации, если ты админ - админ компонент, если пользователь - пользовательский компонент. Так вот. Передаю, отображаю, но тут и появляется проблема: мне нужна роль для UI, что бы он менялся в соответствии с ролью, а это значит, что если роль меняется, то нужно немедленно поменять UI без обновления страницы. Тут я внедряю Redux, но и с ним проблема: нельзя доверять ему важную информацию, ибо состояние Redux легко подменить. Прошу, помогите решить это. Надо быстрее закончить сайт, а я на таком застрял.

Предоставляю код: Главный серверный компонент страницы

//! SSR

//@ Modules
import { cookies } from 'next/headers'

// @Components
import HomePageByRole from "./HomePageByRole"

//@ Services
import getRoleFromToken from '@services-api/getRoleFromToken'

export const metadata = {
  title: 'Головна сторінка',
  description: 'Учень переглядає свій прогрес, вчитель — усіх учнів, а гість отримує запрошення зареєструватися.',
}

const Home = async () => {
    const cookiesData = await cookies()
    const jwtToken = cookiesData.get('jwtToken')?.value

    // if (jwtToken) {
    //  const role = await getRoleFromToken(jwtToken)
    
    //  return <PanelClient role={role}/>
    // }
    
    const role = await getRoleFromToken("1234567890")

    return (
        <>
      <h1 className="sr-only">
                Головна сторінка сайту Phys&Math education
            </h1>
      <p className="sr-only">
        Створіть акаунт або увійдіть у існуючий, щоб отримати доступ до завдань
      </p>

      <HomePageByRole/>
    </>
    )
}

export default Home

Клиентский компонент главной страницы:

"use client"

//@ Modules
import { useSelector } from "react-redux"

//@ Components
import NotRegist from "@components/Home/NotRegist"

const HomePageByRole = () => {
    const effectiveRole = useSelector((state: any) => state.roles)

    let component

    switch (effectiveRole) {
        case "ADMIN":
            component = <h1>This is admin</h1>
            break

        case "USER":
            component = <h1>This is user</h1>
            break

        default:
            component = <NotRegist/>
            break
    }

    return component
}

export default HomePageByRole