Εναλλακτική λύση για το Next.js (SSR); Δοκίμασε το NestJS + Nunjucks + Tailwind CSS

Το Next.js είναι ένα δημοφιλές framework που βασίζεται στο React και επιτρέπει τη δημιουργία εφαρμογών με Server-Side Rendering (SSR) και Static Site Generation (SSG). Ο κώδικας της εφαρμογής γράφεται σε TypeScript. Το Next.js έχει γίνει ιδιαίτερα δημοφιλές χάρη στην ευκολία με την οποία επιτρέπει τη δημιουργία εφαρμογών με server-side rendering, καθώς και στη δυνατότητα δημιουργίας στατικών εκδόσεων ιστοσελίδων (SSG), οι οποίες μπορούν να φορτώνονται γρήγορα από τους χρήστες. Ωστόσο, για ορισμένα έργα, αξίζει να εξεταστεί μια εναλλακτική λύση στο Next.js.

Πρόσφατα δημιούργησα μια λίστα προγραμματιστικών ιστολογίων χρησιμοποιώντας το, και πρέπει να παραδεχτώ ότι είναι μια εξαιρετική λύση, ειδικά όσον αφορά την ανέβασή της στην πλατφόρμα vercel.com. Η διαδικασία εγκατάστασης ήταν γρήγορη και διαισθητική, γεγονός που καθιστά το Next.js πολύ ελκυστικό για τέτοιου είδους έργα. Επιπλέον, η δημιουργία αυτής της ιστοσελίδας ήταν ένα τεστ για το αν το Next.js είναι η βέλτιστη λύση για το επόμενο έργο μου, το οποίο θα είναι διαθέσιμο στις περισσότερες γλώσσες του κόσμου.

Αν και το Next.js είναι ένα ισχυρό εργαλείο, δεν είναι πάντα η καλύτερη επιλογή για κάθε έργο. Γι’ αυτό άρχισα να εξετάζω ποια εναλλακτική λύση του Next.js θα μπορούσε να ταιριάζει καλύτερα στα έργα μου. Για παράδειγμα, το framework προσθέτει αυτόματα επιπλέον δεδομένα, όπως αρχεία JSON, μέσα στον κώδικα HTML, τα οποία περιέχουν πληροφορίες απαραίτητες για την αναδημιουργία της κατάστασης της εφαρμογής στο πρόγραμμα περιήγησης. Αυτή η διαδικασία, αν και χρήσιμη σε ορισμένες περιπτώσεις, μπορεί να οδηγήσει στη μεταφορά περισσότερων δεδομένων απ’ όσα είναι πραγματικά απαραίτητα.

Για παράδειγμα, όταν δημιουργείτε μια πολύγλωσση ιστοσελίδα, το Next.js συχνά στέλνει όλες τις μεταφράσεις (για πολλές γλώσσες) στο πρόγραμμα περιήγησης, ακόμα κι αν ο χρήστης βλέπει μόνο μία έκδοση της σελίδας. Το Next.js τοποθετεί αυτά τα δεδομένα στον πηγαίο κώδικα της σελίδας ως αρχεία JSON, προκειμένου να επιτρέπει την άμεση αλλαγή γλώσσας ή την αναδημιουργία της κατάστασης στο client-side. Το πρόβλημα εμφανίζεται όταν ο ιστότοπος υποστηρίζει πολλές γλώσσες — όλες οι μεταφράσεις ενδέχεται να σταλούν, ακόμα κι αν ο χρήστης βλέπει μόνο την αγγλική έκδοση.

Ας υποθέσουμε, για παράδειγμα, ότι ο ιστότοπός σας υποστηρίζει 10 γλώσσες. Σε αυτή την περίπτωση, το Next.js μπορεί να δημιουργήσει αρχεία JSON που περιέχουν όλες τις μεταφράσεις, ακόμα και αυτές που δεν εμφανίζονται τη δεδομένη στιγμή. Αυτό οδηγεί σε περιττή μεταφορά δεδομένων, αυξάνοντας το μέγεθος της σελίδας και, συνεπώς, τον χρόνο φόρτωσης. Ένας χρήστης που επισκέπτεται τη σελίδα στα Αγγλικά δεν χρειάζεται δεδομένα για τα Γαλλικά, τα Γερμανικά ή τα Ιαπωνικά, ωστόσο αυτά εξακολουθούν να αποστέλλονται. Σε τέτοιες περιπτώσεις, η εξέταση μιας εναλλακτικής λύσης στο Next.js μπορεί να βοηθήσει στην αποφυγή αυτής της αναποτελεσματικότητας, διασφαλίζοντας ότι μεταφέρονται μόνο τα απαραίτητα δεδομένα.

