Plate & Next SSR

[haydencarlson]

Hello Everyone!

Has anyone had success with Plate and SSR?

I'm using the latest Next, Plate & React 17.

I've tried providing the initialValue from the server but Slate is never included in the SSR'd HTML.

I've created a simple sandbox to show the issue
https://stackblitz.com/edit/nextjs-xwkzob

I'm guessing this has to do with all the useEffect's that run while Plate is initialized, but not too sure how that could be avoided.
Are there any ideas on how to get SSR working with Plate?

[kuccello]

You will either need to manually downgrade to version 16 or use dynamic loading.

eg.

import dynamic from 'next/dynamic'
import { Suspense } from 'react'

const DynamicEditor = dynamic(() => import('../components/my-editor'), {
  suspense: true,
  ssr: false
})

export default function Home() {
  return (
    <Suspense fallback={`Loading...`}>
      <DynamicEditor />
    </Suspense>
  )
}

[haydencarlson]

I'm looking to render Plate from the server so that it's served in the original HTML so there is no initial loading state.

[zbeyens]

Can you try it out with Plate 17?

[haydencarlson]

Thank you @zbeyens
Confirmed working in 17.0.0 in our App.