3-Tier Architecture Deployment with Docker: SSR and CSR Issue (1)

Initial Assumption: Expected network traffic to flow as designed.
Issue Encountered:
- Front-end uses Client-Side Rendering (CSR).
- CSR mode prevents the browser from directly accessing the internal network (HAProxy).

Client-Side Rendering (CSR):
- JavaScript executed on the client (browser).
- Browser cannot access internal network.
- Requires communication with backend through public endpoints.
Server-Side Rendering (SSR):
- JavaScript executed on the server.
- Server can access internal network.
- Direct communication with backend services possible.

Current Setup:
- Using CSR.
- Client cannot directly access HAProxy in the internal network.
- Solution: Use Nginx to handle external requests and forward them to HAProxy.

Modified Network Flow

CSR Request Flow:
1. Client sends request from browser.
2. Nginx receives the request.
3. Nginx handles static file requests.
4. Requests starting with /api are forwarded to HAProxy.
5. HAProxy distributes requests to backend servers.
6. Backend servers process the requests and return responses to HAProxy.
7. HAProxy forwards responses to Nginx.
8. Nginx sends the response back to the client.
SSR Request Flow:
1. Client sends request from browser.
2. Nginx receives the request.
3. Nginx handles static file requests.
4. SSR request is forwarded to the frontend server (e.g., Next.js).
5. Frontend server requests data from backend via HAProxy.
6. HAProxy distributes requests to backend servers.
7. Backend servers process the requests and return responses to HAProxy.
8. HAProxy forwards responses to frontend server.
9. Frontend server generates HTML using the data.
10. Nginx sends the final HTML to the client.

CSR: Browser-side JavaScript execution, requires proxy (Nginx) for backend communication.

SSR: Server-side JavaScript execution, allows direct backend access through the frontend server.