# How the AB Tasty tag is designed to handle Single Page Apps (SPA)
A Single Page Application (SPA) is a type of website that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server.
**Good to know đź’ˇ**
AB Tasty is running on a **native Vanilla TypeScript framework**. Our tag is compatible with a lot of modern JS frameworks, including React, Angular, Vue, Meteor or Ember. The tag is unique for all environments and doesn’t require any additional implementation. To improve its behavior on [server-side rendering](#h_01j05yxay44zzt85yc8eaqt8eh) (SSR) frameworks, an additional step might be needed to delay the application of the modifications.
## Addition of JavaScript code
You can add your own JavaScript code. All variations created in our Visual Editor using one of the WYSIWYG features will generate an ES2020 compatible script that will be executed on client-side.
You can also add your own JavaScript code using the Code Editor or the “Add JavaScript” option of the Visual Editor. In this case, the code won’t be transpiled into another language. For example, an ES7 script might not be working on older browsers. It’s therefore your responsibility to manage the compatibility of your own code when adding custom JavaScript.
## Management of modifications
The modifications you make in your campaigns are stored into a JS object that will be read and executed on client-side.\
When a modification targets an existing HTML element, the original one isn’t modified. It is cloned and this clone is modified and then displayed by AB Tasty. Each time the URL changes, the tag checks the targeting criteria to know whether the modifications still need to be applied. If they don’t, the original content is displayed. For CSS additions, we inject custom CSS in the head section of the webpage, using the “!important” tag in order to add and/or override styles.
In addition to that, our tag adds and listens to a Mutation Observer on the whole DOM. Each time a DOM modification is detected and relevant to us, the tag quickly re-applies its changes. A DOM modification is a change in an HTML element regarding its style or structure. We use the *window\.requestAnimationFrame()* feature in the browser in order to interweave our modifications between two versions. With a high refresh rate of 60 times per second, the changes are applied before the human eye can see it, thereby avoiding any flickering effect.
## Automatic reload of the framework option
The [automatic reload of the framework](https://app2.abtasty.com/settings/framework) option of the settings is enabled by default and automatically detects a URL change and reinitialize the AB Tasty framework as if the page had been reloaded. If the page’s status changes while this option is turned enabled, the changes made will be reapplied.
## Server-side rendering
When the webpage is rendered on server-side and hydrated on client-side, there might be a conflict if AB Tasty’s changes are applied before the page is fully loaded. We recommend implementing a delay in our tag’s execution and only trigger it when the page is ready.
We provide a [locking mechanism](https://developers.abtasty.com/docs/tag/tag-window#locking-tag-execution) that consists of two parts:
* Adding the ̀window\.lockABTastyTag\` which will tell the tag not to apply the modifications. It needs to be set as soon as possible and before calling the AB Tasty tag.
* Triggering the \`window\.unlockABTasty()\` method provided by the tag itself. This will resume the execution and display the campaigns. It as to be called when you consider the website to be ready.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.abtasty.com/account/tag-integration/going-further-with-your-tag/how-the-ab-tasty-tag-is-designed-to-handle-single-page-apps-spa.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.