How can I sign a Solana transaction on the frontend with data coming from the backend?

Question

async function getTransaction(){
    $.ajax({
        url: 'http://localhost:8080/gettransaction',
        type: 'GET',
        dataType: 'json',
        success: async function(data) {
            console.log(data); // Log the data for debugging

            // Deserialize the Transaction object
            var transaction = solanaWeb3.Transaction.from(data);

            // Sign and send the transaction
            var provider = await getProvider();
            if (!provider) return; // Ensure provider is available
            let signed = await provider.signTransaction(transaction);
            var connection = new solanaWeb3.Connection(solanaWeb3.clusterApiUrl('mainnet-beta'));
            let signature = await connection.sendRawTransaction(signed.serialize());
            await connection.confirmTransaction(signature);
            console.log("Transaction signature:", signature);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error('Error:', errorThrown); // Handle errors here
        }
    });
}

app.get('/gettransaction', async (req, res) => {
    try {
        const amountInSol = 0.01;   
        const publicKey = new solanaWeb3.PublicKey(publicKeyStr);
        var connection = new solanaWeb3.Connection(rpcNodeLink);
        var recieverWallet = new solanaWeb3.PublicKey(recieverWalletAddress);
        var transaction = new solanaWeb3.Transaction().add(
        solanaWeb3.SystemProgram.transfer({
            fromPubkey: publicKey,
            toPubkey: recieverWallet,
            lamports: solanaWeb3.LAMPORTS_PER_SOL * amountInSol //Investing 1 SOL. Remember 1 Lamport = 10^-9 SOL.
        }),
        );
        transaction.feePayer = publicKey;


        if(transaction) {
            console.log("Txn created successfully");
        }  
        res.status(200).json(transaction);
    } catch (error) {
        console.error(error);
        res.status(500).json({ error: 'Internal server error' });
    }
});

The first is the front end code

And the second is the backend code

When I try to sign the transaction or deserialize it ( still didnt figure out which ), I get a buffer$1 is not iterable error, I was not expecting it, as I cant wrap my head around why signing the transaction using the phantom wallet provider would require the buffer from the backend in the frontend, and I can't sign it in the backend because I dont have access to the provider, I also dont want to do it using a private Key. I though of reconstructing the transaction on the front end, but with no success.

I tried writing it all in the frontend and couldnt create the transaction, and had to use an api to make it in the backend and return it to the front end, but now I have issues when it comes to signing it, as i get a buffer$1 is not iterable error, I tried using a CDN to get a Buffer into my front end, but all I got were more errors.