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?
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
J
what’s stopping you from not using getStaticProps and doing your API calls client-side?
Feb 19, 2021, 1:31 PM
J
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
J
Forced client side:
import dynamic from 'next/dynamic';
export default dynamic(async () => PageComponentYoudNormallyExportAsDefault, { ssr: false });Feb 19, 2021, 6:51 PM
J
oh nice. is that documented anywhere?
Feb 19, 2021, 6:51 PM
S
Feb 19, 2021, 6:52 PM
J
that’s.. a smart hack 🙂
Feb 24, 2021, 3:59 PM
J
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
S
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
J
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.
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
Although I still don’t understand why this isn’t enough? https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routesUnless I’m missing something, I believe the catch all routes still requires you to write a
getStaticPathsimplementation. 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
J
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 dynamiccode splits that part out of the page bundle when that’s not necessary
Feb 24, 2021, 4:24 PM
J
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
S
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.