Browser Back Button Fails to Update Content After Navigation in Phoenix LiveView

[shahryarjb]

Environment

• Elixir version (elixir -v): 1.17.2
• Phoenix version (mix deps): 1.7.14
• Phoenix LiveView version (mix deps): last version and commit of main branch
• Operating system: mac os last version
• Browsers you attempted to reproduce this bug on (the more the merrier): chrome
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no:

Actual behavior

I reproduced the issue in a simple Phoenix and LiveView project, which I’ll share the link for below.

The issue is as follows: if I set up a router with the path /doc/:id to display content based on a given ID (either from the database or memory), and then navigate to a different page using the navigate property of the link component, everything seems to work initially. However, when I click the browser’s back button, the URL and page title change correctly, but the content itself does not update.

Video:

LiveViewBrowserBack.mov

Reproduced project link

• Full project: https://github.com/shahryarjb/live_view_back_test
• Single file: https://github.com/shahryarjb/live_view_back_test/blob/master/lib/live_view_back_web/live/doc.ex

Please Go to http://localhost:4000/doc/1 link and click on (Click here to navigate Page B) http://localhost:4000/doc/2.

Extra test

For extra and real case I created a simple static blog that you can see in this link:

http://localhost:4000/blog/improving-seo-and-enhancing-static-blog-posts-with-wallaby-image-livebook-for-social-media-sharing

Please click on Build a Static Site in Elixir Under 5 Minutes with Phoenix Components and back

I have this issue on online website if you need please tell me to add in this issue

---

Simple code:

defmodule LiveViewBackWeb.Doc do
  use LiveViewBackWeb, :live_view

  def mount(%{"id" => id} = _params, _session, socket) do
    article = data(id)

    socket =
      socket
      |> assign(page_title: article.title, article: article)

    {:ok, socket}
  end

  def render(assigns) do
    ~H"""
    <p class="w-full mb-10 font-semibold text-red-400"><%= @article.title %></p>
    <div class="border border-gray-400 p-10">
      <%= raw(@article.body) %>
    </div>

    <hr class="my-4" />
    <.link navigate="/doc/2">Click here to navigate Page B</.link>
    <hr class="my-4" />
    <.link navigate="/doc/1">Click here to navigate Page A</.link>
    """
  end

  # If you comment this handle_params you get an error
  def handle_params(_params, _uri, socket) do
    {:noreply, socket}
  end

  def data("1") do
    %{title: "This is test Title one", body: "<strong>This is test Content one</strong>"}
  end

  def data("2") do
    %{title: "This is test Title two", body: "<two>This is test Content two</two>"}
  end
end

And router:

  scope "/", LiveViewBackWeb do
    pipe_through :browser

    live "/doc/:id", Doc
  end

By the way, if I navigate to page 1 again it has no problem, the only problem is from browser back button and it sends a handle_params request, I demonstrated this issue in the video above.

Based on speaking with @SteffenDE in slack it is not related to #3482 PR.

Thank you in advance. I hope I didn't make any mistakes or waste your time.