Ленивая загрузка изображений в Next.js и / или в других формах рендеринга на сервере React - PullRequest
Новая
       9

Ленивая загрузка изображений в Next.js и / или в других формах рендеринга на сервере React

0 голосов
/ 04 января 2019

Я использую Next.js для рендеринга нового проекта на стороне сервера. У меня есть базовый проект с маршрутизацией и работает. Я использую TypeScript, но сомневаюсь, что это важно.

Я бы хотел, чтобы изображения загружались с отложенной загрузкой, но я не нашел ни одного компонента, поддерживающего отложенную загрузку изображений для рендеринга на стороне сервера.

Вот как я вижу вещи на данный момент -

Рендеринг на стороне сервера ответит клиенту шаблоном HTML первого рендеринга страницы.

На стороне клиента, после загрузки HTML, изображения начнут ленивую загрузку в соответствии с логикой на стороне клиента.

Я очень новичок в рендеринге на стороне сервера. Думаю, у меня возникнет аналогичная проблема с другими функциями, которые должны отображаться во время выполнения на стороне клиента.

Я пытаюсь понять, как отделить логику для первого рендеринга, который происходит на стороне сервера, и дальнейшего динамического рендеринга, который я хотел бы выполнить впоследствии на стороне клиента, как любое другое одностраничное приложение.

1 Ответ

0 голосов
/ 12 февраля 2019

Я думаю, что вы видите это правильно, для кода на стороне клиента (например, lazyload) я часто использую методы жизненного цикла componentDidMount.

HOC, как это должно сделать свое дело. 

function lazyLoadImages(selector = 'img') {
    function createObserver() {
        const elements = document.querySelectorAll(selector);
        const observer = new window.IntersectionObserver((entries, observerChild) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting && entry.target.getAttribute('data-src')) {
                    entry.target.src = entry.target.getAttribute('data-src');
                    entry.target.removeAttribute('data-src');
                    observerChild.unobserve(entry.target);
                }
            });
        }, {});

        Array.prototype.map.call(elements, function(item) {
            observer.observe(item);
        });
    }

    if (!('IntersectionObserver' in window)) {
        const polyfill = document.createElement('script');
        polyfill.src = 'https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver';
        document.head.appendChild(polyfill);

        polyfill.onload = () => {
            createObserver();
        };
        return;
    }

    createObserver();
}

const LazyLoadHOC = (Page) => {
    return class extends React.Component {
        static getInitialProps(ctx) {
            if(Page.getInitialProps)
                return Page.getInitialProps(ctx);
        }

        componentDidMount() {
           lazyLoadImages('img');
        }

        render() {
            return <Page {...this.props}/>
        }

    }
}

Теперь вы можете обернуть свои страницы с помощью LazyLoadHOC и заменить src на data-src для всех изображений, которые вы хотите загружать с отложенной загрузкой.

...