I am developing a SaaS application using a backend architecture with a Django REST API and a PostgreSQL database, while the frontend uses Nuxt 3 with TypeScript, Tailwind, and TanStack Query for API request management. I have enabled Server-Side Rendering (SSR) by setting ssr: true in the nuxt.config.ts file :

export default defineNuxtConfig({
    ssr: true,
})

In my current architecture, I have a server/api/ directory within my Nuxt 3 application containing multiple files that represent endpoints to interact with the Django API. For instance, I have a file server/api/projects/index.ts that points to the Django endpoint /api/projects/ to fetch all projects.

Nuxt Server Integration:

Nuxt Server Directory Structure:

server/api/projects/index.ts : Points to the Django endpoint /api/projects/ to fetch all projects.
server/api/projects/[id].get.ts : Fetches a project by its ID from /api/projects/detail/${projectId}/.

API Interaction Logic:

These endpoints are used within a service handler (api/projects.api.ts) that provides functions like getAllProjects, getProjectById, and deleteProjectById.

Composable (useProjects.ts):

The composable useProjects.ts uses the functions in api/projects.api.ts to manage project data and interact with the Nuxt Server endpoints in server/api/projects/. It leverages useQuery from TanStack Query for efficient state management.

Question :

Is it necessary to have an intermediary Nuxt server between the Nuxt 3 frontend and an external Django API? Does this provide any specific benefits for Server-Side Rendering (SSR), or can the Nuxt 3 frontend directly interact with the Django API while maintaining SSR features?

Thank you for your help!

Application Structure :

frontend/
├─ api/                         # Functions to call the API server Nuxt 3 (server/api/)
│  └─ projects.api.ts
├─ app.vue
├─ assets/
│  └─ css/
│     └─ tailwind.css
├─ composables/                 # Composables to call functions in api/projects.api.ts
│  └─ useProjects.ts            # and share data between components
├─ nuxt.config.ts
├─ pages
│  ├─ ecowall/
│  │  ├─ conception
│  │  │  └─ [projectId]
│  │  │     └─ paroi
│  │  │        ├─ [paroiId].vue
│  │  │        └─ new-paroi.vue
│  │  ├─ index.vue
│  │  └─ projects
│  │     ├─ [projectId].vue
│  │     └─ index.vue           # I use my composables useProjects.ts here to get all projects
│  └─ index.vue
├─ plugins
│  └─ vue-query.ts
├─ server/                     # Intermediary server to call the Django API endpoints
│  ├─ api/
│  │  ├─ projects/
│  │  │  ├─ [id].delete.ts
│  │  │  ├─ [id].get.ts
│  │  │  ├─ create.post.ts
│  │  │  └─ index.ts
│  └─ tsconfig.json
└─ tsconfig.json

I have implemented an intermediary Nuxt server to act as a bridge between the Nuxt 3 frontend and the external Django API. My expectation was that this intermediary layer would improve performance, ensure security, and enhance Server-Side Rendering (SSR). However, I’m uncertain if this approach is necessary.

What I tried:

• I created several API endpoints in the server/api directory of my Nuxt 3 application that directly point to the Django API endpoints:

server/api/projects/index.ts points to /api/projects/.
server/api/projects/[id].get.ts points to /api/projects/detail/${projectId}/.

• I created a service handler (api/projects.api.ts) that provides functions to interact with these Nuxt server endpoints.

• I used a composable (useProjects.ts) to manage project data and interact with the Nuxt server endpoints via TanStack Query.

What I expected:

Improved performance due to better caching and SSR benefits.
Enhanced security since the Nuxt server acts as an intermediary between the frontend and the Django API.

What actually happened:

The setup works fine, but it adds complexity to the architecture.
I’m not sure if this intermediary Nuxt server is necessary or if the Nuxt 3 frontend can directly interact with the external Django API while maintaining SSR features.
Therefore, I would like to confirm whether this approach provides any specific benefits for SSR or if a direct connection between the frontend and the Django API is sufficient.