Get help on Discord

Client-side routing without server-side rendering in Next.js

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?
AI Update

This question is outside the scope of the Sanity community - it's about general client-side routing patterns rather than Sanity-specific functionality. You'll likely get better answers in a framework-specific community like:

  • Next.js Discord/GitHub Discussions if you're using Next.js
  • React subreddit or Reactiflux Discord if you're using React Router
  • Stack Overflow with appropriate framework tags

That said, if you're building an order tracking system and considering whether Sanity would be a good fit for storing and managing order-related content (like tracking statuses, shipping information, or customer communications), feel free to ask! Sanity can work well for content-heavy aspects of e-commerce systems, though transactional order data typically lives in dedicated e-commerce platforms or databases.

Good luck with your order tracking page!

Show original thread
14 replies
what’s stopping you from not using getStaticProps and doing your API calls client-side?
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?
Forced client side:
import dynamic from 'next/dynamic';

export default dynamic(async () => PageComponentYoudNormallyExportAsDefault, { ssr: false });
oh nice. is that documented anywhere?
that’s.. a smart hack 🙂
Although I still don’t understand why this isn’t enough? https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes
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>
  )
}
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
this is what my re-write look like

        rewrites: () => [
            {
                source: '/order-tracking/(.*)',
                destination: '/order-tracking',
            },
        ],
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
this page is exclusively for CSR so the page component driving it doesn’t need to be code split
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!
i didn’t know it existed. love it!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?