Support for SSR

[efoken]

Any plans supporting SSR? It breaks when rendering/applying the global styles, complaining that document is not defined - obviously 😄

[milesj]

@efoken Is there a stack trace? I can probably add conditionals around the document checks.

[efoken]

@milesj FYI, I used Razzle in my project... here is my stacktrace:

ReferenceError: document is not defined

  15 | const server = express()
  16 |   .disable('x-powered-by')
> 17 |   .use(express.static(process.env.RAZZLE_PUBLIC_DIR!))
  18 |   .get('/*', (req: express.Request, res: express.Response) => {
  19 |     const context = {};
  20 |     const markup = renderToString(

    at AphroditeAesthetic.applyGlobalStyles (/Users/efoken/Code/artwithaliens/node_modules/aesthetic/lib/Aesthetic.js:64:5)
    at AphroditeAesthetic.createStyleSheet (/Users/efoken/Code/artwithaliens/node_modules/aesthetic/lib/Aesthetic.js:106:10)
    at useStyles (/Users/efoken/Code/artwithaliens/node_modules/aesthetic-react/lib/useStylesFactory.js:44:27)
    at WithStyles (/Users/efoken/Code/artwithaliens/node_modules/aesthetic-react/lib/withStylesFactory.js:57:26)
    at processChild (/Users/efoken/Code/artwithaliens/node_modules/react-dom/cjs/react-dom-server.node.development.js:3090:14)
    at resolve (/Users/efoken/Code/artwithaliens/node_modules/react-dom/cjs/react-dom-server.node.development.js:3013:5)
    at ReactDOMServerRenderer.render (/Users/efoken/Code/artwithaliens/node_modules/react-dom/cjs/react-dom-server.node.development.js:3436:22)
    at ReactDOMServerRenderer.read (/Users/efoken/Code/artwithaliens/node_modules/react-dom/cjs/react-dom-server.node.development.js:3395:29)
    at renderToString (/Users/efoken/Code/artwithaliens/node_modules/react-dom/cjs/react-dom-server.node.development.js:3954:27)
    at module.exports../src/server.tsx.express__WEBPACK_IMPORTED_MODULE_1___default.disable.use.get (/Users/efoken/Code/artwithaliens/src/server.tsx:17:1)

EDIT:

After some research, there is also a warning when I use the hook with useStylesFactory from aesthetic-react, complaining that we should not use useLayoutEffect on server-side....

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.

Which is used in node_modules/aesthetic-react/esm/useStylesFactory.js, line 32

[milesj]

I'm not sure how to fix the hook issue. useLayoutEffect is used since we basically need sync rendering, and not async. I'll google around and see how others handle this.

[efoken]

I don't know, maybe something like typeof window !== 'undefined' ? useLayoutEffect : useEffect

I found this: https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a

[milesj]

This has landed btw.