| import { useRouter } from 'next/router' | |
| import useSWR from 'swr' | |
| // This component is never mounted when you're in production mode. | |
| // Only when running in `NODE_ENV==='development'`. | |
| // It will reload the content every time the current page is focussed | |
| // (from being not focussed). | |
| export default function ClientSideRefresh() { | |
| const router = useRouter() | |
| useSWR( | |
| router.asPath, | |
| () => { | |
| // Remember, in NextJS, the `router.locale` is never including the | |
| // `router.asPath`. So we have to make sure it's always there | |
| // otherwise, after this hook runs, you lose that `/en` prefix | |
| // in the URL on the address bar. | |
| router.replace(`/${router.locale}${router.asPath}`, undefined, { scroll: false }) | |
| }, | |
| { | |
| // Implied here is that `revalidateOnFocus: true` which the default | |
| // and it means that the `useSWR` hook will make a listener on the | |
| // the Page Visibility API. | |
| // https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API | |
| // It effectively means that the callback of this hook will run every | |
| // time the browser window is put back to being visible. | |
| // The `revalidateOnMount` is crucial because it means that we don't | |
| // bother executing the hook callback when it was first mounted | |
| // because, naturally, the first time you mount it, it will not | |
| // need to refresh because it's as fresh as it gets already. | |
| revalidateOnMount: false, | |
| }, | |
| ) | |
| return null | |
| } | |