Next.js ist ein beliebtes Framework, das auf React basiert und die Erstellung von Anwendungen mit Server-Side Rendering (SSR) und Static Site Generation (SSG) ermöglicht. Der Anwendungscode wird in TypeScript geschrieben. Next.js hat an Popularität gewonnen, weil es die Erstellung von Anwendungen mit serverseitigem Rendering erleichtert und gleichzeitig die Unterstützung für die statische Seitengenerierung (SSG) bietet, die es ermöglicht, statische Versionen von Websites zu erstellen, die Benutzern schnell bereitgestellt werden können. Dennoch kann es sich bei einigen Projekten lohnen, eine Alternative zu Next.js in Betracht zu ziehen.
Kürzlich habe ich eine Liste von Entwicklerblogs mit diesem Framework erstellt, und ich muss zugeben, dass es eine großartige Lösung ist, insbesondere wenn es um das Deployment der Anwendung auf der Plattform vercel.com geht. Der Bereitstellungsprozess war schnell und intuitiv, was Next.js für solche Projekte sehr attraktiv macht. Außerdem war die Erstellung dieser Website ein Test, ob Next.js die optimale Lösung für mein nächstes Projekt ist, das in den meisten Sprachen der Welt verfügbar sein wird.
Obwohl Next.js ein leistungsstarkes Werkzeug ist, ist es nicht immer die optimale Lösung für alle Projekte. Daher begann ich zu überlegen, welche Next.js-Alternative für meine Projekte am besten geeignet sein könnte. Zum Beispiel fügt das Framework automatisch zusätzliche Daten wie JSON-Dateien in den HTML-Code ein, die Informationen enthalten, die für die Wiederherstellung des Anwendungszustands im Browser erforderlich sind. Dieser Prozess kann zwar in einigen Fällen nützlich sein, führt jedoch dazu, dass mehr Daten gesendet werden, als notwendig ist.
Wenn Sie beispielsweise eine mehrsprachige Website erstellen, sendet Next.js häufig alle Übersetzungen (für mehrere Sprachen) an den Browser, auch wenn der Benutzer nur eine Sprachversion der Seite anzeigt. Next.js platziert diese Daten im Seitenquellcode als JSON-Dateien, um ein sofortiges Umschalten der Sprache oder die Wiederherstellung des Clientzustands zu ermöglichen. Das Problem entsteht, wenn eine Website mehrere Sprachen unterstützt — alle Übersetzungen könnten an den Browser gesendet werden, auch wenn der Benutzer nur die englische Version der Seite sieht.
Nehmen wir zum Beispiel an, Ihre Website unterstützt 10 Sprachen. In diesem Fall kann Next.js JSON-Dateien generieren, die alle Übersetzungen enthalten, auch solche, die derzeit nicht angezeigt werden. Dies führt zu überflüssigen Datenübertragungen, was die Seitengröße und damit die Ladezeit erhöht. Ein Benutzer, der die Seite auf Englisch besucht, benötigt keine Übersetzungsdaten für Französisch, Deutsch oder Japanisch, und dennoch werden diese gesendet. Hier kann es hilfreich sein, eine Alternative zu Next.js in Betracht zu ziehen, um solche Ineffizienzen zu vermeiden und sicherzustellen, dass nur die notwendigen Daten bereitgestellt werden.
Dies kann die Leistung der Website erheblich beeinträchtigen, insbesondere für Benutzer mit langsameren Internetverbindungen oder mobilen Geräten. Eine größere Datenmenge zum Herunterladen bedeutet längere Ladezeiten, was sich negativ auf die Benutzererfahrung (UX) und das Ranking der Website in Suchmaschinen (SEO) auswirkt.
Wenn Sie also die volle Kontrolle darüber haben möchten, welche Daten gesendet werden und wie die Seite generiert wird, lohnt es sich, Alternativen zu Next.js in Betracht zu ziehen, wie zum Beispiel NestJS in Kombination mit Nunjucks oder einer anderen Template-Engine. Bei diesem Ansatz erfolgt das Rendering vollständig auf der Serverseite, und an den Browser werden nur die Daten gesendet, die für die aktuell angezeigte Version der Seite erforderlich sind. Auf diese Weise können Sie das Problem überflüssiger Daten vermeiden, und jede Sprachversion der Website wird optimal und schnell geladen.
Ein solcher Ansatz ist die Kombination von NestJS mit Nunjucks und Tailwind CSS, die eine größere Flexibilität und Kontrolle über den Seitengenerierungsprozess bietet. In diesem Artikel besprechen wir, warum es sich lohnt, diese Technologien zu verwenden, wenn man globale, mehrsprachige Projekte erstellt, die potenziell hohen Traffic generieren können. Mit der Kombination von Nunjucks und Tailwind CSS ist es möglich, schnelle, flexible und skalierbare Anwendungen zu entwickeln, die klassischen serverseitigen Lösungen (wie man sie aus PHP kennt) ähneln, jedoch mit modernen Tools und besserer Leistungskontrolle.
Wenn Sie jemals PHP verwendet haben, um Websites zu erstellen, erinnern Sie sich wahrscheinlich daran, wie der Rendering-Prozess funktioniert. PHP-Skripte generieren HTML dynamisch auf dem Server und senden es an den Browser des Benutzers. In ähnlicher Weise ermöglicht NestJS mit Nunjucks, HTML-Seiten auf dem Server basierend auf Daten zu rendern, wodurch Sie mehr Flexibilität und Kontrolle darüber haben, was und wann generiert wird.
NestJS ist ein modernes Node.js-Framework, das für die Entwicklung skalierbarer und effizienter serverseitiger Anwendungen entwickelt wurde. Es basiert auf einer modularen Architektur, die die Verwaltung komplexer Projekte erleichtert – ähnlich wie Backend-Frameworks wie Spring in Java oder ASP.NET im Microsoft-Ökosystem. NestJS verwendet TypeScript und bietet integrierte Unterstützung für serverseitiges Rendering, was es zu einer hervorragenden Wahl für die Entwicklung von API-basierten Anwendungen, Webanwendungen oder Backendsystemen macht.
In Bezug auf das Rendering von HTML-Seiten arbeitet NestJS mit verschiedenen Template-Engines zusammen, von denen eine der leistungsfähigsten und flexibelsten Nunjucks ist. Nunjucks ist eine vielseitige Template-Engine, die von Jinja2 aus Python inspiriert ist und erweiterte Funktionen wie Template-Vererbung, Makros, Schleifen, Bedingungen und dynamisches Einfügen von Daten bietet. Mit Nunjucks können Sie komplexe HTML-Strukturen einfach verwalten, dynamische Inhalte rendern und die Anzeigelogik von Elementen auf der Seite steuern. Es ist eine ideale Lösung für den Aufbau globaler Anwendungen, die viele Komponenten und dynamische Inhalte in verschiedenen Sprachen verarbeiten müssen.
Wenn Ihnen NestJS mit Nunjucks als geeignete Lösung und bessere Alternative zu Next.js erscheint, sollten Sie wissen, dass es viele andere Template-Engines gibt. Engines wie Pug, Handlebars, Mustache oder EJS bieten unterschiedliche Funktionen und Ansätze für serverseitiges Rendering. Die Wahl der richtigen Engine hängt von der Komplexität des Projekts, der Struktur der Templates und den Syntaxpräferenzen ab.
Next.js automatisiert viele Aspekte des serverseitigen Renderings, was bei einigen Projekten einschränkend sein kann. Mit NestJS und Nunjucks haben Sie die volle Kontrolle über jeden Schritt des Rendering-Prozesses – vom Datenbankzugriff bis zur Generierung des endgültigen HTML. Auf diese Weise können Sie Seiten genau nach Ihren Bedürfnissen optimieren.
In Next.js (SSR und SSG) werden beim Generieren von Seiten neben statischem HTML-Code auch Daten in Form von JSON-Dateien in den Quellcode eingefügt. Diese werden benötigt, um den Zustand der Anwendung auf der Clientseite wiederherzustellen, was typisch für React-Anwendungen ist. Dieser Ansatz kann jedoch dazu führen, dass mehr Daten gesendet werden, als nötig ist, was die Seite verlangsamt. Mehr übertragene Daten bedeuten nicht nur längere Ladezeiten, sondern auch höhere Kosten, wenn Sie Cloud-Dienste wie Azure, AWS oder Google Cloud verwenden. Je nach gewählter Lösung fallen häufig zusätzliche Gebühren für den Datentransfer an, insbesondere bei einer großen Anzahl von Benutzern und hohem Website-Traffic.
Mit Nunjucks in NestJS generieren Sie nur das, was im jeweiligen Moment tatsächlich benötigt wird, wodurch die Menge der übertragenen Daten minimiert wird. Auf diese Weise verbessern Sie nicht nur die Leistung der Seite, sondern reduzieren auch die Kosten für die Datenübertragung – was auf lange Sicht erhebliche Einsparungen bringen kann, insbesondere bei großen Anwendungen oder stark frequentierten Websites.
Nachdem wir die Vorteile der Kombination von NestJS mit Nunjucks und Tailwind CSS vorgestellt haben, gehen wir nun zum praktischen Teil über. Im Folgenden finden Sie eine vollständige Schritt-für-Schritt-Anleitung, die Sie durch die Einrichtung der Umgebung, die Installation der erforderlichen Pakete und die Vorbereitung der Projektstruktur führt.
Installieren Sie das NestJS CLI global, falls Sie es noch nicht haben:
Angular
AWS
Azure
Blockchain
C#
CSS
Docker
Git
HTML
Java
JavaScript
Kotlin
MongoDB
Node.js
PHP
Python
R
React
RxJS
SQL
Swift
TypeScript
Vue.js
npm i -g @nestjs/cliErstellen Sie ein neues NestJS-Projekt:
nest new name-of-your-projectInstallieren Sie die Nunjucks Template Engine:
npm install nunjucksKonfigurieren Sie Nunjucks als View-Engine in der Datei 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);
// Ansichtsverzeichnis und Nunjucks-Engine festlegen
nunjucks.configure('views', {
autoescape: true,
express: app,
watch: true,
});
app.setViewEngine('njk');
// Statische Dateien aus dem Verzeichnis 'public' bereitstellen
app.useStaticAssets(join(__dirname, '..', 'public'));
await app.listen(3000);
}
bootstrap();Installieren Sie Tailwind CSS und die erforderlichen Abhängigkeiten:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss initKonfigurieren Sie die Datei tailwind.config.js:
module.exports = {
content: [
'./views/**/*.njk',
'./public/**/*.js',
],
theme: {
extend: {},
},
plugins: [],
};Erstellen Sie eine Tailwind CSS-Datei im Ordner src/css/, z. B. src/css/styles.css, und fügen Sie die Tailwind-Direktiven hinzu:
@tailwind base;
@tailwind components;
@tailwind utilities;Konfigurieren Sie PostCSS, indem Sie die Datei postcss.config.js erstellen:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};Erstellen Sie den Ordner views. Fügen Sie in den Nunjucks-Dateien einen Link zur generierten CSS-Datei hinzu (z. B. in views/index.njk):
<link href="/styles.css" rel="stylesheet">Führen Sie Tailwind aus, um die endgültige CSS-Datei zu generieren:
npx tailwindcss -o public/styles.cssErstellen Sie in der Controller-Datei (z. B. app.controller.ts) eine Methode, die die Nunjucks-Ansicht zurückgibt. Hier ein Beispiel:
import { Controller, Get, Render } from '@nestjs/common';
@Controller()
export class AppController {
@Get()
@Render('index') // Verweist auf die Datei 'index.njk' im Ordner 'views'
getHome() {
return { title: 'Startseite' }; // Daten, die an die Nunjucks-Vorlage übergeben werden
}
}In der Datei index.njk können Sie einfachen HTML-Code hinzufügen, um die Startseite anzuzeigen:
<!DOCTYPE html>
<html lang="de">
<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>Hallo!</h1>
</body>
</html>Starten Sie die Anwendung und gehen Sie zur Startseite (http://localhost:3000/). Sie sollten die Seite mit dem Inhalt der Datei index.njk sehen.
Zusammenfassung:
views.index.njk, und der Controller ist für das Rendering dieser Seite verantwortlich.Wenn Sie möchten, können Sie diese Vorlage um zusätzliche Abschnitte und Komponenten erweitern und die Möglichkeiten von Tailwind CSS vollständig für das Styling nutzen. Ich bin der Meinung, dass die Kombination von NestJS, Nunjucks und Tailwind CSS eine ausgezeichnete Alternative zu Next.js ist – insbesondere für Projekte, die eine vollständige Kontrolle über den Rendering-Prozess und eine Minimierung der übertragenen Daten erfordern.
Im nächsten Beitrag (oder durch Aktualisierung dieses Artikels) zeige ich, wie man die Anwendung durch die Integration mit MongoDB erweitert. Dadurch können wir Daten in einer Datenbank verwalten, und die Anwendung wird vollständig dynamisch und bereit für größere Projekte. Außerdem zeige ich, wie einfach sich MongoDB mit NestJS über das Modul @nestjs/mongoose integrieren lässt und wie man CRUD-Operationen (Create, Read, Update, Delete) für fortgeschrittene Anwendungen erstellt.
Folgen Sie den kommenden Beiträgen, um mehr zu erfahren!
Next.js-Alternative (SSR)? Probier NestJS + Nunjucks + Tailwind CSS aus
