SSR support

[Frumba]

Discussed in https://github.com/udecode/plate/discussions/958

^{Originally posted by **Frumba** August 24, 2021} Hello ! I am currently trying to render on server side Plate component but it always return empty string. When using renderToString with plate instance it returns empty string. Is there any way to configure Plate instance to be ready at first render ?

[karthikcodes6]

This is the known issue. useEffect will run only in the Client Side. And, plate only setting the value through useEffect so the data passing through the JS code instead of generating the html code to the client.

To make it work we should pass the initial value directly to the slate editor.

Something like this should work

[Frumba]

Super cool thanks !

In fact i onkly wanted HTML result for export only and not full SSR and i forgot i could use serializeHTMLFromNodes this way:

Absolutely the current problem is that no editor is being initialized in first render loop.

Maybe this issue will help to make a real implementation for SSR.

Thanks a lot for your answer ;)

[dylans]

As a note in case it's useful in the future, Slate has this which might prove useful: https://github.com/ianstormtaylor/slate/blob/main/packages/slate-react/src/hooks/use-isomorphic-layout-effect.ts

In our use of Plate we do something similar to make sure the editor value is never null.

[moneydance]

Was this ever resolved? I think @karthikcodes6 suggestion would fix the problem of null values on initial ssr render but it still seems like the Plate component is relying on an effect to set the initial value.

[pirtlj]

SSR is still not supported, the initialization of the editor via usePlate makes heavy use of useEffect hooks. This makes SSR very difficult. Without SSR plate.js will have significant SEO regression compared to vanilla slate.js. @zbeyens any guidance here on if or when this will be addressed?

[zbeyens]

I want to help on this, any tips? In next major release I plan to migrate from zustand to jotai, which will probably a step forward towards this goal.

[zbeyens]

Fixed in Plate 17

[pirtlj]

ThAnk you so much @zbeyens your work here is very appreciated.