Best way to create shareable URLS for a singe page website that has different views

I’m looking to get some advice on the best way to create shareable URLS for a singe page website that has different views based on tabs. Within each tab, the data can be different based on the filtered query.

On each of the views and the data its showing, we want to have a shareable url to link to what is being shown.

For example,

  • Fruits (page menu item) -> Red (Tab #1) -> Apple (search Category 1) should have its own shareable URL.
  • Fruits (page menu item) -> Red (Tab #1) -> Berries (search Category 2) should have its own shareable URL.

Options that come to mind:

  1. Create the shareable URL on the client-side using javascript since it knows its position. On the server-side, have a shareable URL specific rest-endpoint to return the full HTML contents whenever a GET request is invoked.
  2. Create the shareable URL on the server-side based on the request parameters received from the client-side.