Site does not load/cache properly

Netlify CMS
,
#1

I’m using a headless, open source, CMS generator that is maintained and hosted by Netlify. When running the application locally, everything works perfectly and all the pages load as expected.

However, when I deploy the project to Netlify I run into some issues. When I click on an item, it returns a 404 “Sorry could not find page” error. But if I refresh the page, then the site loads as expected. Obviously this is not ideal and I’m not sure what to do.

Anybody have any ideas as to how to resolve this?

My site is hosted here in case you wish to see what I’m talking about: https://cassandra-tools.netlify.com/

Appreciate any and all help

#2

Welcome! Not sure what that site is written in, but I bet it’s a single page app, probably React. That means you have to enable history pushstate for pretty URLs to work: https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps

In your _redirects file add the following:

/*    /index.html   200

You can find more general info on redirects here: https://docs.netlify.com/routing/redirects/

#3

Hi! Yes sorry for not making that clear. Yes it is written in React!
That is something I have not looked into yet, will do so and provide updates
Thank you!

#4

redirect
redirect1078×557 28.4 KB

I added a redirect rule and unfortunately that did not fix my problem :frowning:

#5

Hi, @tanakamapondera, and welcome to our Netlify community site. :slight_smile:

Would you please tell us how to reproduce the issue for testing? I have visited the site below:

https://cassandra-tools.netlify.com/

However, all the links I click are working. What do I need to click to see the 404 page?

#6

Essentially, clone this repo: Headless CMS
Then follow the readme to setup access tokens and deploy the project to netlify using default settings.

This is the error that I see: Video
The page only loads after I refresh it

#7

Unfortunately, I’m not able to reproduce this either :frowning: I’ve even included a not-great-resolution gif below so you can see what I’m seeing. At the end, I check the console for 404s or other errors and don’t see any. A few things I can think of for you to dig in further:

  • ask some other people to test the URL for you and report back if they also see 404s
  • search the forum for something like “SPA 404”; most of what I see is about the redirect you’ve already implemented, but perhaps you’ll find something else that’s helpful? For example, this post (Vue/nuxtJS slug: 404 on refresh) mentions that Nuxt.js dynamic routes need a bit of custom configuration- maybe React routes require something similar, as Tom mentioned?

cassandra-tools
cassandra-tools960×614 2.85 MB

If you have other suggestions, please let us know.

#8

Hi Jen! Thank you for taking the time to respond and try to solve my issue.
So 2 things from me:
A) The site you are currently viewing isn’t using the Headless CMS repo, that is using the Sattic Gen repo. (Apologies I must have attached the wrong link)
B) Originally i wanted to use the Headless template but turns out the StaticGen template is a better fit for my project, also it works perfectly on Netlify. So as far as I’m concerned this issue can be closed.

P.S. I never got the Headless CMS to work properly on Netlify but that is an issue for another time :slight_smile:

#9

Thanks for letting us know the issue can be considered resolved. If you do have other questions about this and/or want to troubleshoot this further, please reply again here anytime.