Skip to content
Get help on Slack

Discussion on implementing client-only routing in Next.js for an order tracking page.

14 replies
Last updated: Feb 24, 2021
(unrelated to sanity) How does one do client-only routing?
For example, I’m making an order tracking page and the service I have to use to pull this order can be relatively slow (~1-3 seconds). Instead of server-rendering this page I’d rather have this page behave more like a traditional client-side rendered page where there’s one static entry point and then the information comes down async via fetch (there is no SEO value either)

I know I can achieve this using query parameters or the hash but I’d rather use the path anyway.

Any ideas?
Feb 19, 2021, 3:22 AM
what’s stopping you from not using getStaticProps and doing your API calls client-side?
Feb 19, 2021, 1:31 PM
what’s stopping me is the entry point. like how do I tell next.js that this path exists and it should’t go to a 404 page?
Feb 19, 2021, 4:40 PM
Forced client side:
import dynamic from 'next/dynamic';

export default dynamic(async () => PageComponentYoudNormallyExportAsDefault, { ssr: false });
Feb 19, 2021, 6:51 PM
oh nice. is that documented anywhere?
Feb 19, 2021, 6:51 PM
Feb 19, 2021, 6:52 PM
that’s.. a smart hack 🙂
Feb 24, 2021, 3:59 PM
Although I still don’t understand why this isn’t enough? https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes
Feb 24, 2021, 4:01 PM
Created pages/[[...slug]].js with the following, deleted index.js, and it routes any page clientside without 404:
import dynamic from 'next/dynamic';
import { useRouter } from 'next/router';

export default dynamic(async() => DayAtTheSPA, { ssr: false });

function DayAtTheSPA () {
  const router = useRouter();
  let pathname = `/${router?.query?.slug?.join('/') || ''}`;
  return (
    <div>I am rendered at {pathname}</div>
  )
}
Feb 24, 2021, 4:19 PM
I actually went with something totally different. I’m using the rewrites in the next.js config to redirect all requests to this one page.

Although I still don’t understand why this isn’t enough? https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes
Unless I’m missing something, I believe the catch all routes still requires you to write a 
getStaticPaths
implementation. For more context, the page I’m writing is an order tracking page where there are thousands of orders. Even with ISR, pre-rendering those pages is not worth it so instead I’d rather client-side render them.
To make matters worse, the endpoint to get the order can take around 1-2 seconds so I’d rather not use traditional SSR. I’d rather show a CSR page first and asynchronously load the order info with a loading spinner.

I could achieve that with ISR and a fallback but I don’t really need to cache the results of the order confirmation page so CSR seems like the best route
Feb 24, 2021, 4:20 PM
this is what my re-write look like

        rewrites: () => [
            {
                source: '/order-tracking/(.*)',
                destination: '/order-tracking',
            },
        ],
Feb 24, 2021, 4:21 PM
user L
i liked the dynamic approach with SSR: false. it does the trick but I went with the re-writes because I think 
dynamic
code splits that part out of the page bundle when that’s not necessary
Feb 24, 2021, 4:24 PM
this page is exclusively for CSR so the page component driving it doesn’t need to be code split
Feb 24, 2021, 4:24 PM
np, always good to know alternate methods even if you dont intend on using it. Recentlly dug a 10yr old nugget out of memory for a project Im working on. Cheers!
Feb 24, 2021, 4:26 PM
i didn’t know it existed. love it!
Feb 24, 2021, 4:26 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?