Newbie - Lifecycle Methods Client or Server

[jaybytez]

So trying to ramp up on the framework and new to React and Next.js.

We are looking at running our application as SSG with Fallback=true vs SSR. So I am trying to understand what runs on the server or does everything run on the server except for what is in the public folder (or built during build time and then ran as static assets).

I ask these questions just so I can be clear about a few situations:

1. Trying hooks for state management. useEffect works with localStorage.setItem only if I wrap localStorage it in a check to see if(typeof window !== 'undefined'). while useSt.ate in the Component doesn't work with localStorage.getItem (I get an error).
2. Then on logging side, I was messing with Winston logger. It worked fine but when I put it in the Component, it didn't work and Winston errored out because it needed the 'fs' library.
3. Since we are using SSG with fallback='true', need to support what happens if a URL is entered that doesn't resolve to a valid content item. How do we redirect when this decision is determined in getStaticPath. If getStaticPath doesn't return a valid path for content, we want to direct the user to another page.

So I think most of my confusion on these items is not clearly understanding where code is run and whether that depends on SSG vs SSR vs SSG w/ Fallback. Trying to bridge React lifecycle methods and where they operate in Next.js.

Hope I was able to explain it okay.

[Timer]

localStorage should be safe to use in useEffect without a typeof window check!

Regarding logging, you can only run Node.js-specific code in getStaticProps or getServerSideProps.

3: We're working on a first-class API for redirecting from getStaticProps, but you can do it manually with a HTML head meta tag for now.

[Gusterson]

Clarifying a point in my brain... When doing a fully static site export, wouldn't using localStorage in a useEffect hook only make that storage data available during build time and not available on the statically rendered site itself? Ie, if I want to keep track of some user interaction, won't that all need to be handled by front-end vanilla JS which is separate from Next/React?

Just trying to flesh out the difference between a fully "Exported" site vs a hybrid SSR/Static site.

[Timer]

Effects will run when a user loads a page, even if it was statically exported.

Static doesn't mean non-interactive!

[jaybytez]

Appreciate the details on logging and the HTML head tag / API for redirect. That's great. Because we are looking at using SSG with Fallback=true, so some pages will be built during runtime and we just want to make sure if somehow a url is requested that doesn't exist (since the 404 won't be thrown), that we can redirect a user to an error page.

On localStorage, I ask because I realized that the one page I am working with is actually SSR. And I am working through "The Road to React" book example on useState/useEffect hooks for storing a search field. When I run this page, I get an error that localStorage does not exist. It works if I convert that to js-cookie library and use the Cookie, but not when I use localStorage. I will change this page to Static to see if that makes a difference with regards to the localStorage:

const useSemiPersistentState = (key, initialState) => {
  const [value, setValue] = React.useState(localStorage.getItem(key) || initialState);

  React.useEffect(() => {
    if (typeof window !== 'undefined') {
      localStorage.setItem(key, value);
    }
    // Cookie.set('search', searchTerm);
  }, [value, key]);

  return [value, setValue];
};

const Summary = ({ data }) => {
  const [searchTerm, setSearchTerm] = useSemiPersistentState('search', 'React');