@electric-sql/react with next.js hydration mismatch

[tonyxiao]

Initial load works great. Subsequent load I get next.js hydration mismatch issue.
This is my component code.

'use client'

import {useShape} from '@electric-sql/react'

export default function TransactionList() {
  const {data} = useShape({
    url: `http://localhost:3334/v1/shape`,
    params: {
      table: `transaction`,
      columns: ['connection_id', `id`, `amount`, `currency`, 'memo'],
    },
  })

  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

And this is the error I get.

Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

[KyleAMathews]

Hmm we do have a nextjs example which doesn't have this issue — https://github.com/electric-sql/electric/tree/main/examples/nextjs Perhaps we did something to disable SSR?

I'm not super familiar with next.js so not entirely sure what's going on.

BTW, we do have WIP support for SSR — #2232 which presumably fix the issue you're seeing.