@January 21, 2020
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 assisting Luxstay(Vietnamese share house) 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
SSR(Server Side Rendering) With Placeholders
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
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).
- 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.
- 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)
The carousel components need to be wrapped by
client-only to avoid the error.
Server Render Result
The server renders blank inside
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.
The custom directive
v-swiper is for browsers, server renderer doesn’t evaluate it.
Server Render Result
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.
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.
vue-slick-carousel works well on the server. Therefore, you can write the template in the usual way, without the
Server Render Result
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.
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.