KyuWoo Choi for gsshop

Posted on Jan 20, 2020 • Originally published at kyu.io

Vue.js Carousels: SSR Support And Performance

#javascript #vue #webdev #webperf

Web Performance Optimization

I am one of the CoE members in GSShop. Our company invests startups, and I help them to grow. Last time, I was helping the Vietnamese company by making their web faster. Cool! See how web performance affects your business. This article is from the journey exploring the SSR support of the Vue.js carousels. It ends with making the vue-slick-carousel.

CSR(Client Side Rendering) With A Spinner

The site is a SPA(Single Page Application) made with Vue.js. Vue.js, like React, is one of the famous tech stacks of modern web development. Despite the SPA's many advantages, it has the disadvantage of long loading time due to the CSR(Client Side Rendering). The long loading time is because the browser doesn't know what to render on the screen until the browser evaluates javascript. So it usually put the spinner to say, "Please, don't leave. We're working on it." I wish the magic circle works, but It doesn't.

SSR(Server Side Rendering) With Placeholders

SSR(Server Side Rendering) allows the server to render the HTML so that the browser can quickly show what visitors want without evaluating javascript. Nuxt.js(like Next.js for React) provides best practices, including SSR, to help us build fast web sites.

We've enabled SSR using Nuxt.js to get rid of the spinner and quickly render the site's contents. SSR made the browser to render fast without having to wait for evaluating the javascript. But this site is made up of many carousel components. The carousel component doesn't support SSR, so it can't quickly render important things like promotions. We removed the spinner, rendered contents instantly, but had to put a lot of placeholders for the carousels. As with before, the contents of the carousels were rendered only a long time after it evaluates the javascript.

Wanted: Server Side Rendering Vue.js Carousel

Although it looked much better than before, visitors didn't come to see the placeholders. To truly improve UX, we needed a carousel with SSR support.

Top 5 Vue.js Carousels

To see which carousels work with SSR best, I tested the top 5 carousels on GitHub(except vue-carousel-3d, which has a specialty in 3d rendering).

vue-awesome-swiper 🏆 Swiper component for @vuejs
vue-carousel A flexible, responsive, touch-friendly carousel for Vue.js
vue-concise-slider vue-concise-slider,A simple vue sliding component
vue-agile A carousel component for Vue.js
vue-slick Vue component for Slick-carousel

Example Settings

I prepared the SSR examples for the carousels using Nuxt.js(vue-awesome-swiper, vue-agile, vue-carousel, vue-concise-slider, vue-slick, vue-slick-carousel). Also, you can run those on codesandbox(vue-awesome-swiper, vue-agile, vue-carousel, vue-concise-slider, vue-slick, vue-slick-carousel).

The Examples:

Are created on top of Nuxt.js with universal(SSR) mode.
Are wrote by following the examples of the components.
Have image items as we're likely having one or more in real life.
Have identically styled. No dots, no arrows.

Profile Configuration:

Build for production and run a local server to minimize network Interference.
Chrome performance profile with Fast 3G Network + 4x slowdown CPU throttling.

vue-agile, vue-carousel, vue-concise-slider, vue-slick

These carousels do not support SSR. Trying to render these carousels on the server will throw errors. In most cases, the carousels try to access the browser through window object to manipulate the DOM elements. However, this problem occurs because that does not exist on the server.

To avoid the errors, The carousels should be registered on client-side only mode and wrapped by client-only(no-ssr) component. Here're the demos(vue-agile, vue-carousel, vue-concise-slider, vue-slick) and codesandboxes(vue-agile, vue-carousel, vue-concise-slider, vue-slick)

Component Template

    <div class="carousel-wrapper">
      <client-only>
        <agile :options="options">
          <div v-for="i in 5" :key="i" class="img-wrapper">
            <img :src="`./${i}-200x100.jpg`" />
          </div>
        </agile>
      </client-only>
    </div>

The carousel components need to be wrapped by client-only to avoid the error.

Server Render Result

    <div class="carousel-wrapper">
      <!---->
    </div>

