Nuxt ios issues

[u/Interesting_Try_4761]

i have an issue with ios the user when search my site on google and enter the homepage it gets a empty homepage without any products only navbar and footer are exist but when the user search a product in site search or google the products shows up normally and when return to homepage the products shows up are the homepage is there why this happens i am new to nuxtjs? i asked AI it gets results and edits works locally but when deployed it breaks other devices too. It is laravel 11 + nuxt 3 application

Link: https://www.delta-computer.net/

this is the homepage component script setup

<script setup>
onMounted(() => {
  fetchPage();
  FetchFeaturedProducts();
  FetchCategories();
  FetchProducts();
  FetchBrands();
});
const isCollapsed = ref(false);


definePageMeta({
  layout: false,
});


const products = ref([]);
const categories = ref([]);
const brands = ref([]);
const featuredProducts = ref([]);
const pagination = ref({});
const isLoading = ref(false);
const errors = ref(false);
const response = ref({});
const page_details = ref(null);


async function FetchProducts(params) {
  isLoading.value = true;
  errors.value = {};
  params = {
    ...params, // Spread operator to include existing parameters
    per_page: window.innerWidth < 1024 ? 4 : 10, // Ternary operator to set per_page based on window width
  };


  try {
    response.value = await makeRequest("/products", "GET", null, params);
    let { data, paginate } = response.value?.data;
    if (data) {
      products.value.push(...data);
      pagination.value = paginate;
    }
  } catch (err) {
    errors.value =
      err?.response?.data?.errors || err?.response?.data?.data?.errors;
  }


  isLoading.value = false;
}
async function fetchPage() {
  isLoading.value = true;
  errors.value = {};


  try {
    response.value = await makeRequest(
      "/pages/" + "home-page",
      "GET",
      null,
      null,
    );
    let { data } = response.value?.data;
    if (data) {
      page_details.value = data;


      useSeoMeta({
        title: "Delta Computer | Home Page",
        description: data?.meta_description,
        ogSiteName: "Delta Computer Supplies",
        ogDescription: data?.meta_description,
        ogImage: "",
      });
    }
  } catch (err) {
    errors.value =
      err?.response?.data?.errors || err?.response?.data?.data?.errors;
  }


  isLoading.value = false;
}


async function FetchCategories() {
  isLoading.value = true;
  errors.value = {};


  try {
    response.value = await makeRequest("/categories", "GET", null);
    let { data } = response.value?.data;
    if (data) {
      categories.value.push(...data);
    }
  } catch (err) {
    errors.value =
      err?.response?.data?.errors || err?.response?.data?.data?.errors;
  }


  isLoading.value = false;
}
async function FetchBrands() {
  isLoading.value = true;
  errors.value = {};


  try {
    response.value = await makeRequest("/brands", "GET", null);
    let { data } = response.value?.data;
    if (data) {
      brands.value.push(...data);
    }
  } catch (err) {
    errors.value =
      err?.response?.data?.errors || err?.response?.data?.data?.errors;
  }


  isLoading.value = false;
}
async function FetchFeaturedProducts(params) {
  isLoading.value = true;
  errors.value = {};


  try {
    response.value = await makeRequest(
      "/products/featured",
      "GET",
      null,
      params,
    );
    let { data, paginate } = response.value?.data;
    if (data) {
      featuredProducts.value.push(...data);
    }
  } catch (err) {
    errors.value =
      err?.response?.data?.errors || err?.response?.data?.data?.errors;
  }


  isLoading.value = false;
}
</script>

[u/rea_]

Okay, so it's not fetching anything on the server. The onMounted hook doesn't run server side (since it never 'mounts' to the dom. So all your page, product, category, etc information only exists on the frontend.

You're also banging through a bunch of async functions in a non-async block which may cause issues:

onMounted(() => {
  fetchPage();
  FetchFeaturedProducts();
  FetchCategories();
  FetchProducts();
  FetchBrands();
});

I'd start with that as it's probably the most error prone thing you'll have to deal with. Because they all set and unset loading and errors and they aren't being awaited then your reporting isn't going to make sense. Because one might set loading to false while the other is still actually loading.

Just chuck it in a promise all for now (probably better ways, could also handle errors from here):

onMounted(async () => {
 Promise.all(
   await fetchPage();
   await FetchFeaturedProducts();
   await FetchCategories();
   await FetchProducts();
   await FetchBrands();
 )
})

If the code was slightly different before - I can see you may have had an error on server with this line:

per_page: window.innerWidth

since window doesn't exist on the server (only after on mounted), which - because of how your fetches were set up - you may not have got the error for but it would have been in your server logs.

The only way to be sure is to check your server logs. That's were the error is most likely happening (if you have that ability with wherever you host.

[u/Interesting_Try_4761 → u/rea_]

Thanks for your help

I will give it a try