the parent was implying that the server might later change their mind and ask for the water and bread back, so you shouldn't do anything irreversible with it.
A recipe with a shopping list. Only you get the shopping list first and some of the items might be for another recipe (and you might already have them.)
Perhaps an alternative analogy is branch prediction? Browser is permitted to run along a particular path of execution because it applies in most cases. But you end up throwing away your work in the case that the prediction turns out to be wrong.
In terms of practical application for this - most modern sites run their content over an additional layer of application logic that runs in the browser e.g. React, or Angular or something. These hints can tell the browser that such-and-such an application framework is required to display the content, and to go get it before the content is available.
See https://tools.ietf.org/html/rfc7231#section-4.2 for the definitions.
(Keep in mind with 103’s semantics that we’re not talking about HTTP methods, we’re merely borrowing its definition of “safe”. Speculative JavaScript execution, for example, is perfectly feasible; you’d simply have to pause execution as soon as it tried to mutate its environment or make HTTP requests or things like that. How useful it is is another question.)
Idempotent means that one invocation has the same effect as more than one invocation.
Safe means that zero invocations has the same effect as one or more invocations.