Unfortunately the first approach will not work, since browsers do not usually send information about their computer’s configured timezone to the server.
This pretty much leaves the second approach as the only possibility.

I believe that there exist many drop-in libraries that allow you to display datetimestamps in a particular timezone in pure browser-friendly JS.
I’ve used moment.js before myself in the past, but it is by no means the only option out there.

I also prefer this approach of rendering UTC in the server and making the transformation to the user’s timezone in the client.

You may also want to take a look at github/time-elements, which can do this automatically for you using WebComponents.

My approach relies on the Timex library and the ECMAScript Internationalization API:

When a request comes in, I check get_session(conn, “tmzn”). If tmzn is not yet part of my session, I add data-tmzn=“1” to my document head. JS then checks document.head.dataset.tmzn on DOMContentLoaded and, if it returns a value, it sends an async GET request to:

“/timezone?iana=” + encodeURIComponent(Intl.DateTimeFormat().resolvedOptions().timeZone)

Once the server receives this, the timezone can be added to the session, following its verification by calling Enum.member?(Timex.timezones(), iana). From that point onwards, all dates can be rendered server-side with the help of Timex.

This approach may or may not fit your use case, the most obvious issue being that it does not work (at least not out of the box) for the initial page shown to the user.