client-side-logout-links.html

<!-- Shared via https://twitter.com/rstacruz/status/1446681382701264896 -->

<!--
  Many server-side frameworks approach personalisation
  by generating different markup depending on whether
  the user is signed in or not.

  Imagine a *server-side* template like this:
-->

<% if (user.signed_in) { %>
  <a href='/my-account'>My account</a>
  <a href='/logout'>Log out</a>
<% } else { %>
  <a href='/login'>Log in</a>
<% } %>
  
<!--
  A better solution might be to do this one the
  *client-side* instead. This will allow HTTP caching
  of the entire page, while retaining personalisation.
-->

<a href='/login'>Log in</a>

<script>
  // Fetch user info via API
  fetchUserInfo()
  .then((user) => {
    if (user.signedIn) {
      hideLoginLink()
      showUserLinks()
    }
  })
</script>