The server renders blank inside client-only. The browser will render the carousel after it evaluates the necessary javascript.

Performance Profile

After receiving the server's response, the browser must evaluate the javascript to draw the carousel. Images included in the carousel children can only be downloaded and painted afterward.

vue-awesome-swiper

vue-awesome-swiper is the most popular Vue.js carousel component. vue-awesome-swiper offers a special way for server rendering. You write the rendered DOM structure manually into the component template then the browser runs the custom directive to render again. Thus the server just renders what you wrote in the component template without evaluating the carousel script. It means the SSR result doesn't respect any options passed to the carousel. Below is a vue-awesome-swiper with slidesPerView: 3 options. Here's the demo project & codesandbox.

Component Template

    <div class="carousel-wrapper">
      <div v-swiper:mySwiper="options">
        <div class="swiper-wrapper">
          <div v-for="i in 5" :key="i" class="img-wrapper swiper-slide">
            <img :src="`./${i}-200x100.jpg`" />
          </div>
        </div>
      </div>
    </div>

The custom directive v-swiper is for browsers, server renderer doesn't evaluate it.

Server Render Result

    <div class="carousel-wrapper" data-v-d589df72>
        <div data-v-d589df72>
            <div class="swiper-wrapper" data-v-d589df72>
                <div class="img-wrapper swiper-slide" data-v-d589df72><img src="./1-200x100.jpg" data-v-d589df72></div>
                <div class="img-wrapper swiper-slide" data-v-d589df72><img src="./2-200x100.jpg" data-v-d589df72></div>
                <div class="img-wrapper swiper-slide" data-v-d589df72><img src="./3-200x100.jpg" data-v-d589df72></div>
                <div class="img-wrapper swiper-slide" data-v-d589df72><img src="./4-200x100.jpg" data-v-d589df72></div>
                <div class="img-wrapper swiper-slide" data-v-d589df72><img src="./5-200x100.jpg" data-v-d589df72></div>
            </div>
        </div>
    </div>

The server renders the template as it is. Browser shows a default vue-awesome-swiper having one slide in it. After the browser evaluates the component directive, It updates the carousel for the given options.

Performance Profile

Browsers can download and paint images in the early stages because the first HTML response contains images. As soon as the browser evaluates the script, It can render the carousel with images. But it seems to render the carousel takes more time than the other carousels. It is because of the heavier script. Not only downloading but also evaluating the javascript takes longer.

Writing SSR Support Carousel: vue-slick-carousel

Ok. I tested the most popular carousels. I also looked around the other carousels. But all seemed not working. And I excluded carousels in the UI Frameworks because they do not provide rich features we needed.

Here it is. I made the vue-slick-carousel because of the reasons. Long story short, I ended up writing the vue-slick-carousel by porting the react-slick. I tested by matching the result of the vue-server-renderer for the vue-slick-carousel to the result of the react-dom server for react-slick. I kept in mind that the rendering result works for every carousel settings. Here's the example & codesandbox.

Component Template

    <div class="carousel-wrapper">
        <VueSlickCarousel v-bind="slickOptions">
            <div v-for="i in 5" :key="i" class="img-wrapper">
                <img :src="`./${i}-200x100.jpg`" />
            </div>
        </VueSlickCarousel>
    </div>

vue-slick-carousel works well on the server. Therefore, you can write the template in the usual way, without the client-only tag.

Server Render Result

    <div class="carousel-wrapper">
        <div dir="ltr" class="slick-slider slick-initialized" data-v-6bed67a2>
            <div class="slick-list" data-v-6bed67a2>
                <div class="slick-track" style="width:433.33333333333337%;left:-100%;" data-v-4dc0f449 data-v-6bed67a2>
                    <div tabIndex="-1" data-index="-3" aria-hidden="true" class="slick-slide slick-cloned" style="width:7.6923076923076925%;" data-v-4dc0f449>
                        <div data-v-4dc0f449>
                            <div tabIndex="-1" class="img-wrapper" style="width:100%;display:inline-block;" data-v-4dc0f449><img src="./3-200x100.jpg" data-v-4dc0f449></div>
                        </div>
                    </div>
                    <!-- ... -->
                    <div tabIndex="-1" data-index="9" aria-hidden="true" class="slick-slide slick-cloned" style="width:7.6923076923076925%;" data-v-4dc0f449>
                        <div data-v-4dc0f449>
                            <div tabIndex="-1" class="img-wrapper" style="width:100%;display:inline-block;" data-v-4dc0f449><img src="./5-200x100.jpg" data-v-4dc0f449></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

