React SSR menggunakan Nestjs

NestJS dan React SSR

Idealnya, dalam membangun aplikasi web dengan metode SPA (Single Page Application) biasanya memisahkan dua elemen besar pembangunnya; yaitu antara aplikasi frontend dan backend. Pemisahan tersebut dimaksudkan agar fokus pada masing-masing peran: frontend sebagai presentasi experience terhadap pengguna, sedangkan backend fokus pada bagaimana data diterima, diolah dan diberikan sesuai dengan peruntukannya melalui proses request response. Normalnya, kedua peran ini dilakukan oleh team yang berbeda. Pada kultur fullstack, sangat memugkinkan dilakukan oleh satu team, bahkan satu orang.

Apa hal yang paling minimal yang harus disediakan? Satu aplikasi client-side, misalnya menggunakan React dan satu aplikasi server-side dengan protokol REST API sebagai komunikasi dengan basis data.

Pada contoh kasus dimana kita mengharuskan bekerja sendiri dari layer terdepan sampai belakang, terlepas dari kompleksitas aplikasi yang dibuat dan dengan pertimbangan performa pengembangan yang dituntut untuk cepat, maka pemilihan metode SSR atau Server Side Rendering menjadi lebih relevan.

Metode SSR bukan hal yang baru, pada pola pengembangan aplikasi dengan menggunakan MVC (Model View Controller) khususnya pada pengembangan aplikasi web, biasanya yang dilakukan adalah melakukan Server Side Rendering untuk menampilkan View ke browser; misalnya Blade pada framework Laravel atau Ejs pada framework ExpressJS. Entitas API yang di request dari klien langsung me-render view yang telah disiapkan dan ditampilkan sebagai halaman pada browser pengguna, tidak ada proses yang terpisah. React sendiri mempunyai framework SSR yang sangat populer untuk SSR, yaitu NextJS yang dimaintain oleh para engineer di Zeit.co.

Kembali kepada kultur fullstack, biasanya akan dipilih framework web sebagai aplikasi backend, beberapa framework yang sering digunakan diantaranya ExpressJS, Koa JS atau Fastify. Jika Express JS menjadi pilihan, proses selanjutnya akan lebih mudah. Express dapat diintegrasikan dengan Next JS atau React standar dengan menggunakan library tambahan seperti @react-ssr/express.

What if I love TypeScript?

Pertanyaan yang bagus, dibutuhkan beberapa langkah sederhana untuk membuat project yang telah dipilih tadi sehingga mendukung TypeScript. Namun pendekatan yang akan dijelaskan sedikit berbeda; bagaimana jika menggunakan NestJS dengan dukungan SSR untuk React dengan tsx templating?

TypeScript membuat hidup lebih mudah dengan caranya, prinsip tersebut dapat kita temukan lebih banyak pada NestJS. NestJS sendiri dengan gamblang melalui taglinenya menyebutkan:

A progressive Node.js framework for building efficient, reliable and scalable server-side applications.

Secara garis besar, NestJS adalah sebuah kerangka kerja kokoh yang didalamnya terdapat fitur-fitur yang sudah terintegrasi dengan teori-teori best practice yang biasa dilakukan dalam mebangun aplikasi server-side dengan dukungan TypeScript.

Talk is cheap show me the code

Hal pertama yang harus dilakukan adalah instalasi nest-cli , pastikan Node JS sudah terinstall pada perangkat.

npm i -g @nestjs/cli

Buat project baru

nest new nama-project

Pada tahap ini, project seharusnya sudah dapat menampilkan hello-world . Selanjutnya tambahkan dependensi yang dibutuhkan untuk mengintegrasikan dengan React SSR

npm install --save @nestjs/platform-express @react-ssr/core @react-ssr/nestjs-express react react-dom

Buat .babelrc pada root project dan tambahkan line berikut:

{
  "presets": [
    "@react-ssr/nestjs-express/babel"
  ]
}

Kemudian edit tsconfig.json pada root project, ganti dukungan target dari es2017 ke esnext , pastikan kurang lebih seperti berikut:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "strict": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules",
    "ssr.config.js",
    ".ssr"
  ]
}

Lalu buat file tsconfig.server.json pada root project dan tambahkan line berikut:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs"
  },
  "include": [
    "server"
  ]
}

Edit package.json , pada section script tambahkan line berikut untuk menjalankan NestJS server dengan dukungan React SSR

{
  "scripts": {
    "start:ssr": "ts-node --project tsconfig.server.json    server/main.ts"
  }
}

Lalu tambahkan beberapa line pada src/main.ts sehingga kurang lebih menjadi seperti berikut:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { join } from 'path';
// gunakan express platform
import { NestExpressApplication } from '@nestjs/platform-express';
// register server sebagai SSR
import register from '@react-ssr/nestjs-express/register';
async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.useStaticAssets(join(__dirname, '..', 'public'));
  await register(app);
  await app.listen(3000);
}
bootstrap();

Under the hood, NestJS dibangun diatas ExpressJS. Jadi pada dasarnya SSR yang dibangun adalah yang terintegrasi dengan ExpressJS. Namun tentu saja, supaya dapat berkomunikasi dengan core NestJS perlu dibuat dependensi tambahan.

Selanjutnya, buat folder views pada root project dan coba membuat file tsx untuk memastikan apakah aplikasi sudah tersetup dengan benar. Misal, buat file index.tsx :

interface IndexPageProps {
  user: any;
}
const IndexPage = ({ user }: IndexPageProps) => {
  return <p>Halo {user.name}!</p>;
};
export default IndexPage;

Terakhir, render page yang telah kita buat pada suatu controller . pada proses nest new nama-project , nest-cli men-generate file controller starter. Edit file src/app.controller.ts dan ubah sehingga seperti berikut:

import { Controller, Get, Render } from '@nestjs/common';
import { AppService } from './app.service';
@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}
@Get()
@Render('index')
 public showHome() {
    const user = { name: 'NestJS' };
    return { user };
  }
}

Pada path / aplikasi akan me-render index.tsx yang disimpan pada direktori views . Jalankan aplikasi dengan perintah

npm run start:ssr

Cek browser, kemudian akses http://localhost:3000 jika browser merender halaman index.tsx yang telah kita buat, maka setup berhasil.

Konklusi

Penggunaan React dengan SSR dapat dipilih dengan beberapa pertimbangan; bekerja sebagai fullstack, SEO Friendly atau security purposes. Selalu pastikan metode yang dipilih cocok dengan kebutuhan sehingga tujuan utamanya tercapai. Sentris pada tulisan ini adalah pengenalan NestJS sebagai solusi end-to-end TypeScript development dengan pertimbangan jika bekerja pada kultur fullstack menangani client-side dan server-side.