cacheAjaxRequests window.snapStore only of first crawled page

[hesedel]

It seems that window.snapstore is only available on the first crawled page. Is this how it is supposed to be? Or is something wrong with my setup?

[stereobooster]

Depends on what do you mean. snapstore provides data for the currently loaded page to speed up initial load, as soon as React app loaded it works as client application e.g. if you navigate to next page, which needs another data your application will load it using AJAX the same way as it would do without prerendering.

[hesedel]

I'm loading data for the main navigation, so i was hoping to cache this so that the nav is immediately available and just updated with ajax if anything changed after the build. And so I was hoping to use the data stored in snapStore so that the component could immediately display it.

I was hoping to achieve this with any page initially accessed.

[stereobooster]

What you described is supported. If you have problems with it post reproducible demo of the error

[hesedel]

Just to clarify how the crawler works, the crawler also just clicks on the link and if the link is, for example, loaded via react-router, then the component is already loaded and doesn't execute the componentDidLoad which calls the ajax request?

[stereobooster]

It is not clicking to URLs, it loads each url by navigating browser to it. React in the browser works as expected, everything called appropriately. You can add console.log to any callback (like componentDidLoad) to see if it is called or not or what it returns

[hesedel]

The ajax call seems to be working on every page crawl. I'll fork my repo and share it with you, if it's okay and would probably make things easier.

I also have an unrelated issue where react-snap is causing an error when I execute yarn test and it's gone when I yarn remove react-snap. It's also weird because this issue is also fine when I remove .git directory but have react-snap installed.

[hesedel]

Here's the repo: https://github.com/hesedel/frontend-public.git

you can see when you run yarn build that snapStore is only in /build/404/index.html
the component with the ajax request is in src/components/layout/Nav.js

[stereobooster]

Ok I know what the issue. cacheAjaxRequests relies on content-type header to detect JSON requests to store it (it is only stores JSON responses). On the first request it goes to the server and content-type is present:

http://localhost:45678/api/layout/nav.json application/json; charset=UTF-8

but all consequent requests are served through ServiceWorker without content-type (is it a bug in Chromium?) from cache.

Possible solutions:

• workaround, try to detect JSON by extension
• disable browser cache
• forcefully disable ServiceWorker in react-snap. Maybe with incognito mode?
• write warning in the readme about it if (navigator.userAgent !== 'ReactSnap') registerServiceWorker();

[hesedel]

Oh okay so it was the serviceworker? I wouldn’t expect that as i see in chrome console that service worker cannot be installed because localhost is not on an https protocol unless react-snap is able to.

So for now my actionable point would be your last suggestion?

Thank you

[stereobooster]

I thought it was service worker, but appears it is browser cache. I'm preparing fix

[stereobooster]

Fixed in v1.14.0. you need to add "puppeteer": { "cache": false } to the reactSnap config

[hesedel]

Cool! Thanks! Cheers!