Αυτό μπορεί να επηρεάσει σημαντικά την απόδοση του ιστότοπου, ειδικά για χρήστες με πιο αργές συνδέσεις στο διαδίκτυο ή που χρησιμοποιούν κινητές συσκευές. Περισσότερα δεδομένα για λήψη σημαίνουν περισσότερο χρόνο φόρτωσης, κάτι που επηρεάζει αρνητικά την εμπειρία χρήσης (UX) και την κατάταξη του ιστότοπου στα αποτελέσματα των μηχανών αναζήτησης (SEO).

Επομένως, αν θέλετε να έχετε πλήρη έλεγχο σχετικά με το ποια δεδομένα αποστέλλονται και πώς δημιουργείται η σελίδα, αξίζει να εξετάσετε εναλλακτικές λύσεις στο Next.js, όπως το NestJS σε συνδυασμό με το Nunjucks ή άλλη μηχανή προτύπων (template engine). Σε αυτή την προσέγγιση, η απόδοση πραγματοποιείται εξ ολοκλήρου από την πλευρά του διακομιστή, και στο πρόγραμμα περιήγησης αποστέλλονται μόνο τα δεδομένα που χρειάζονται για την τρέχουσα έκδοση της σελίδας. Με αυτόν τον τρόπο, αποφεύγετε την αποστολή περιττών δεδομένων, και κάθε γλωσσική έκδοση του ιστότοπου φορτώνεται πιο γρήγορα και αποδοτικά.

Μια τέτοια προσέγγιση είναι ο συνδυασμός του NestJS με το Nunjucks και το Tailwind CSS, που προσφέρει μεγαλύτερη ευελιξία και έλεγχο στη διαδικασία δημιουργίας της σελίδας. Σε αυτό το άρθρο θα αναλύσουμε γιατί αξίζει να εξετάσετε αυτές τις τεχνολογίες όταν δημιουργείτε παγκόσμια, πολύγλωσσα έργα που ενδέχεται να προσελκύσουν μεγάλη επισκεψιμότητα. Με τον συνδυασμό των Nunjucks και Tailwind CSS, μπορείτε να δημιουργήσετε γρήγορες, ευέλικτες και επεκτάσιμες εφαρμογές που μοιάζουν με τις κλασικές λύσεις απόδοσης στην πλευρά του διακομιστή (όπως αυτές που γνωρίζουμε από την PHP), αλλά με σύγχρονα εργαλεία και καλύτερο έλεγχο απόδοσης.

Γιατί το NestJS + Nunjucks μοιάζει με την PHP;

Αν έχετε χρησιμοποιήσει ποτέ την PHP για τη δημιουργία ιστοσελίδων, πιθανότατα θυμάστε πώς λειτουργεί η διαδικασία απόδοσης σελίδων. Τα PHP scripts δημιουργούν δυναμικά HTML στον διακομιστή και το αποστέλλουν στο πρόγραμμα περιήγησης του χρήστη. Με παρόμοιο τρόπο, το NestJS με το Nunjucks επιτρέπει την απόδοση HTML σελίδων στον διακομιστή με βάση τα δεδομένα, παρέχοντας μεγαλύτερη ευελιξία και έλεγχο στο τι και πότε δημιουργείται.

Το NestJS είναι ένα σύγχρονο framework για το Node.js, σχεδιασμένο για τη δημιουργία επεκτάσιμων και αποδοτικών εφαρμογών από την πλευρά του διακομιστή. Βασίζεται σε μια αρθρωτή αρχιτεκτονική που απλοποιεί τη διαχείριση πολύπλοκων έργων, παρόμοια με frameworks όπως το Spring για Java ή το ASP.NET στο οικοσύστημα της Microsoft. Το NestJS χρησιμοποιεί TypeScript και προσφέρει ενσωματωμένη υποστήριξη για server-side rendering, καθιστώντας το εξαιρετική επιλογή για την ανάπτυξη εφαρμογών API, web εφαρμογών ή backend συστημάτων.

