Hi there!
Love netlify. I really appreciate their free tier.
I noticed my Expo / React Native for Web with react-navigation website, when deployed via github.io and then hosted via netlify, does not seem to have any support for caching resources such as the JS and the included static files that are called to load by the JS. Any guidance on this from any experts? It causes a long load time on every page refresh for me given the amount of content loaded initially.
Many thanks
Welcome to the forums @tathagatasite
When talking about caching, first step is to read over this support guide
Then to this…
How much content/data are you loading? Can you share your site for others to look at and provide feedback/suggestions on how to overcome this issue?
Hi coelmay, thank you for the reply!
I did read somewhat extensively and posted because I couldn’t find anything.
In that way I had successfully set up a _redirects file to redirect all to index.html to have my react-navigation URL routing work.
But on each individual page reload, even without a force-refresh, the fetched files are loaded on every single page load.
They’re required in react like this: TathagataTranslated-app-rn/ContentMap.ts at 26a02dde4d2880331cbd51dd8626535bffe70405 · tathagatatranslated/TathagataTranslated-app-rn · GitHub
When the page loads (https://tathagata.netlify.app), you can see in the network requests developer window that each resource is being loaded.
Granted this could be speeded up through parallelization - as well as probably lazy-loading on initial use of the content search features - but my question is really why the resources don’t get cached after the initial load.
Thank you!
lol. So I have to verify this but it’s possible the assets actually are being cached. But because they’re loaded serially and the duration each request takes is non-trivial, overall it may take a significant amount of time. So I’ll have a go at parallelizing loading and maybe making search lazy-load.
By the way I made a slight mistake in the line I linked to in my codebase earlier - all HTML files are actually bundled within one of the JS files, so what are being loaded are e.g. “.md” files.
What build command are you using in Nelify?
From what I can see (based on your package.json) you are only using expo start --web which according to the Expo docs is a development server only. You likely need to run expo build:web and then publish that to Netlify (you could add a build script to your package.json and configure your build in the Netlify UI.) This (as I understand—I haven’t used Expo) will bundle everything, even make it into a PWA (presumably what you are wanting.)
Indeed, I just created an expo build:web in package.json for a recently deploy I did which appears to fix the behavior I was experiencing. It was the product of that command which was getting published for all these deploys. Turns out the problem was I had multiple fetch executions which had awaits that blocked subsequent loops, i.e. they were done in serial., so I’m kicking off the fetches in parallel and awaiting their promises collectively, which appears to solve the issue.
I did actually consider a precompile step to combine the assets into one file but this seems to work well enough for now!
Thank you for your time and effort!