How to prevent exposing real data in AJAX response (SSR vs CSR) and instead return opaque tokens?

I’m comparing two ways of rendering HTML structures with data from PHP + MySQL.

Option 1: SSR (Server-Side Rendering)

PHP builds the HTML and returns it directly:

PHP:

else if(isset($_POST["retrieveData"])){

  $sql = "SELECT * FROM sampleTable";

  $result = $conn->query($sql);

  $data = '';

  while($row = $result->fetch_assoc()){

    $data .= '<div class="Sample">';

    $data .= '<p class="ticket-id">'.$row["ticket"].'</p>';

    $data .= '<p class="email">'.$row["email"].'</p>';

    $data .= '</div>';

  }

  echo $data;

}

JS:

$.ajax({

  method: "POST",

  url: "PostData.php",

  data: { retrieveData: true },

  success: function(response){

    $('.container').append(response);

  }

});

Option 2: CSR (Client-Side Rendering)

PHP only returns JSON, and JS builds the HTML:

PHP:

else if(isset($_POST["retrieveData"])){

  $sql = "SELECT * FROM sampleTable";

  $result = $conn->query($sql);

  $rows = [];

  while($row = $result->fetch_assoc()){

    $rows[] = [

      "ticket" => $row["ticket"],

      "email"  => $row["email"]

    ];

  }

  echo json_encode($rows);

}

JS:

$.ajax({

  method: "POST",

  url: "PostData.php",

  data: { retrieveData: true },

  success: function(response){

    let a = JSON.parse(response);

    for(let i=0;i<a.length;i++){

      let b=a[i];

      let html=`

      <div class="Sample">

        <p class="ticket-id">${b.ticket}</p>

        <p class="email">${b.email}</p>

      </div>`;

      $('.container').append(html);

    }

  }

});

The problem

Both options expose the real data in the AJAX response. For example, if a user opens DevTools and adds console.log(response) inside my JS file:

Option 1 (SSR) response will log raw HTML with IDs and emails.

Option 2 (CSR) response will log JSON with the same IDs and emails.

So sensitive values (like ticket IDs or emails) are directly visible in the client.

What I want

Instead of returning the actual data directly in the AJAX response, I’d like to return only opaque/random alphanumeric tokens (e.g. 3f9aX2kP…).

Later, when the client needs to use those tokens, the server should be able to resolve them back to the real data.

My questions:

1. Is it possible for a user to modify my JavaScript in Chrome DevTools and see raw AJAX responses? (I assume yes, but want confirmation.)

2. What’s the standard way to return tokens instead of real data in AJAX responses, while still making the real data retrievable later?

Should I generate random strings and map them server-side (DB/session)?

Or use signed tokens (like HMAC/JWT) so the server can verify them without storing mappings?

How do I prevent replay or tampering?