Όσον αφορά την απόδοση HTML σελίδων, το NestJS συνεργάζεται με διάφορες μηχανές προτύπων (template engines), με μία από τις πιο ισχυρές και ευέλικτες να είναι το Nunjucks. Το Nunjucks είναι μια ευέλικτη μηχανή προτύπων, εμπνευσμένη από το Jinja2 της Python, που προσφέρει προηγμένες λειτουργίες όπως κληρονομικότητα προτύπων, macros, βρόχους, συνθήκες και δυναμική εισαγωγή δεδομένων. Με το Nunjucks μπορείτε εύκολα να διαχειρίζεστε πολύπλοκες HTML δομές, να αποδίδετε δυναμικό περιεχόμενο και να ελέγχετε τη λογική εμφάνισης στοιχείων στη σελίδα. Είναι μια ιδανική λύση για τη δημιουργία παγκόσμιων εφαρμογών που χρειάζονται να χειρίζονται πολλά στοιχεία και περιεχόμενο σε διαφορετικές γλώσσες.

Αν το NestJS με το Nunjucks σας φαίνεται ως η σωστή λύση και μια καλύτερη εναλλακτική στο Next.js, αξίζει να γνωρίζετε ότι υπάρχουν και άλλες μηχανές προτύπων, όπως Pug, Handlebars, Mustache ή EJS, που προσφέρουν διαφορετικές δυνατότητες και προσεγγίσεις στο server-side rendering. Η επιλογή της κατάλληλης εξαρτάται από την πολυπλοκότητα του έργου, τη δομή των προτύπων και τις προτιμήσεις στη σύνταξη.

Κύρια πλεονεκτήματα του NestJS + Nunjucks + Tailwind CSS σε σχέση με το Next.js (SSR)

1. Μεγαλύτερος έλεγχος στη διαδικασία απόδοσης

Το Next.js αυτοματοποιεί πολλά μέρη της διαδικασίας server-side rendering, κάτι που για ορισμένα έργα μπορεί να είναι περιοριστικό. Με το NestJS και το Nunjucks, έχετε πλήρη έλεγχο σε κάθε στάδιο της απόδοσης — από την πρόσβαση στη βάση δεδομένων μέχρι τη δημιουργία του τελικού HTML. Έτσι, μπορείτε να βελτιστοποιήσετε τις σελίδες ακριβώς σύμφωνα με τις ανάγκες σας.

2. Λιγότερα περιττά δεδομένα

Στο Next.js (SSR και SSG), κατά τη δημιουργία των σελίδων, εκτός από τον στατικό HTML κώδικα, προστίθενται και δεδομένα σε μορφή JSON μέσα στον πηγαίο κώδικα. Αυτά χρειάζονται για την αναδημιουργία της κατάστασης της εφαρμογής στο client-side, κάτι που είναι χαρακτηριστικό για εφαρμογές React. Ωστόσο, αυτή η προσέγγιση μπορεί να οδηγήσει στη μεταφορά περισσότερων δεδομένων από όσα χρειάζονται, επιβραδύνοντας τη σελίδα. Περισσότερα δεδομένα σημαίνουν όχι μόνο μεγαλύτερους χρόνους φόρτωσης, αλλά και υψηλότερο κόστος, αν χρησιμοποιείτε υπηρεσίες cloud όπως Azure, AWS ή Google Cloud. Ανάλογα με τη λύση που χρησιμοποιείτε, η μεταφορά δεδομένων μπορεί να συνεπάγεται επιπλέον χρεώσεις, ειδικά όταν υπάρχει μεγάλος αριθμός χρηστών και αυξημένη επισκεψιμότητα.

Με το Nunjucks στο NestJS δημιουργείτε μόνο αυτό που είναι απαραίτητο τη δεδομένη στιγμή, ελαχιστοποιώντας τον όγκο των δεδομένων που μεταφέρονται. Έτσι, όχι μόνο βελτιώνετε την απόδοση των σελίδων, αλλά μειώνετε και το κόστος μεταφοράς δεδομένων, κάτι που σε βάθος χρόνου μπορεί να οδηγήσει σε σημαντική εξοικονόμηση, ιδιαίτερα σε μεγάλες εφαρμογές ή ιστότοπους με υψηλή επισκεψιμότητα.

Αφού παρουσιάσαμε τα πλεονεκτήματα του συνδυασμού NestJS, Nunjucks και Tailwind CSS, ας περάσουμε τώρα στο πρακτικό μέρος. Παρακάτω θα βρείτε έναν πλήρη οδηγό βήμα προς βήμα, που θα σας καθοδηγήσει στη ρύθμιση του περιβάλλοντος, την εγκατάσταση των απαραίτητων πακέτων και την προετοιμασία της δομής του έργου.

Βήμα 1: Εγκατάσταση του Nest.js

Εγκαταστήστε παγκοσμίως το NestJS CLI αν δεν το έχετε ήδη:

npm i -g @nestjs/cli

Δημιουργήστε ένα νέο έργο NestJS:

nest new name-of-your-project

Βήμα 2: Ρύθμιση του Nunjucks

