SSR 下懒加载 React 组件

Question

我有一个使用 react-lazy-load-image-component 构建的 ReactJS 应用程序以提高性能。

我的代码包装了需要时间初始化的组件，例如：

<h2 className={styles.sectionTitle}>Categories</h2>
<Row>
  {categories &&
    categories.map((category, index) => {
      if (category.image) {
        return (
          <Col
            xs={6}
            md={4}
            key={index}
            className={[
              'col-xs-4 col-md-4 col-lg-4 col-xl-3',
              styles.thumbnail
            ].join(' ')}
          >
            <LazyLoadComponent>
              <CategoryButton {...category} />
            </LazyLoadComponent>
          </Col>
        );
      }
      return null;
    })}
</Row>

它工作正常。但是，这是延迟加载，SSR 将我的标记打印为：

<h2>Categories</h2>
<div class="row"></div>

我希望服务器打印所有内容，这样爬虫就可以轻松地为我的页面编制索引。我正在使用的库支持 visibleByDefault 属性，这可能是要走的路。

我只是想知道如何从我的加载程序传递它：

<Capture report={m => modules.push(m)}>
  <Provider store={store}>
    <StaticRouter location={req.url} context={context}>
      <Frontload isServer={true}>
        <App />
      </Frontload>
    </StaticRouter>
  </Provider>
</Capture>

一直到每个<LazyLoadComponent>?

建议？

Answer 1

我最后做了：

import React from 'react';

import { LazyLoadComponent } from 'react-lazy-load-image-component';
import useSSR from 'use-ssr';

const LazyLoad = ({ children }) => {
  var { isServer } = useSSR();
  return (
    <LazyLoadComponent visibleByDefault={isServer}>
      {children}
    </LazyLoadComponent>
  );
};

export default LazyLoad;

SSR 下懒加载 React 组件

Lazy-loading React components under SSR

lazy-loading

reactjs

server-side-rendering

react-lazy-load