Gridsome vs Nuxtjs vs Vuepress

Perbandingan Gridsome vs Nuxtjs vs Vuepress untuk static site generator

Banyak sekali alternatif / generator untuk membuat sebuah static site dari javascript framework. Kalau di dunia reactjs, yang paling populer adalah Gatsbyjs. Nah karena saya datang dari universe yang lain (Vuejs), maka saya akan bahas sedikit perbedaan / komparasi static site generator yang ada di dunia Vuejs.

Saya hanya akan bahas 3 library / framework ini, entah mungkin ada generator yang lain? Temen - temen bisa sarankan saya untuk coba, tulis di kolom komentar ya.

Gridsome

Pemain baru di bidang static site generator, keunggulan yang paling menonjol dari Gridsome ini adalah di GraphQL nya. Fitur lainnya adalah sudah support PWA, SPA yang SEO-friendly dan pasti nya fast !!!

Silakan berkunjung di web official nya disini https://gridsome.org/

Vuepress

Static site generator official dari Vuejs ini dikhususkan untuk pembuatan dokumentasi. Nah karena dikhususkan untuk pembuatan dokumentasi, jadi vuepress ini ga terlalu powerful jika digunakan untuk fungsi yang lain (Blog / admin dashboard).

Silakan berkunjung di web official nya disini https://vuepress.vuejs.org/

Nuxt.js

Static site generator favorit saya. Nuxt adalah framework untuk Vuejs, jadi framework didalam framework, tujuan nya adalah untuk speed up vuejs development. Dengan berbagai macam senjata nya yang keren, Nuxt ini bisa ditujukan untuk server side rendering, SPA, dan static site generator. Sangat cocok untuk membuat blog markdown base, admin dashboard / panel, company profile, dll.

Silakan berkunjung di web official nya disini https://nuxtjs.org/


Nah penjelasan singkat diatas tadi akan mengantarkan kita ke detail komparasi yang sesungguh nya. 

DescriptionGridsomeNuxtjsVuepress
Server side renderingyesyesno
Pre-renderingyesyesyes
Metayesyesyes
PWAyesyes (@nuxtjs/pwa)no
Performance
Critical CSSyes (@gridsome/plugin-critical)yes (page level)no
Image Compressionyesyes (nuxt-imagemin)no
Code Splittingyesyesyes
Data Management
GraphQL Layeryesyes (@nuxtjs/apollo)no
Axiosnoyes (@nuxtjs/axios)no
Markdown Filesyes (@gridsome/source-filesystem)yes (@nuxtjs/markdownit)yes
Vuex & Router
Vuexyes (custom)yesno
Vue-Routeryesyesyes
UI
Page Transitionnoyesno
Page Loadernoyesno
UI Frameworknoyesno
Server Side Logic
Middlewarenoyesno
Server Frameworksnoyesno
Developer Experience
Pre-processornoyesno
Hot Module Replacementyesyesyes
ESLintnoyesno
Prettiernoyesno
Export / Hosting Methods
Static Generated (Pre Rendering)yesyesyes
Universal (Server side rendering)yesyesno
Single Page Applicationnoyesno

Dari table diatas sudah terlihat ya, siapa yang lebih matang dan kompleks :D. Tapi yang perlu lebih ditekankan lagi adalah, semua diatas itu hanyalah tools, gunakan secara tepat guna. Jika memang butuh untuk bikin Docs saja, bisa pakai vuepress. Kalau pengen static site generator yang ready untuk GraphQL dengan setup mudah, pakai gridsome. Kalau pengen kompleks dan bisa semua nya, pakai lah Nuxtjs.

Sekian dari saya, semoga bermanfaat untuk teman - teman semua. Thanks...