I'm trying to get a high performance architecture with a Vite + Express + React setup.
I know that many browsers limit parallel network requests to a single IP.
My goal: is to implement an architecture that spreads out the type of requests to different servers to maximize throughput to the client. I already know that my clients have the resources to run such high throughput (CPU & network wise). Api requests go to API. JS requests go to Vite dev server. assets go to another server.
Requirements:
- Frontend in react.
- Backend in express (API).
- Backend uses cookies (passport).
- A dynamic approach that's easy to change / duplicate for more environments.
- Vite:
- Client has a direct connection to vite dev server for integrated features (fast HMR and more)
- When in prod mode, should fetch html/js/css/assets from the different servers (similar to a CDN, but i host all the servers my self)
I've tried using vite's backend-integration. Fetching initial GET "/" from my API to create a cookie, it then retrieves the html file from vite dev server and returns it. The problem is that chrome keeps fetching html/js/assets from the api and not directly from vite dev server. I added this to vite.config { server: { origin: 'http://localhost:5173' } }. I've tried all sorts of variations but couldn't get it to work properly.