How to prevent page wrapped with Protected route to render before authentication check

[bymoe]

I have a simple Protected Route for my pages that checks for authentication only on Client-side

const withProtectedVideoRoute = (Component) => {
  return () => {
    const router = useRouter();
    useEffect(() => {
      if (
        !isLoggedIn(router.query.key)
      ) {
        Router.push(
          `/video/assessment/[key]`,
          `/video/assessment/${router.query.key}`
        );
      }
    }, []);
    return <Component {...arguments} />;
  };
};

export default withProtectedVideoRoute;

The problem with this approach when you refresh the page the page renders for few milliseconds then the redirect happen because The redirect check is on useEffect. How to prevent page from rendering before checking?

If I try to remove the useEffect:

const withProtectedVideoRoute = (Component) => {
  return () => {
    const router = useRouter();
    if (
      !isLoggedIn(router.query.key) &&
      router.asPath !== `/video/assessment/${router.query.key}`
    ) {
      Router.push(
        `/video/assessment/[key]`,
        `/video/assessment/${router.query.key}`
      );
    }
    return <Component {...arguments} />;
  };
};
export default withProtectedVideoRoute;

I'll get Error: No router instance found. error, How to prevent this page from rendering on server?

Another suggestion I've got to do this:

const withProtectedVideoRoute = (Component) => {
  const router = useRouter();
  if (
    !isLoggedIn(router.query.key) &&
    router.asPath !== `/video/assessment/${router.query.key}`
  ) {
    Router.push(
      `/video/assessment/[key]`,
      `/video/assessment/${router.query.key}`
    );
    return null;
  }
  return <Component {...arguments} />;
};

export default withProtectedVideoRoute;

I'll get Invalid hook call, Hooks can only be called inside of the body of a function component because of useRouter.

Why it is so hard to make protected route with Next.js?