Question

我在下一个官方js文档页面（https://nextjs.org/learn/excel/lazy-loading-components）上查看了有关“延迟加载”组件的文档。我尝试了提到的步骤，但对我没有用。以下是我要延迟加载的代码段：

<div id="cards" className={index.sectionCards} style={{paddingBottom: '0px'}}>
    <div className="title" style={{marginBottom: "0px", paddingBottom: "0px"}}>
        Take a Look at Our Exciting Range of Cards
    </div>
    {this.renderCards()}
    <div></div>
</div>

在这里renderCards函数调用一个后端API并从AWS S3获取图像，整个过程花费很多时间，因此增加了整个页面的加载时间，以下是renderCards函数的代码：

renderCards() {

    const keys = Object.keys(this.state.products);
    const valid_keys = ['Specials', 'New Beginnings', 'Expressions', 'Celebrations' ];
    if(keys.length == 0) return <div></div>
    return (<div className={index.cards}>
                {
                    keys.map((key) => {
                        if(valid_keys.indexOf(key) > -1) return <div style={{ width: '80%', margin: '0 auto' }}>
                            <div className={index.category}>{key}</div>
                            <div style={{ display: 'flex', overflow: 'scroll' }} >
                                {this.state.products[key].map((c) => {
                                    if(c.status == 'PRODUCT_ACTIVE') {
                                        return <img onClick={() => this.onClickProduct(c)} className={index.cardImage} src={`<backend URL here>`} />
                                    }
                                })}
                            </div>
                        </div>
                    })
                }
            </div>)
}

目标是延迟加载此组件以提高整体页面速度。

如果有人知道解决此问题的方法，请分享。

Answer 1

Documentation for dynamic/lazy loading with nextjs

  const Cards = () => {
const renderCards = () => {
  const keys = Object.keys(this.state.products);
  const valid_keys = [
    "Specials",
    "New Beginnings",
    "Expressions",
    "Celebrations",
  ];

  if (keys.length == 0) return <div></div>;
  return (
    <div className={index.cards}>
      {keys.map((key) => (
        <Fragment key={key}>
          {valid_keys.indexOf(key) > -1 && (
            <div style={{ width: "80%", margin: "0 auto" }}>
              <div className={index.category}>{key}</div>
              <div style={{ display: "flex", overflow: "scroll" }}>
                {this.state.products[key].map((c) => (
                  <Fragment key={c.id}>
                    {c.status === "PRODUCT_ACTIVE" && (
                      <img
                        onClick={() => this.onClickProduct(c)}
                        className={index.cardImage}
                        src={`<backend URL here>`}
                      />
                    )}
                  </Fragment>
                ))}
              </div>
            </div>
          )}
        </Fragment>
      ))}
    </div>
  );
};

return (
  <div
    id="cards"
    className={index.sectionCards}
    style={{ paddingBottom: "0px" }}
  >
    <div
      className="title"
      style={{
        marginBottom: "0px",
        paddingBottom: "0px",
      }}
    >
      Take a Look at Our Exciting Range of Cards
      <div>{this.renderCards()}</div>
    </div>
  </div>
);
  };
```
    above code is not my code but a replication of the code in the question.
```
```
from nextjs
For the best understanding of dynamic/lazy load see link provided.
import dynamic from "next/dynamic"; 
```
import LoadSpinner from "../loadSpinner";
const Cards = dynamic(() => import("./cards"), {
```
this can be a custom loader or a node_module installed or just <div>Loading...</div> the loading: function will display while waiting for the import fucntion to load.
  loading: () => <LoadSpinner />,
```
});

const CardContainer = () => ( <Cards /> );

在Next js应用程序中进行延迟加载的最佳方法是什么？

1 个答案: