Integrasi NuxtJS dengan NodeJS Web Application

Tidak dipungkiri memang persaingan framework javascript yang memiliki basis pada library tertentu seperti Nuxt.JS, Next.JS dan Quasar menjadi sangat menarik untuk diperbincangkan. Disamping framework tersebut mempermudah penggunanya dalam membuat sebuah web apps dengan library yang mereka cintai, penggunanya pun tidak perlu mengambil langkah yang terlalu advance untuk mengimplementasikan sesuatu. Pada waktu sebelumnya saya sempat merilis sebuah artikel mengenai NuxtJS yang dapat memungkinkan penggunanya dalam mengimplementasikan web yang berbasis SSR namun masih menggunakan VueJS sebagai pondasinya, satu hal yang mungkin perlu dicatat dalam penggunaan NuxtJS pada akhirnya cukup membutuhkan resources yang lumayan banyak karena instance NuxtJS pada mode SSR sejatinya tidak dapat digabungkan dengan Web Application yang basisnya API only atau sebut saja microservices.

Saya yang saat ini masih menggunakan NuxtJS sebagai situs ini ya terbilang sedikit kesulitan dalam mengaturnya apalagi saya menggunakan beberapa library lagi seperti express js untuk mengatur beberapa modul sebagai middleware, kadang ini sedikit memberatkan karena dengan cara seperti itu saya justru malah seperti menambah satu microservices menjadi 3 microservices seperti : nuxt untuk blog, site manager untuk mengolah data blog dan satu middleware menggunakan express js untuk mendukung beberapa modul.

Catatan ini tidak selamanya tepat sasaran

Secara teori memisahkan instance backend dengan instance frontend adalah hal yang baik untuk dilakukan, karena jika suatu ketika backend mengalami masalah hingga terjadi shutdown maka kemungkinan instance frontend yang merupakan situs utama yang biasa diakses pengguna ataupun pengunjung setidaknya masih dapat diakses walaupun itu hanya berupa cache namun beberapa informasi masih bisa diakses. Sejujurnya tutorial ini sangatlah tidak direkomendasikan jika kalian mendesain setiap microservices agar dapat di scalable, karena dengan mengintegrasikan NuxtJS dengan aplikasi web yang sudah ada mungkin menyebabkan situs kalian akan sulit untuk di scalling.

Sebelum Melanjutkan

Ada beberapa hal yang setidaknya kalian ketahui sebelum mengintegrasikan NuxtJS dengan NodeJS Web Application yang telah kalian buat, di antaranya yaitu :

1. Anda setidaknya harus menguasai penggunaan library ataupun framework web yang kalian gunakan, terkadang kalian perlu mengaktifkan static asset access untuk mengakses beberapa asset dari nuxtjs mulai dari file javascript ataupun CSS.
2. Pastikan menggunakan satu environment yang sama, jika kalian menggunakan javascript dengan gaya CommonJS atau ES6 ataupun TypeScript setidaknya sama kan dengan project NuxtJS.
3. Melakukan build project NuxtJS terlebih dahulu sebelum melakukan integrasi, karena modul server pada NuxtJS akan masih digunakan akan tetapi web server yang akan digunakan akan mengikuti NodeJS Web Application yang kalian miliki.
4. Struktur direktori yang ada pada project setidaknya menjadi satu dengan NodeJS Web Application, karena pada konfigurasi bawaan nuxt akan membaca konfigurasi pada root directory project saat ingin melakukan proses build NuxtJS ke fase production. Akan tetapi kalian juga dapat mengatur letak konfigurasi nuxtjs berdasarkan struktur direktori yang ada, untuk melihat contohnya kalian dapat melihatnya pada file package.json ini.

Metode Render Pada Nuxt