The server fully make the DOM elements and sends them to the browser. The browser can render on the screen without evaluating any javascript.

Performance Profile

The browser renders the carousel right after the first HTML response. Since the carousel was rendered quick, downloading images can also be started fast.
Undoubtedly, the vue-slick-carousel can show content the fastest and prepare the image resources it needs. The actual site contains a much heavier script, and this performance gap will be even more significant.

Component Support Completes The SSR

All components used by the site must support it for the server to fully render. Thus, the site can deliver what visitors want quickly. Otherwise, In many cases, Trying without the support of components can make the site even slower due to the heavier HTML. Component support completes the Server Side Rendering.
My last project had the same issue. To show content to users faster, we enabled SSR, but this was not possible because no Vue.js carousel supported it. The server is now able to fully render the content using the vue-slick-carousel so that it can deliver content to visitors faster.

What's Next?

Since I started this project to improve performance, I'd like to focus on the goal. And the vue-slick-carousel itself is a new project that has been only a few months old. I want to make it stable. Every issue and PR are welcomed. Your help can make this project mature. Finally, Thank you, react-slick contributors. I'd like to contribute as much as I can while I'm working on this.
Besides the project, I'm thinking of two more articles to share what I learned in the last project. Perhaps due to the population differences, I feel that the react ecosystem is more versatile and mature than the Vue.js ecosystem. Just as is the case with the vue-slick-carousel, I guess it's worth sharing "How to port the react component for the Vue.js." And "Vue.js SSR the hard parts" that I struggled with in my last project.

Top comments (10)

DreaMinder • Jan 26 '20

Hooper would win here, especially after testing bundle size.

Farzad Soltani • Jan 30 '20

Hooper FTW!

runxc1(Bret Ferrier) • Jul 28 '21

Isn't Hooper only Vue2 with no plans to upgrade to Vue3?

DreaMinder • Jul 29 '21

Yes but no. The main contributor is already building something simillar to hooper for Vue3 - github.com/ismail9k/vue3-carousel

Boian Ivanov • Jan 21 '20

Really liked the detailed article on what's the best way to implement an SSR carousel in Vue. Although since I've been through those hoops already, I would recommend a more Vue + CSS approach. Buefy has a really easy-to-use component for carousels that was added quite recently that you could potentially check out. But that's if you are going to use Bulma as your CSS framework of choice. Otherwise the article is quite on point. Good job !

KyuWoo Choi • Jan 22 '20 • Edited

You're right. It's better not to use 3rd party libraries at all as it's overhead. If the carousels provided by the UI frameworks work for you, that's it. But the carousels listed above offer rich features. And only in such cases you should take the carousels above. Because It's smarter to use rather than try to implement that.

Stefano • Feb 4 '20 • Edited

I don't know why, but i can't manage to make it work. The slide is vertical and the slides are one on top of the others! I made a blank project to test it and is still broken:

<template>
  <div>
      <VueSlickCarousel v-bind="carouselSettings">
        <div><h1>Test1</h1></div>
        <div><h1>Test2</h1></div>
        <div><h1>Test3</h1></div>
      </VueSlickCarousel>
  </div>
</template>

<script>

  import VueSlickCarousel from 'vue-slick-carousel'
  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'


export default {
  components: {
      VueSlickCarousel
  },
  data(){
    return{
      carouselSettings:{
        "dots": true,
        "focusOnSelect": true,
        "infinite": true,
        "speed": 500,
        "slidesToShow": 3,
        "slidesToScroll": 3,
        "touchThreshold": 5
      }
    }
  }
}

<style scoped>
h1{
   background-color:red
}