Nuxt3 pages are duplicated twice at the end of the scroll on production

When running the project on local whether in dev or prod mode using whether npm run dev or npm run build followed by npm run preview respectively it works just fine on my local machine,

When deploying the app in a Plesk server, by taking the .output content and setting the following setting

I get the home page duplicated (I see my home page and when I scroll way down I refound the page again like it rerendered and it conflicts with the topper part), same thing for the other pages, sometimes they throw 404 error because of the 404 page

this is the app.vue page

<script setup>
  useHead({
    script: [
      {
        src: 'https://www.googletagmanager.com/gtag/js?id=blablabla',
        async: true,
      },
      {
        innerHTML: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'blablabla');
        `,
      },
    ],
    link: [
      { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
      { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
      { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
      { rel: 'manifest', href: '/site.webmanifest' },
      { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#14696d' },
    ],
  });
</script>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

this is the nuxt config used

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/tailwindcss',
    'nuxt-aos',
    '@nuxtjs/i18n',
  ],
  css: ['~/styles/globals.css'],
  plugins: [
    { src: '~/plugins/Vue3Lottie.client.js', mode: 'client' },
    { src: '~/plugins/Intercom.client.js', mode: 'client' },
    { src: '~/plugins/Flickity.js', ssr: false },
    { src: '~/plugins/FloatingVue.js', ssr: false },
  ],
  i18n: {
    vueI18n: './i18n/i18n.config.js',
  },
  devServer: {
    host: 'myhost',
    port: 443,
    https: {
      key: './cert/myhost-key.pem',
      cert: './cert/myhost.pem'
    }
  },
})

for the versions used

    "nuxt": "^3.13.0",
    "vue": "latest",

The solution to this problem was to whether disable the SSR mode key in the nuxt config by making it false or by rechecking the behavior of rendering some of the components that they're CSR without wrapping them in a ClientOnly component tag.