The use of window..__INITIAL_DATA__

[GusYin]

Hi,

First of all, thanks for sharing the great article.

This is more of a question rather than an issue.

The example app given, only the initial render happens on the server side, window.INITIAL_DATA will never get updated again after client pickup (hydrate). In the subsequent client navigation, all renderings happen on the client side.

If the initial url starts at "home" route, the window.INITIAL_DATA will always be null (in fact, both window.INITIAL_DATA and serverDate will be null) because home route does not have a fetchInitialData prop. So all the subsequent navigations are working fine.

So if I type in "/popular/all" in my address bar, (or do a hard load refresh at this route), it would be first initial render which happens on server. Server fetches all languages and assigns results to window.INITIAL_DATA. When I navigate to "popular/javascript", which is client render, in the below Grid component code, the repos will be set to all languages, therefore fetchNewRepos flag will be always false. In the useEffect dep array, even though it will rerun when ID changes say from "all" to "javascript". However, fetchInitialData will never get called because fetchNewRepos is false.

Is my understanding correct?

Cheers
Yini

const [repos, setRepos] = React.useState(() => {
    return __isBrowser__
      ? window.__INITIAL_DATA__
      : data
  })

const fetchNewRepos = React.useRef(
    repos ? false : true
  )