Support for search bots

This issue has been tracked since 2017-07-19.

Hi @jasonslyvia Thank you for putting out this library. Wondering if it supports showing the components to Google and other search engine bots, and/or if that is something you'd consider adding?

jasonslyvia wrote this answer on 2017-07-20

Do you mean using LazyLoad in Server Side Rendering situation?

oyeanuj wrote this answer on 2017-07-20

@jasonslyvia I meant showing the images or the components when being crawled by Google, etc, but that is similar to server-side rendering - how does it work to render the image/component then?

jasonslyvia wrote this answer on 2017-07-20

In SSR case, LazyLoad will render nothing.

oyeanuj wrote this answer on 2017-07-20

@jasonslyvia I think the search bot case is then different. In that case, you do want to have everything loaded and discoverable.

People tend use the logic specified here or here.

Thoughts?

andrepcg wrote this answer on 2017-10-19

I would also appreciate logic to return the children of <Lazyload> if it's being server-side rendered, instead of <div class="lazyload-placeholder"></div>

Redmega wrote this answer on 2017-10-23

What about pages where you want lazyloading for long lists of components but the page itself is server-side rendered? This wouldn't make sense in that regard, it would completely nullify any benefits of using the library

ptrwllrt wrote this answer on 2017-10-30

Currently in need of the same feature. I wonder if this could easily done with a prop to disable the lazy functionality? So everyone could apply their own rules on when to lazyload or not. It's basically:
if (noLazy) { return this.props.children } But it should also not attach all events etc

I started taking the lib apart but go a bit lost. Any one up for the implementation? :)

jasonslyvia wrote this answer on 2017-10-30

@cainvommars If you can apply your logic in runtime, why not just:

render() {
  return (
    noLazy ? <Component /> : <LazyLoad><Component /></LazyLoad>
  );
}

So what you ask is basically just an option to implement aforementioned logic?

ptrwllrt wrote this answer on 2017-10-30

@jasonslyvia All good. This is what I've just build. I can totally work with that! Having a boolean to switch lazy on and off would just clean this up and might help others facing the same issue.

<LazyLoadOrChildren
  config={{once: true, offset: 200}}
  noLazyLoad={isThisAServer()}>
    <MyChildren />
</LazyLoadOrChildren>
import * as React from 'react';
import LazyLoad from 'react-lazyload';

function LazyLoadOrChildren(props: {
  config: {
    once?: boolean,
    height?: number,
    offset?: number | $ReadOnlyArray<number>
  },
  children: React.Node,
  noLazyLoad?: boolean
}) {
  if (props.noLazyLoad) {
    return props.children;
  }
  return <LazyLoad {...props.config}>{props.children}</LazyLoad>;
}

LazyLoadOrChildren.defaultProps = {
  config: {
    once: false,
    height: undefined,
    offset: 0
  },
  noLazyLoad: false
};
export default LazyLoadOrChildren;

Btw: Its a nice lib, I just threw it in and it does the job!

jasonslyvia wrote this answer on 2017-10-31

thanks, that's exactly what I expect this lib to do 😉

jf423 wrote this answer on 2017-11-09

@cainvommars �How do you know isThisAServer ?

TikiCat7 wrote this answer on 2017-11-17

@jf423 One way to do it would be to use a webpack plugin to inject some type of is_Browser variable. https://webpack.js.org/plugins/banner-plugin/

webpack.config.client.js

    new webpack.BannerPlugin({
      banner: "__isBrowser__ = false;",
      raw: true,
      include: /\.js$/
    })

webpack.config.serverjs

    new webpack.BannerPlugin({
      banner: "__isBrowser__ = true;",
      raw: true,
      include: /\.js$/
    })
ptrwllrt wrote this answer on 2018-01-31

@jf423 My use case changed slightly. I'm now always render the first 30 photos in a grid and if the index is greater than 30 they get lazy loaded. So no need for the server side detection. - This works for me only because my users can will always start on the beginning of the photo grid.

oliviertassinari wrote this answer on 2018-05-22

Google is able to execute JS, but won't scroll the page. As soon as a non scrollable UA is detected (for example Opera mobile or google bot) all images are transformed instantly.
This means google will not see the transparent image, but will probably index your data-src={src}.

For benchmarking consideration: lazysizes approach

IcanDivideBy0 wrote this answer on 2018-11-14
25
const img = <img src="/image.jpg" alt="" />;

return (
  <>
    <LazyLoad height={200}>{img}</LazyLoad>
    <noscript>
      <style>{`.lazyload-placeholder { display: none; }`}</style>
      {img}
    </noscript>
  </>
);

During server-side rendering, the placeholder will be placed along with the image in a noscript tag.
Search engines will crawl images in noscript tag, while browsers won't load it (until LazyLoad replace the placeholder)!

Also the image will still be shown to users browsing your server-side rendered site with JS disabled!

If you’re using it a lot, consider putting the style tag once for all elsewhere in your document, but still inside a noscript.

jhoffmcd wrote this answer on 2019-02-13

@IcanDivideBy0 this was a better solution then checking server. It ensures our markup remains consistent on both client and server renders. Not sure if there is anything react-lazyload could do other then add this as default functionality. It is a major SEO concern.

abriginets wrote this answer on 2021-10-17

Not sure if this is still relevant to anyone but I would suggest adding enabled prop. For example, in Next.JS we have process.browser which is the boolean flag indicating if current environment is SSR or client-side. Using enabled prop we could easily match react hydration processes without mounting and unmounting components.

More Details About Repo
Owner Name twobin
Repo Name react-lazyload
Full Name twobin/react-lazyload
Language JavaScript
Created Date 2015-08-07
Updated Date 2022-11-29
Star Count 5639
Watcher Count 52
Fork Count 482
Issue Count 153

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date