Is this a bug report or a feature request?

• Bug Report
• Feature Request

Please provide the steps to reproduce the scenario

1. Checkout the repo: https://github.com/samvloeberghs/angular-devtools
2. Install dependencies npm i
3. Run the app npm start
4. Open the application on http://localhost:4200/posts/1
5. Open the Angular DevTools on the Transfer State tab

Description

I was not sure to put this as bug or feature request so checked both.

In the Transfer State tab we find a button on the top right corner to "Refresh transfer state". I don't understand why we have this option. Let me try to explain:

When we set data in the transfer state during the server side rendering phase that data is serialized in the HTML and transferred to the client. Then when the client bootstraps and reloads the same components requiring that data, it is taken from the deserialized state in the HTML.

So far that is the basic use-case of the transfer state service.

That state is always deserialized from the DOM and the state is only serialized to the DOM on the serverside. This does not happen on the client side. So refreshing will always get the same data.

Unless the refresh button would get it from the memory of TransferState during the client runtime. That way we could debug it on the client side as well. But not sure about the usefulness of that case. Typically you would only set something to the transfer state when running on the server:

if (isPlatformServer(this.platformId)) {
  const data = await fetchIt();
  this.transferState.set(POST_DETAIL_DATA_KEY, data);
  return Promise.resolve(data);
}

So 2 options:

1. Remove the refresh button ( makes most sense to me )
2. Get the state from the client side TransferState instead of the DOM when refreshing and maybe do the initial load from the DOM ( multiple options here )