Pada nuxt setidaknya terdapat tiga metode yang bisa kalian gunakan untuk mengintegrasikan project NuxtJS dengan NodeJS Web Application, yaitu dengan menggunakan method render, renderRoute dan renderAndGetWindow. Ketiga method ini memiliki cara penggunaan yang berbeda, saya lebih memilih menggunakan renderRoute terlebih karena lebih mudah di implementasikan kebutuhan saya hanya untuk dapat melakukan render halaman pada sisi server. Berbeda dengan dua method lainnya seperti render agar NuxtJS dapat dijadikan sebagai middleware server ataupun renderAndGetWindow untuk mendapatkan sebuah jendela browser berdasarkan URL dari NuxtJS.

Cara Penggunaan

Method renderRoute pada NuxtJS setidaknya membutuhkan satu parameter sebagai penanda URL mana yang akan di render pada halaman NuxtJS, sehingga pengembang aplikasi NodeJS hanya perlu menyediakan sebuah variable string ataupun parameter string yang memuat informasi terkait path yang diakses oleh pengguna.

Inisialisasi Nuxt Service

Sebagai contoh saya membuat sebuah NuxtService pada file terpisah sehingga nantinya bisa digunakan pada konteks tertentu.

import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
import { loadNuxt } from 'nuxt'

class NuxtService {
  private nuxt: any

  public async render({ request }: HttpContextContract) {
    this.nuxt = await loadNuxt({ for: 'start' })

    const renderer = await this.nuxt.renderRoute(request.url())
    return renderer.html
  }
}

export default new NuxtService()

Sebelum method renderRoute di jalankan, service pada kode diatas pada method render awalnya melakukan load terlebih project nuxt yang telah dibuild. Jadi pastikan seluruh build asset yang dihasilkan pada directory .nuxt terdapat pada directory root project.

Menjalankan Nuxt Service

Untuk menjalankan NuxtService kalian perlu menjalankannya pada sebuah controller atau routing dari NodeJS Web Application yang kalian buat, hal ini dilakukan karena NuxtJS tidak berjalan sebagai middleware atau dalam artian proses render dilakukan di tahap akhir. Sebagai contoh saya menjalankan NuxtService pada controller milik framework Adonis JS.

import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
import NuxtService from 'App/Services/nuxt'

export default class NuxtsController {
  public async index(ctx: HttpContextContract) {
    const renderer = NuxtService.render(ctx)
    return renderer
  }
}

Parameter ctx pada controller memiliki value berupa object request dan object response, pada NuxtService yang saya buat nantinya membutuhkan object request untuk menjalankan method url() untuk menghasilkan string value berupa url path yang dikunjungi pengguna.

variable renderer pada controller akan menghasilkan sebuah string yang berisikan kode HTML untuk di tampilkan ke browser, karena pada adonis framework tidak membutuhkan ritual khusus untuk menampilkan halaman HTML maka saya cukup melakukan return pada variable renderer.

Catatan Untuk TypeScript

Jika kalian merupakan pengguna typescript mungkin sedikit disayangkan bahwa penggunaan typescript pada nuxt js untuk mengintegrasikannya ke NodeJS Web Application agak sedikit kurang, jadi kalian perlu membuat types baru agar IDE tidak menampilkan error pada direktori types di project yang kalian buat.

files: types/nuxt-shim.d.ts

declare module 'nuxt' {
  const loadNuxt: any
  const build: any
  const Nuxt: any
  const Builder: any
  export { loadNuxt, build, Nuxt, Builder }
}

Kesimpulan

Jika kalian ingin mengintegrasikan NodeJS Web Application dengan NuxtJS, kalian dapat menggunakan catatan ini sebagai referensi. Meskipun ada beberapa method render lainnya seperti render() dan renderAndGetWindow() akan tetapi kebutuhannya mungkin tidak tercover oleh kebutuhan saya, terlebih lagi method render() sangat lebih baik berjalan di express js dan method renderAndGetWindow() baru pada tahap experimental. Untuk contoh penggunaan dan implementasi sudah saya buatkan repo khusus namun untuk implementasi pada framework Adonis 5 yang sesuai dengan catatan ini, untuk framework lainnya mungkin bisa menyesuaikan.

Github Repo : adonuxt-5 Referensi : nuxt render route API Cloud Icon : iconixar via FlatIcon