Vue.js Carousels: SSR Support And Performance
Tags: javascript, vue, webdev, webperf
Published: 2020-01-20 15:05:44


# Web Performance Optimization

I am one of the CoE members in [GSShop](http://company.gsshop.com/). 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](https://web.dev/why-speed-matters/). This article is from the journey exploring the SSR support of the [Vue.js](https://vuejs.org/) carousels. It ends with making the [vue-slick-carousel](https://github.com/gs-shop/vue-slick-carousel).

## CSR(Client Side Rendering) With A Spinner

The site is a SPA(Single Page Application) made with [Vue.js](https://vuejs.org/). Vue.js, like [React](https://reactjs.org/), 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)](https://developers.google.com/web/updates/2019/02/rendering-on-the-web#server-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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gm64fsrszya86t5a505k.png)

## SSR(Server Side Rendering) With Placeholders

[SSR(Server Side Rendering)](https://developers.google.com/web/updates/2019/02/rendering-on-the-web#server-rendering) allows the server to render the HTML so that the browser can quickly show what visitors want without evaluating javascript. [Nuxt.js](https://nuxtjs.org/)(like [Next.js](https://nextjs.org/) 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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wd77hgfl1w02d4zxnwvn.png)


# 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](https://github.com/wlada/vue-carousel-3d), which has a specialty in 3d rendering).

1. [**vue-awesome-swiper**](https://github.com/surmon-china/vue-awesome-swiper) 🏆 Swiper component for @vuejs
2. [**vue-carousel**](https://github.com/SSENSE/vue-carousel) A flexible, responsive, touch-friendly carousel for Vue.js
3. [**vue-concise-slider**](https://github.com/warpcgd/vue-concise-slider) vue-concise-slider,A simple vue sliding component
4. [**vue-agile**](https://github.com/lukaszflorczak/vue-agile) A carousel component for Vue.js
5. [**vue-slick**](https://github.com/staskjs/vue-slick) Vue component for Slick-carousel

## Example Settings

I prepared the SSR examples for the carousels using Nuxt.js([vue-awesome-swiper](https://github.com/kyuwoo-choi/nuxt-vue-awesome-swiper-example), [vue-agile](https://github.com/kyuwoo-choi/nuxt-vue-agile-example), [vue-carousel](https://github.com/kyuwoo-choi/nuxt-vue-carousel-example), [vue-concise-slider](https://github.com/kyuwoo-choi/nuxt-vue-concise-slider-example), [vue-slick](https://github.com/kyuwoo-choi/nuxt-vue-slick-carousel-example), [vue-slick-carousel](https://github.com/kyuwoo-choi/nuxt-vue-slick-carousel-example)). Also, you can run those on codesandbox([vue-awesome-swiper](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-vue-awesome-swiper-example), [vue-agile](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-vue-agile-example), [vue-carousel](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-vue-carousel-example), [vue-concise-slider](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-vue-concise-slider-example), [vue-slick](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-vue-slick-carousel-example), [vue-slick-carousel](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-vue-slick-carousel-example)).

### 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](https://github.com/lukaszflorczak/vue-agile), [vue-carousel](https://github.com/SSENSE/vue-carousel), [vue-concise-slider](https://github.com/warpcgd/vue-concise-slider), [vue-slick](https://github.com/staskjs/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](https://developer.mozilla.org/en-US/docs/Web/API/Window) through `window` object to manipulate the [DOM elements](https://developer.mozilla.org/en-US/docs/Web/API/Element). However, this problem occurs because that does not exist on the server.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nhrx1aq83l6sy2vfrmbe.png)

To avoid the errors, The carousels should be registered on [client-side only mode](https://nuxtjs.org/guide/plugins/#client-side-only) and wrapped by [client-only(no-ssr)](https://nuxtjs.org/api/components-client-only/) component. Here're the demos([vue-agile](https://github.com/kyuwoo-choi/nuxt-vue-agile-example), [vue-carousel](https://github.com/kyuwoo-choi/nuxt-vue-carousel-example), [vue-concise-slider](https://github.com/kyuwoo-choi/nuxt-vue-concise-slider-example), [vue-slick](https://github.com/kyuwoo-choi/nuxt-vue-slick-carousel-example)) and codesandboxes([vue-agile](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-vue-agile-example), [vue-carousel](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-vue-carousel-example), [vue-concise-slider](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-vue-concise-slider-example), [vue-slick](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-vue-slick-carousel-example))

### Component Template
```html
    <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
```html
    <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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fdgsubeidxrnoarj1vqy.png)

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](https://github.com/surmon-china/vue-awesome-swiper)

[vue-awesome-swiper](https://github.com/surmon-china/vue-awesome-swiper) is the most popular Vue.js carousel component. vue-awesome-swiper offers a [special way for server rendering](https://github.com/surmon-china/vue-awesome-swiper/tree/master/examples/nuxt-ssr-example). You write the rendered DOM structure manually into the component template then the browser runs the [custom directive](https://vuejs.org/v2/guide/custom-directive.html) 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](https://github.com/kyuwoo-choi/nuxt-vue-awesome-swiper-example) & [codesandbox](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-vue-awesome-swiper-example).

### Component Template

```html
    <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

```html
    <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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/393ca2nk13i8e4wsb7m9.png)

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](https://github.com/gs-shop/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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/swtvpz2o82lcymkjc2gk.png)

Here it is. I made the [vue-slick-carousel](https://github.com/gs-shop/vue-slick-carousel) because of the reasons. Long story short, I ended up writing the vue-slick-carousel by porting the [react-slick](https://github.com/akiran/react-slick). I tested by matching the result of the [vue-server-renderer](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer) for the vue-slick-carousel to the result of the [react-dom server](https://reactjs.org/docs/react-dom-server.html) for react-slick. I kept in mind that the rendering result works for every carousel settings. Here's the [example](https://github.com/kyuwoo-choi/nuxt-vue-slick-carousel-example) & [codesandbox](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-vue-slick-carousel-example).

## Component Template

```html
    <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

```html
    <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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/u3z2vsotwxu8eyh2e3ct.png)

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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lbhfxi4u0hsxb7ka7y6k.png)

# 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.