I am new to Sveltekit and I am trying to figure out how to handle SSR.
I have a simple Sveltekit application with these configuration:
export const csr = false; export const ssr = true; export const prerender = true;
The main reason for this configuration is to maintain a sustainable SEO. When I set Csr to false, each page is rendered by the server loading Doc to the browser.
I also have an image component <Img> inside which there is an onMount function.
onMount(() => {
console.log('mounted',src);
if (lazyLoad) {
const images = document.querySelectorAll('img.lazy-load');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const image = entry.target;
image.src = image.dataset.src;
image.classList.remove('lazy-load');
observer.unobserve(image);
}
});
});
images.forEach(image => {
observer.observe(image);
});
}});
The main problem here is that this onMount function is never called. Also, beforeUpdate, afterUpdate and if (browser) console.log("browser is true"); do not work either.
I need to find a way to check if dom is loaded while keeping csr set to false.
Main purpose is to have the best SEO, I am open to alternatives.
