Hosting server and client app on different server or on same server?

Question

I am working on a learning project. I have build an authentication system in nodejs using local and Google strategy. Front end is a react app. There are two options for hosting

1. Deploy front end on static hosting providers like netlify or github pages and backend node app to heroku.
2. Deploy both backend and front end on heroku with front end code in the public folder and use express.static('public')

I am confused about both these approaches and could not find the answer on the internet. It will be a lot of help if you can explain the pros and cons of both the method and which one is suitable in what conditions. Links to the articles are also appreciated. Thank you in advance.

Answer 1

First approach

Pros:

• Static content served from a different server has more optimization potential (using S3/CloudFront edge caching), nginx is blazingly fast for serving static files
• Less network traffic on one server (content can be served from multiple points in parallel)
• The nodejs application doesn't have to "waste" time serving static files that never change as has more time for actual dynamic content

Cons

• Needs more configuration, since it's running on a different origin (dealing with CORS, appropriate security settings)
• Premature optimization
• More maintenance

---

Second approach

Pros:

• Easier to deploy
• Fast enough in most cases