Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

kaiserkais's avatar

Inertia + React SSR + IntersectionObserver is not defined

hi, im getting this error in my inertia + ssr app

IntersectionObserver is not defined

i think i should implement the IntersectionObserver in the ssr.js but i dont know how help guys .

import React from 'react'
import ReactDOMServer from 'react-dom/server'
import { createInertiaApp } from '@inertiajs/inertia-react'
import createServer from '@inertiajs/server'
import route from '../../vendor/tightenco/ziggy/dist/index.m';

const appName = 'lara DZ';


createServer((page) => createInertiaApp({
  page,
  render: ReactDOMServer.renderToString,
  title: (title) => `${title} - ${appName}`,
  resolve: name => require(`./Pages/${name}`),
  setup: ({ App, props }) => {
    global.route = (name, params, absolute) =>
        route(name, params, absolute, {
            ...page.props.ziggy,
            location: new URL(page.props.ziggy.location),
        });

    return <App {...props} />;
},
}))

and this is the component where use the observer

import React,{ useEffect, useState } from "react"

export default function useOnScreen(ref) {

    const [isIntersecting, setIntersecting] = useState(false)

    const observer = new IntersectionObserver(
        ([entry]) => setIntersecting(entry.isIntersecting)
    )

    useEffect(() => {
        observer.observe(ref.current)
        // Remove the observer as soon as the component is unmounted
        return () => { observer.disconnect() }
    }, [])

    return isIntersecting
}
0 likes
0 replies

Please or to participate in this conversation.