SSR

[jt3k]

it would be great if your slider could server side rendering. now it's not like that

[NaotoshiFujita]

I have the SplideRenderer class that generates the slider as an HTML, parsing options and breakpoints into static CSS for the first view. I'm using it for my personal project.

https://github.com/Splidejs/splide/blob/master/src/js/renderer/SplideRenderer/SplideRenderer.ts

import { useRef, useEffect } from 'react';
import { SplideRenderer, Splide } from '@splidejs/splide';
import "path to the css";

const Slider = () => {
  const ref = useRef();
  const renderer = new SplideRenderer( [ '<p>Slide 1</p>', '<p>Slide 2</p>' ] );
  
  useEffect( () => {
    const splide = new Splide( ref.current.node.firstElementChild );
    SplideRenderer.clean( splide );
    splide.mount();

    return () => {
      splide.destroy();
    };
  } );

  return (
    <div ref={ ref } dangerouslySetInnerHTML={ { __html: renderer.html() } } />;
  );
}

But it has many limitations and it will not be official soon (or never be). You can use it at your own risk.

[isener]

Thanks for sharing this class @NaotoshiFujita. I'm sure no one would try to make it work on SSR, personally I'm using it for having the same layout of skeleton loaders, and works like charm!! ❤️