As soon as I add a simple loading.tsx on a route, a hydration error is caused. The route is static (SSG) so I can otherwise take advantage of my CDN and all its benefits. I have to use use client on this route because I will need useSearchParams on the client-side to allow deep-linking to the page and loading a state (search filters).

loading.tsx

import * as React from 'react'

export default function loading(): React.ReactElement {
  return <p>Loading...</p>
}

page.tsx

import type { Metadata } from 'next'
import * as React from 'react'
import ClientComponent from './page.client'

export const metadata: Metadata = {
  title: 'Test Page',
  robots: process.env['NEXT_PUBLIC_STAGE'] === 'prod' ? 'index, follow' : 'noindex, nofollow',
  alternates: {
    canonical: '/test',
  },
}

export default function ServerTestPage(): React.ReactElement {
  return <ClientComponent />
}

page.client.tsx

'use client'

import * as React from 'react'

export default function TestPage(): React.ReactElement {
  // Will need useSearchParams() here so 'use client' is needed
  return <div>Test</div>
}

As soon as I rename loading.tsx to _loading.tsx to temporarily disable it, there is no hydration error.

I also tried removing the loading.tsx and manually setting the Suspense boundary in page.tsx but the same hydration error happens as with loading.tsx.

This is on NextJs 15.1.0 with React 19.0.0.