Why Does my Heroku Site Display JSON Data on Page Reload?

If you’re reading this, you may have found yourself in this situation- you’ve created a React/Rails site and successfully deployed it to Heroku. Everything is looking great, until you reload the page and see something like this instead of your beautifully designed frontend:

To be honest, the first time I hosted on Heroku I figured it was just something weird with Heroku and ignored it. But after some digging I finally learned why this happens, and the answer is actually pretty simple. That being said, I wasn’t able to find a clearly written answer as to why this happens and the easy way to fix the problem. So I figured I’d write this blog in case it will help anyone frustratingly searching for the cause and the solution.

Essentially the problem is that you’re using the same route for your backend and frontend.

For this example, let’s say we have a simple companies model in our database:

We have our routes set up so that a GET Fetch request to ‘/companies’ will return all of our companies:

Now on our frontend, we have a page that displays all of the companies from our database, and we define the route for this React page as ‘/companies’:

When we host something like this on Heroku, ideally what we want to happen is something like this:

We want Heroku to display our React frontend, which fetches to our Rails backend. However, in our example, when we reload the page we would see a ton of JSON data. So why is this happening? Because our frontend and backend routes are both ‘/companies’. So basically what’s happening is this:

Instead of displaying our React page which then fetches to our Rails database, because the routes are the same Heroku bypasses React altogether and fetches to the Rails route itself. This is why the page becomes full of JSON data- because that’s what the Rails route returns.

So what’s the solution?

The solution is actually extremely simple. All you have to do is use a different route on the frontend. So instead of:

Just do something like:

Make sure to change any other instances in your code when you may link to that route, but make sure NOT to change your fetch routes to the backend!

Also, if we have a SHOW route defined to show an individual company, where the route is ‘/companies/:id’, we have to make sure to change our frontend route that displays that company as well from:

(On page reload this would show the JSON for that one company) To:

With these renamed routes on our frontend, our site should function as desired, with no issues when we reload the page:

I hope this was helpful!