0

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>？

建议？

4

1 回答 1

0

我最终做了：

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;
于 2021-12-08T15:30:05.990 回答