Closed joaopedrodcf closed 5 years ago
The problem is that service worker uses index.html as fallback, that is why you see index.html on refresh, you need to change it to use 200.html, which is index.html before prerendering. Or you can turn off service worker.
UPD: this is what you need to customize service worker https://github.com/facebook/create-react-app/issues/5359
Hi again @stereobooster thanks for the response and documentation really helped me using react-snap as I wanted! After that post, I found this: https://github.com/facebook/create-react-app/issues/5673#issuecomment-438654051 where @karannagupta tells how he configured the workbox service worker without ejecting.
I tried it, and it worked, I only changed as you said the index.html
to 200.html
like this on the sw.js
that the guy talked about in his comment:
/* custom cache rules */
workbox.routing.registerNavigationRoute('/200.html', {
blacklist: [/^\/_/, /\/[^\/]+\.[^\/]+$/]
});
Thank you so much for your support! 👍
Also a side question the only way for react-snap to work is having the routes ending with /
?
Also a side question the only way for react-snap to work is having the routes ending with / ?
Tell me more, I'm not following
As this is being referenced in another issue and the main issue was solved gonna close it.
The issue with the same problem is #386
Bug Report
Current Behavior I have a project that uses Create react app (CRA 2) that can be found here: https://github.com/joaopedrodcf/yokaidex and I have been trying to add
react-snap
to improve the performance of the first render.Maybe also important is that this is a PWA and uses
serviceWorker.register();
from the CRA 2.What's happening in the site that you can see in here https://5ccf2032e1aef600085709d4--yokaidex.netlify.com is that if you refresh the page in a route different than the root one it always shows the root prerender 😢
Reproducible demo Repo branch for react-snap: https://github.com/joaopedrodcf/yokaidex/pull/114/files I Am using the routes like was told in this issue #22
Example root: https://5ccf2032e1aef600085709d4--yokaidex.netlify.com
If we look in the first request of the network we can see that it returns the correct page
An example where doesn't work: https://5ccf337878f9f600074fbd46--yokaidex.netlify.com/yokai-watch-3/yokais/sigh-durr/ If we look at the network we can see that the page that is returned is the root
Weird behaviour, if I clear the cache and refresh in https://5ccf337878f9f600074fbd46--yokaidex.netlify.com/yokai-watch-3/yokais/sigh-durr/ it shows the correct page, if I refresh again shows the wrong one 😢
Expected behavior/code What I expect to happen is that if I refresh to see the respective page instead of the root one