Εγκαταστήστε τη μηχανή προτύπων Nunjucks:

npm install nunjucks

Ρυθμίστε το Nunjucks ως view engine στο αρχείο main.ts:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  // Ρύθμιση του φακέλου views και της μηχανής Nunjucks
  nunjucks.configure('views', {
    autoescape: true,
    express: app,
    watch: true,
  });
  app.setViewEngine('njk');
  // Εξυπηρέτηση στατικών αρχείων από τον φάκελο 'public'
  app.useStaticAssets(join(__dirname, '..', 'public'));
  await app.listen(3000);
}
bootstrap();

Βήμα 3: Ρύθμιση του Tailwind CSS

Εγκαταστήστε το Tailwind CSS και τις απαραίτητες εξαρτήσεις:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Ρυθμίστε το αρχείο tailwind.config.js:

module.exports = {
  content: [
    './views/**/*.njk',
    './public/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Δημιουργήστε ένα αρχείο Tailwind CSS μέσα στο φάκελο src/css/, π.χ. src/css/styles.css, και προσθέστε τις εντολές του Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

Ρυθμίστε το PostCSS δημιουργώντας το αρχείο postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Δημιουργήστε τον φάκελο views. Μέσα στα αρχεία Nunjucks, προσθέστε έναν σύνδεσμο στο παραγόμενο αρχείο CSS (π.χ. στο views/index.njk):

<link href="/styles.css" rel="stylesheet">

Εκτελέστε το Tailwind για να παραχθεί το τελικό CSS αρχείο:

npx tailwindcss -o public/styles.css

Βήμα 4: Δημιουργία Controller για την απόδοση της αρχικής σελίδας

Στο αρχείο του controller (π.χ. app.controller.ts), δημιουργήστε μια μέθοδο που θα επιστρέφει την προβολή του Nunjucks. Παράδειγμα:

import { Controller, Get, Render } from '@nestjs/common';

@Controller()
export class AppController {
  @Get()
  @Render('index') // Αναφέρεται στο αρχείο 'index.njk' μέσα στον φάκελο 'views'
  getHome() {
    return { title: 'Αρχική σελίδα' }; // Δεδομένα που περνούν στο πρότυπο του Nunjucks
  }
}

Στο αρχείο index.njk μπορείτε να προσθέσετε απλό HTML κώδικα για να εμφανιστεί η αρχική σελίδα:

<!DOCTYPE html>
<html lang="el">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/css/styles.css" rel="stylesheet">
  <title>{{ title }}</title>
</head>
<body>
  <h1>Γειά σας!</h1>
</body>
</html>

Εκτελέστε την εφαρμογή και μεταβείτε στην αρχική σελίδα (http://localhost:3000/). Θα πρέπει να δείτε τη σελίδα με το περιεχόμενο του αρχείου index.njk.

Σύνοψη:

• Τα πρότυπα Nunjucks βρίσκονται μέσα στον φάκελο views.
• Η αρχική σελίδα είναι το αρχείο index.njk και ο controller είναι υπεύθυνος για την απόδοσή της.

Εναλλακτική λύση στο Next.js: Σύνοψη

Αν θέλετε, μπορείτε να επεκτείνετε αυτό το πρότυπο προσθέτοντας επιπλέον ενότητες και στοιχεία και να αξιοποιήσετε πλήρως το Tailwind CSS για τη μορφοποίηση. Πιστεύω ότι ο συνδυασμός των NestJS, Nunjucks και Tailwind CSS αποτελεί μια εξαιρετική εναλλακτική στο Next.js, ειδικά για έργα που απαιτούν πλήρη έλεγχο της διαδικασίας απόδοσης και ελαχιστοποίηση των δεδομένων που μεταφέρονται.

Στο επόμενο άρθρο (ή ενημερώνοντας αυτό), θα δείξω πώς να επεκτείνουμε την εφαρμογή με ενσωμάτωση της MongoDB. Αυτό θα μας επιτρέψει να διαχειριζόμαστε δεδομένα μέσα σε βάση δεδομένων και η εφαρμογή θα γίνει πλήρως δυναμική και έτοιμη για μεγαλύτερα έργα. Επίσης, θα δείξω πόσο εύκολα μπορούμε να συνδέσουμε τη MongoDB με το NestJS χρησιμοποιώντας το module @nestjs/mongoose και να δημιουργήσουμε λειτουργίες CRUD (Create, Read, Update, Delete) για πιο προχωρημένες εφαρμογές.

Ακολουθήστε τα επόμενα άρθρα για να μάθετε περισσότερα!