What is the impact of using edge workers to serve static versions of a dynamic application before loading JS?

Question

Here is my dilemma:

I have quite a complex e-reader single page application. It uses rewrites to route say /book/page/2 to /index.html for processing behind the scenes. The JS payload is quite heavy, and there's complex javascript that needs to run to use it properly for reasons I won't go into.

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.

Example:

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.

Thanks!

Answer 1

Okay. So from what I understand, you want to do this:

• Besides page title and description in the head, you add the temporary element with some static content to get indexed by Google for search results.
• Content get indexed, GoogleBot crawls the page, while loading the page, that temporary element is removed and replaced with JS-driven SAME content enabling the user to interact with it.

Answer: This is perfectly okay to do it as long as the rendered content remains SAME or very similar. Since the view for GoogleBot & User is same. This is not cloaking. Hence, no penalty. GoogleBot renders JS and sees the output very well. Populating/rearranging/settling the content when page is loading while the complete rendered output is still similar, this technique is perfectly okay. No bad impact on SEO for THIS reason.

However, if you change most of the output/visual content for GoogleBot vs. Users (before or while page loading via JS or dynamically), this is considered cloaking and deserves a penalty.

Finally, if you don't care about 'rankings' and you need just 'indexing', you can setup temporary elements (for indexing) and remove them via JS.

---

Coming towards other points related to the question context.

• Since the payload is huge and takes time for the page to complete its cumulative layout shift as well as largest meaningful paint, so, that page will fail Core Web Vitals assessment. For this reason, it will definitely impact rankings in SERPS - but still remain indexed somewhere without penalty.
• Edge workers definitely improve the performance, it is better to use that instead of Server-side work. This will possibly reduce TTFB, First contenful paint, and time to interact. - Again, it depends how much it is improved.