frontloadMeta.serverRendered false on webkit

[matthewlein]

Hello,

I have a very odd situation going on where a certain page is refetching (re-frontloading) the data after page load, but only on webkit browsers (safari and chrome). Debugging a bit logging out console.log(frontloadMeta.serverRendered); I see the server always logs true (3 times), safari/chrome log false always (also 3), and firefox logs true once.

These are redux thunks

const { frontloadMeta } = useFrontload('ContentListContainer', async () => {
    console.log('frontloading');
    await Promise.all([
      dispatch(fetchAllArticles()),
      dispatch(fetchOtherVideos()),
      dispatch(fetchAllVideos()),
    ]);

    return true;
  });

The frontload data is there in the source in all browsers.

window.__FRONTLOAD_DATA__={"ContentListContainer":true}

And generally frontloading works everywhere else as expected. Logging the same thing in other places results in frontloadMeta.serverRendered true everywhere, as you'd expect. Places that use similar redux thunks in Promise.all look fine. Its a real mystery...

Any ideas?

[matthewlein]

I've dug into this for hours and haven't narrowed anything down too much yet.

Breakpointing here:

react-frontload/src/index.tsx

Lines 408 to 416 in a206364

	const frontloadState = React.useContext(FrontloadContext)!
	const serverRendered = frontloadState.isFirstRender()
	const pendingInitial = serverRendered
	? !frontloadState.hasFrontloadRunOnServer(key)
	: true
	const data = serverRendered
	? frontloadState.getFrontloadServerRenderedData(key)
	: undefined
	const error = !!data?._____FRONTLOAD_____isServerRenderError

I can see that in Firefox frontloadState.serverRender.cache is { ContentListContainer: true } as expected, where on chrome it is empty {}

Server log show it rendered, and the page loads with content preloaded.

react-frontload server render trace

1 frontloads ran in 3 render passes
  - ContentListContainer

∙ Render pass 0           |  1 total, 1 new
  - ContentListContainer  |  new

∙ Render pass 1           |  1 total, 0 new
  - ContentListContainer  |  cached

∙ Render pass 2
  - final render pass, no frontloads ran
___________________________________

In another case, reordering the dispatches in Promise.all resulted in serverRendered true.