Doesn't work with react-lazyload ?

[golubvladimir]

The first download does not load images (SSR load). Wrapping did not help.

<ClientSideComponent>
                                <LazyLoad>
                                    <div
                                        className='news-card-gorizontal-item__img-content'
                                        style={{ backgroundImage: 'url('+ img +')' }}
                                    />
                                </LazyLoad>
</ClientSideComponent>

[theKashey]

That is not related. There is no way ClientSideComponent could interfere with LazyLoad and affect the way it works.

Plus - you haven't explained what is not working, and how it should work from your point of view.

[golubvladimir]

@theKashey The markup in the wrapper does not appear when the page loads (SSR load). Only after switching between pages.

My decision, but not very good.

isThisServer() ?
  <div
    className='news-card-gorizontal-item__img-content'
    style={{ backgroundImage: 'url('+ img +')' }}
  />
: <LazyLoad>
    <div
        className='news-card-gorizontal-item__img-content'
         style={{ backgroundImage: 'url('+ img +')' }}
      />
   </LazyLoad>

[theKashey]

ClientSideComponent is expected to be visible only on the server. Also add hydrated prop to make the result HTML be equal during the hydrate step. Also, don't forget to wrap your entire application with PrerenderedControler, as long it contains all the logic to handle these operations.

[golubvladimir]

@theKashey This does not work. Component

<ClientSideComponent>
                                <LazyLoad>
                                    <div
                                        className='ts-news-card-gorizontal-item__img-content'
                                        style={{ backgroundImage: 'url('+ img +')' }}
                                    />
                                </LazyLoad>
</ClientSideComponent>

Client

        <PrerenderedControler hydrated>
            <Provider store={store}>
                <BrowserRouter>
                    <AppMain />
                </BrowserRouter>
            </Provider>
        </PrerenderedControler>;

Server

                   <PrerenderedControler>
                        <ChunkExtractorManager extractor={extractor}>
                            <Provider store={ store }>
                                <StaticRouter context={ context } location={ req.url }>
                                    <JssProvider registry={sheets}>
                                        <AppMain />
                                    </JssProvider>
                                </StaticRouter>
                            </Provider>
                        </ChunkExtractorManager>
                    </PrerenderedControler>;

[theKashey]

Well.... in short

https://github.com/theKashey/react-prerendered-component/blob/master/src/PrerenderedControl.tsx#L73-L79

should set this variable to true

 componentDidMount() {
    if (this.props.hydrated) {
      this.setState({
        hydrated: false // 🤷‍♂️🤷‍♂️🤷‍♂️
      })
    }
  }

And there is even test for it 💩

[theKashey]

No, I was not correct - hydrated:false it the right value. https://codesandbox.io/s/nervous-feather-0ijtd - here is a minimal representation, and it works as expected.