I have been playing around with Nuxt.js and Strapi in the past week. Everything is working fine locally, I'm able to display my content from Strapi in my Nuxt project. When I deploy my static Nuxt project to Netlify or AWS and visit the URL I am shown the components while the page loads. However once fully loaded the component disappears. My Strapi instance is still local, could this be why? But I don't understand why the content renders from Strapi briefly if this was the case.
Here is the URL: https://imran-strapi-poc.netlify.app/
The code for the component within the orange section is as follows:
<template>
<section
class="uk-section uk-section-primary orange uk-section-large"
id="content"
>
<div class="uk-container">
<div
v-for="banner in banners"
:key="banner.id"
class="uk-grid uk-child-width-1-2@l uk-flex-middle"
>
<div class="uk-padding">
<h6>{{ banner.subtitle }}</h6>
<h2 class="uk-margin-small-top uk-h1">{{ banner.title }}</h2>
<p class="subtitle-text">
{{ banner.description }}
</p>
<a
href="#"
class="uk-button uk-button-primary uk-border-pill"
data-uk-icon="arrow-right"
>{{ banner.cta }}</a
>
</div>
<div data-uk-scrollspy="cls: uk-animation-fade">
<img
v-if="banner.image"
:data-src="api_url + banner.image.url"
:alt="banner.title"
uk-img
/>
</div>
</div>
</div>
</section>
</template>
<script>
import bannersQuery from "~/apollo/queries/banner/banner-text";
export default {
data() {
return {
api_url: process.env.strapiBaseUri
};
},
props: {
banners: Array
}
};
</script>
<style lang="scss">
.uk-section-primary.orange {
background: #c64317;
}
</style>
It should render like this:
However once the page loads the content disappears entirely and I'm not sure why. I've read that the SSR conten might not be matching the client side content, but I'm not sure how to fix this?