NodeJS Express Routing - Only first request gets rendered

Question

In the server script I try to deliver different html files. When app.post('/login'...) comes in, res.sendFile() is working and the html gets rendered. On the second call, whenn app.get('/go') comes in, the file gets served, but not displayed. I cannot explain why the second HTML file is not displayed. What am I doing wrong?

the second request comes from a fetch request in a javascript

socket.on('gameStarted', (data) => {
    console.log("Game started");
     fetch('/go', {method: 'GET'});
})

served but not displayed

app.post('/login', async (req, res, next) => {

    var roomNR = req.body.player.gameCode;
    var playerName = req.body.player.nickname;
    var codeValid = await checkCode(activeRoomsCollection, gameCodes, roomNR);
    var playerExists = await playerCollection.findOne({ playerName: playerName })
    if (codeValid) {
      if ((playerExists === null) || !playerExists) {
        playerCollection.insertOne({ room: roomNR, playerName: playerName, state: false });
        console.log(`Added player '${playerName}' with roomnumber '${roomNR}'`);
        res.sendFile(path.join(__dirname + '/../../public/lobby.html'), function (err) {
          if (err) {
            console.log(err);
            res.status(err.status).end();
          }
          else {
            console.log('Sent Lobby');
          }
        });
      } else {
        // updateDomElement(player, elementId, data)
        //res.send('Benutzername existiert bereits');
      }
    } else {
      res.send('Code ungültig');
    }



  });

  app.get('/go', (req, res, next ) => {
    res.sendFile(path.join(__dirname + '/../../public/raetsel1.html'), function (err) {
      if (err) {
        console.log(err);
        res.status(err.status).end();
      }
      else {
        console.log('Sent Raetsel1');
      }
    });
  });

Answer 1

fetch() never displays anything on its own. It's a way for your Javsascript to issue http requests to remote servers and those servers then return content back to your Javascript. The result from those http requests ONLY goes to your Javascript. Nothing in the view of the page is affected at all by a fetch() call.

If you want the result of a fetch() call to display something in your page, you would need to write Javascript to do that (to insert content into the current page).

If, instead, you just want the browser to go to a new page, then change from this:

fetch('/go', {method: 'GET'});

to this:

window.location = "/go";

This will cause the browser to go to the URL, retrieve the content and display it. This will shut-down the current page and load and display a new page and the URL in the URL-bar in the browser will show the updated location.

Note that if you have socket.io code in both pages, it will disconnect the current socket.io connection and then run the Javascript in the new page - causing it to create a new socket.io connection (if you have code in the new page to do that) as that is what happens to socket.io connections when you load and display a new web page in the browser.