Document is not being fetched when csr is set to true.

[RuzgarDogu]

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 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.

[ngramp]

onmount is called when a component is rendered to the DOM, i.e., on the browser, client side. Think about it, what even is a "mount" on the server? The server just runs things, it doesn't render. If you want a way to tell the server that the client has rendered, you need to put it in client side code and send it back to the server. Be warned though that would be a very VERY busy client.