Access query from router before page loads

[outer bridge]

How can I rewrite this function to remove the useEffect as I think its a little overkill?

 const router = useRouter()
  const page_size = 12
  const [page_num, setPageNum] = useState(0)

  const { data, isLoading, isError } = useQuery(
    ['nuevo-project', page_num, page_size],
    () =>
      fetcher(`/api/nuevo-project?page_num=${page_num}&page_size=${page_size}`)
  )

  useEffect(() => {
    if (router.query.page_num) {
      setPageNum(Number(router.query.page_num))
    }
  }, [router.query.page_num])

[hollow atlas]

you can use getserversideprops for access query before page load

also dont need getserversideprops just set useState bool and use that state as a condition for render your page

[loading, setLoading] = useState(true);

return (
<>
{
  loading ? 
    null
    :
    //page content
}
</>

and setLoading false when your data ready

[outer bridge]

oh... that is a very good idea