Theme is caching previous user name - caching

Question

We are using CAS to login to our Drupal instance. This is working correctly and displaying the correct user content (blocks etc. based on roles). What is not working correctly is the small snippet in the theme that says welcome . It keeps showing the previous user who logged in.
How do I set this in bigpipe?
The code looks like this in the theme: <span id="user_name">{{user.displayname}}</span>
Is there a way to tell bigpipe not to cache this?
This code snippet is on one of our twig files header.twig.html which is a partial.

Answer 1

I ended up putting this in a block, and just referencing the block section in the theme instead of just pulling that, then I used the block to be ignored for caching.
Thanks!

Answer 2

I used this post with other resources to solve a similar problem. We were including {{ user.displayname }} in a twig template for the header on all pages of our site. Some users were seeing other users' names in the header after signing in. We wanted to solve the problem while impacting caching as little as possible. Here, I share in detail what we did in the hope that it will help others. I'll use the specific names used in our code. Readers will need to adjust to their own names. (The code follows our prescribed format, so please forgive that it isn't standard.)
Step 1
Create a custom module. Custom module creation is covered adequately in other places, so I won't give details here. Our custom module is named rsc.
Step 2
Create the folder modules/custom/rsc/src/Plugin/Block and in it create a file named DisplayName.php.
Step 3
In the file DisplayName.php, include the following:
<?php
namespace Drupal\rsc\Plugin\Block;
use Drupal\Core\Block\BlockBase;
use Drupal\user\Entity\User;
/**
* A block to show the user's display name
*
* #Block(
* id = "display_name",
* admin_label = "Display Name"
* )
*/
class DisplayName extends BlockBase // The class name must match the filename
{
public function build()
{
$user = User::load(\Drupal::currentUser()->id());
return
[
'#type' => 'markup',
'#markup' => $user->getDisplayName(),
'#cache' => ['contexts' => ['user']]
];
}
}
Step 4
Clear the Drupal cache to make the new block available at Block Layout.
Step 5
Go to Admin > Structure > Block Layout and place the Display Name block in the Hidden Blocks For Referencing - Not Displayed section (bottom of the list on our site). In the Configure Block dialog, edit the Machine name to display_name to match id in the code above. Clear the Display title checkbox and save. Doing this makes the block available for use in twig templates.
Step 6
In the twig template for the header, replace
{{ user.displayname }}
with
{{ drupal_entity('block', 'display_name') }}
The drupal_entity function is part of the twig_tweak module, which we were already using. It allows insertion of a custom block into a twig template. If you're not using this module, you'll need to install it, or find another method of including a block in a twig template.
Step 7
Clear the Drupal cache to make the modified template take effect.
If you see anything about this that can be improved, please comment.