How do I prevent a static page from unauthorized ones?

[rozenonline]

I'm building a simple blog that has public posts and private posts.
The page for post view is using getStaticProps to populate post data

Now I want to prevent unauthorized ones to access the private posts.
I have researched about it but seems like it's impossible to implement so.

I've tried to redirect in the component as follows

useEffect(() => {
   const router = useRouter();
   if (!localStorage.getItem("accessToken")) {
    router.push("/");
   }
}, []);

It redirects in a flash but it still reveals the private post.
Also is revealed clearly in the view-source page.

I've been struggling on this for whole 2 days.
Is it really impossible?

[rozenonline]

What I've done for this is to use normal static page for the public posts and to use CSR (client-side rendering) for private posts since SEO is not relevant for privates.
I don't know if it is the best practice but this works fine.

export default const Post = ({ post }) => {
  const route = useRouter();
  if (route.isFallback) {
    return <div>Loading..</div>;
  }
  
  const { loading, error, data } = useQuery(GET_POST, {
    variables: { id: Number(route.query.id) },
    skip: post // skip if the data is already fetched by getStaticProps
  });

  if (loading) return "Loading...";
  if (error) return "Error!";

  const _post = post || data.post; // Use existing one from either getStaticProps or useQuery

  return (
    <div>
      <h1>{_post_.title}</h1>
    </div>
  );
};

export async function getStaticProps({ params }) {
.......
}

export async function getStaticPaths() {
.......... (fallback : true)
}