search

akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.73k stars 2.1k forks source link

Lazy-loading & SEO for hidden carousel elements #1469

Open oyeanuj opened 5 years ago

oyeanuj commented 5 years ago

Hi folks! Thanks for maintaining this port!

So, I am using this in a server rendered context to show a list of clickable cards. Now with Lazy loading, it doesn't create those components on initialization which would affect SEO for the page since those card links aren't discoverable.

Is there any way to have SEO not suffer in such a case? If not, would you consider adding a placeholder prop which renders a placeholder component for lazy loading cases?

If we do that, I imagine line 113 below would need to change to instead render the placeholder component: https://github.com/akiran/react-slick/blob/48c93ed36cfb58991e6bf4d34a1a588094281d12/src/track.js#L106-L114

oyeanuj commented 5 years ago

Another option if this should be solved in the userland is to provide a renderChild method for the children items that is called with a flag like isVisible. In that case, the placeholder logic can be shifted to the user.

Thoughts @akiran @laveesingh @maddhruv?

lucashfreitas commented 5 years ago

I am facing the same issue using SSR. Did you find any solution for that @oyeanuj ?

lucashfreitas commented 5 years ago

@oyeanuj I solved this problem setting sliderContent lazyLoading property to false. Now all the slides contents are being rendered for SEO.

const settingsSliderContent = { dots : false, lazyLoad : false, infinite : false, arrows : true, fade : true, speed : 500, slidesToShow : 1, slidesToScroll: 1, swipeToSlide : false, accessibility: true,

oyilmaztekin commented 4 years ago

@lucashfreitas Providing a placeholder content rendered by the server while the original content is progressively loading is a good example. That is why @oyeanuj suggested adding a placeholder prop as a feature. Setting lazyload property as a false also prevents progressive loading. Rendering small-sized placeholder content by the server for SEO purposes also loading original big-sized content progressively... or similar solution that we expected.

debjits1 commented 1 year ago

@oyeanuj @oyilmaztekin I am facing the same issue. Googlebot does not crawl the lazyloaded items, also I don't render the slides at SSR. Can anyone help me here?

adamjez commented 1 year ago

I'm facing the same issue too. The behavior changed in the version 0.27.1: https://github.com/akiran/react-slick/commit/8ae0e38218da99ac87b3322306ca693a17c5a9f2

Behavior before version 0.27.1: Initial slide was rendered even with lazy loading enabled in server-side rendering.

Behavior in version 0.27.1 and forward: No slide is rendered with lazy loading enabled in server-side rendering.