504 gateway time-out error with nginx server for angular SSR project

Question

I have my angular project deployed on nginx server in which angular universal is applied. Everything works fine. But when user log in and reload page then its showing '504 Gateway Time-out'.

My nginx configuration file is like below:

server {
    listen 80;
    listen [::]:80;

    server_name mysite.at;
    server_name www.mysite.at;

    return 301 https://mysite.at$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    ssl_certificate /etc/letsencrypt/live/mysite.at/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mysite.at/privkey.pem; # managed by Certbot
    include /etc/nginx/snippets/sslsetup.conf;

    server_name www.mysite.at;

    return 301 https://mysite.at$request_uri;

}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    ssl_certificate /etc/letsencrypt/live/mysite.at/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mysite.at/privkey.pem; # managed by Certbot
    include /etc/nginx/snippets/sslsetup.conf;

    server_name mysite.at;

    root /var/www/html/dist/mysite/browser;
    index index.php index.html;

    location / {
       try_files $uri $uri @backend;      
    }
    
    location @backend {
        proxy_pass http://localhost:4000;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_http_version 1.1;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location ~ \.php$ {
       include snippets/fastcgi-php.conf;
       fastcgi_pass unix:/var/run/php/php8.0-fpm.sock;
    }

    location ~ /\.ht {
       deny all;
    }

    include snippets/phpmyadmin.conf;
} 

What I have tried:

• Nginx + PHP-FPM 7.1 - 504 Gateway Time-out

Above changes tried in backend nginx configuration file and its server files as mentioned in accepted anwser

• In frontend nginx config file

  location @backend { proxy_pass http://localhost:4000; proxy_http_version 1.1; proxy_cache_bypass $http_upgrade;

       proxy_set_header Upgrade           $http_upgrade;
       proxy_set_header Connection        "upgrade";
       proxy_set_header Host              $host;
       proxy_set_header X-Real-IP         $remote_addr;
       proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
       proxy_set_header X-Forwarded-Host  $host;
       proxy_set_header X-Forwarded-Port  $server_port;
  
       port_in_redirect off;
       proxy_redirect http://localhost:4000  /;
  
       proxy_connect_timeout              60s;
       proxy_send_timeout                 60s;
       proxy_read_timeout                 60s;
  }
  

in frontend config file

location ~ \.php$ {
       include snippets/fastcgi-php.conf;
       fastcgi_pass unix:/var/run/php/php8.0-fpm.sock;
       fastcgi_read_timeout 500;
    }

• In frontend config file, below changes tried

How to set http-https ProxyPassReverse of Apache in Nginx server

Any changes that I tried didn't work.

I thought this may be problem of state management as before login pages are reloading by browser reload but after login pages are not reloading, gives 504 error.

I am thinking that localstorage not working in angular SSR even though there is no error. So tried cookies instead. But still 504 issue persist. Is there any other plugin like 'vuex-persist' which I should try that will work in angular SSR instead of localStorage?

Main problem is AFTER LOGIN pages are not reloading by browser reload/F5, results in 504 Gateway time out issue.

What should I do to resolve this issue? Please help and guide.