Here is my dilemma:
I have quite a complex e-reader single page application. It uses rewrites to route say
It's my understanding that these days Google actually runs the JS on sites it visits and indexes that processed HTML. But I know it's not the case for all search engines and also I'm sure there's some kind of penalisation it gets for the load time.
I thinking of using edge workers to intercept the request and serve a plain HTML version of the page of the book. The book JS would then load in the background, and when it's done it removes the HTML version and puts its own app version (which will have different HTML but same text). The idea is that if a bot goes to it, it gets the static HTML. It may or may not process the book JS. Either way it's quick and indexable.
Static served (what search engines and visitors get right off the bat)
<div id="app"></div> <!-- to be filled with SPA logic --> <div id="tempData"> Once upon a time there was a cat. </div>
After JS loaded
<div id="app"> <span data-sentence="1">Once upon a time there was a cat.</span> </div> <div id="tempData"></div> <!-- deleted -->
I know this is quite similar to hydration, but because my app is already quite complex I'd rather offload this to edge workers rather than add server side scripting to my app. Hydration it seems has the advantages of using the same elements to populate new data. Perhaps this is an important distinction for SEO.
Anyway, I am wondering what kind of impact this would have on SEO. Would it get dinged because it would detect that the HTML with the static content is removed after processing? Would it detect that the new text is similar enough that it's okay? I really have no idea how this would work under the hood.