diff --git a/CHANGELOG.md b/CHANGELOG.md
index c70597c433..6366b80226 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed / Improved
 
 - The default config file is now in more human-readable format - @juho-jaakkola (#4197)
+- Create only once aside async component - @gibkigonzo (#4229)
 
 ### Fixed
 - Fixes when having multiple custom options with overlapping option_type_id values, selecting 1 changes the others - @carlokok (#4196)
diff --git a/src/themes/default/components/core/blocks/Microcart/Product.vue b/src/themes/default/components/core/blocks/Microcart/Product.vue
index a53eedf4f3..f7e275dc77 100644
--- a/src/themes/default/components/core/blocks/Microcart/Product.vue
+++ b/src/themes/default/components/core/blocks/Microcart/Product.vue
@@ -135,7 +135,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 import config from 'config'
 import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 import { formatProductLink } from '@vue-storefront/core/modules/url/helpers'
@@ -178,6 +178,9 @@ export default {
   },
   mixins: [Product, ProductOption, EditMode],
   computed: {
+    ...mapState({
+      isMicrocartOpen: state => state.ui.microcart
+    }),
     hasProductInfo () {
       return this.product.info && Object.keys(this.product.info).length > 0
     },
@@ -297,8 +300,15 @@ export default {
           const maxQuantity = await this.getQuantity()
           this.maxQuantity = maxQuantity
         }
-      },
-      immediate: true
+      }
+    },
+    isMicrocartOpen: {
+      async handler (isOpen) {
+        if (isOpen) {
+          const maxQuantity = await this.getQuantity()
+          this.maxQuantity = maxQuantity
+        }
+      }
     }
   }
 }
diff --git a/src/themes/default/components/theme/blocks/AsyncSidebar/AsyncSidebar.vue b/src/themes/default/components/theme/blocks/AsyncSidebar/AsyncSidebar.vue
index 6f484ae20b..a317c8631b 100644
--- a/src/themes/default/components/theme/blocks/AsyncSidebar/AsyncSidebar.vue
+++ b/src/themes/default/components/theme/blocks/AsyncSidebar/AsyncSidebar.vue
@@ -1,18 +1,21 @@
 <template>
-  <transition :name="direction === 'right' ? 'slide-left' : direction === 'left' ? 'slide-right' : null ">
-    <div
-      class="mw-100 fixed cl-accent bg-cl-primary"
-      :class="direction === 'left' ? 'left-sidebar' : direction === 'right' ? 'right-sidebar' : null "
-      data-testid="sidebar"
-      ref="sidebar"
-      v-if="isOpen"
-    >
-      <component :is="component" @close="$emit('close')" @reload="getComponent" />
-    </div>
-  </transition>
+  <no-ssr>
+    <transition :name="direction === 'right' ? 'slide-left' : direction === 'left' ? 'slide-right' : null ">
+      <div
+        class="mw-100 fixed cl-accent bg-cl-primary"
+        :class="direction === 'left' ? 'left-sidebar' : direction === 'right' ? 'right-sidebar' : null "
+        data-testid="sidebar"
+        ref="sidebar"
+        v-show="isOpen"
+      >
+        <component :is="component" @close="$emit('close')" @reload="getComponent" />
+      </div>
+    </transition>
+  </no-ssr>
 </template>
 
 <script>
+import NoSSR from 'vue-no-ssr'
 import LoadingSpinner from 'theme/components/theme/blocks/AsyncSidebar/LoadingSpinner.vue'
 import LoadingError from 'theme/components/theme/blocks/AsyncSidebar/LoadingError.vue'
 import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
@@ -33,17 +36,20 @@ export default {
       default: 'right'
     }
   },
+  components: {
+    'no-ssr': NoSSR
+  },
   data () {
     return {
       component: null
     }
   },
-  created () {
-    this.getComponent()
-  },
   watch: {
     isOpen (state) {
       if (state) {
+        if (!this.component) {
+          this.getComponent()
+        }
         this.$nextTick(() => {
           disableBodyScroll(this.$refs.sidebar)
         })