Disabling pre-rendering?

[jmar777]

To be honest I'm not sure if I'm even asking for the right thing here, but I'm having trouble feeling confident in specifying what logic runs where (with respect to client vs. server-side rendering).

I'm using [email protected], and I have a straight-forward scenario where I simply want to grab a query string variable and then pass it off to an API request, and I only want to do this client-side (the site is to be statically generated and thrown into an S3 bucket).

Here's a simplified example of the page:

import React, { useEffect } from 'react';
import { useRouter } from 'next/router';

const Page: React.FC = () => {
  // this line runs at build time...
  const { query: { itemId } } = useRouter();

  useEffect(() => {
    // this block only runs client-side, which is what I want, but on page load it
    // initially has the undefined `itemId` generated at build-time... I don't really
    // understand how that build-time value gets hydrated and used here in
    // the client?
  }, []);

  return (<div>halp</div>);
};

export default Page;

As straight forward as this requirement is, I feel a bit lost after browsing the documentation:

1. getStaticProps is out, because it's a server-side, build-time operation.
2. getServerSideProps is out because it's a server-side, per-request operation.
3. getInitialProps seems out because the documentations recommends using one of the above two options.
4. But by excluding getInitialProps, I now qualify for ASO, so my useEffect hook again initially executes with build-time value for itemId (undefined`).
5. If deciding to ignore the doc's recommendation and adding a dummy getInitialProps to opt-out of ASO, the page now requires SSR, and can no longer be statically hosted.
6. Googling around produces some workarounds involving isMounted flags, dynamically importing modules with this kind of logic, etc., but... I feel like I have to be missing something fundamental by the time I get here?

I guess to turn this into specific questions:

1. Why does the client-side execution of the useEffect hook initially receive the undefined item from useRouter()?
2. More generally speaking, how does one build a statically generated site with Next.js that includes dynamic, client-side logic without relying on boilerplate logic to verify that we're running in the only target environment for the app (i.e., the client)?

[jmar777]

Update: looks like the issue I'm running into may have more to do with how useRouter handles initial page load: #8259. 😩

[Timer]

Yup! Your best bet would be to voice support for the .ready property on the router.

[jmar777]

Will do! And thanks so much for the tireless work on this project. I admit this one had me a bit flustered, but I'm extremely grateful for Next.js and everyone who dedicates their time and efforts to it. :)

[ingoclaro]

take a look at swr which is the recommended library to use for client side fetching.
In any case you can still use getInitialProps(ctx) if you want, that the other methods are recommended doesn't mean you can't use this one. For client only you can check that ctx.req is undefined.

edit: have you tried: useEffect( () => ... , [itemId]) ?

[jmar777]

Thanks for the reply. Unless I'm missing something (which is very possible), getInitialProps() forces SSR and breaks the ability to do a fully static deploy, though?

[ingoclaro]

true, in that case you want swr, will make life easier