SSR - Use Only component cause generation different HTML on server and client

What:

When using a component Only server HTML may differ from generated on client with warning:

Warning: Expected server HTML to contain a matching <div> in <div>.

Environment:

• node vesrion: 10.15.0
• npm version: 6.4.1
• atomic-layout version: 0.6.2

Steps to reproduce:

Steps to reproduce the behavior:

Create component on server with such composition:

      <Composition
        template={templateMobile}
        templateMd={templateTablet}
        templateLg={templateMobile}
        templateColsMdOnly='minmax(100px, 1fr) 1fr'
        padding={15}
        gutter={15}
        gutterLg={25}
      >
        {({ Thumbnail, Heading, Actions }) => (
          <>
            <Thumbnail>
              Thumbnail
            </Thumbnail>
            <Heading>
              Heading
            </Heading>
            <Actions>
              <Only from='md' marginRight={10}>
                Button
              </Only>
              Actions
            </Actions>
          </>
        )}
      </Composition>

[kettanaito]

According to our discussion I have set the default value for conditional rendering to be false. This means the conditional content will not be rendered on a server-side, and will not be rendered initially on the client-side as well (to retain proper nodes hydration). After Only component mounting it will re-match the current media query, and re-render the conditional content in case a match occurs.

Published under https://github.com/kettanaito/atomic-layout/releases/tag/0.7.1.

I would be thankful if you could test this behavior in your projects and let me know. Thank you so much for this discussion, @lokhmakov, @bitttttten!

[lokhmakov]

@bitttttten Yep, for client dependent code like pixi.js or atomic-layout/Only we using dynamic import and all works fine, like:

import loadable from '@loadable/component'

const SectionTools = loadable(() =>
  import(`box/2d-editor/editor/web/section/SectionTools`),
)