Hi,

I'm trying to add some security to our blog by checking for the JWT cookie before allowing users to "Load More" blog articles and "Search" because we're using PlanetScale and they bill by the amount of row reads. This feature will prevent the risk of bots being able to spam these buttons and drive up our server costs.

This is what the Blog page file looks like:

import { cookies } from 'next/headers';

export default function Blog() {
  // State Variables
  const cookieStore = cookies();
  const hasCookie = cookieStore.has('jwt');

  return (
    <div className={styles.background}>
      {/* Content Area */}
      <ContentArea hasCookie={hasCookie} />
    </div>
  );
}

When users logout the JWT is overwritten with one that instantly expires.

PROBLEM: Seems like this cookies function requires a hard reload to notice the change.

QUESTION: Is there anyway I can get this to work without a hard reload?