Next.js es un framework popular basado en React que permite crear aplicaciones con renderizado del lado del servidor (SSR) y generación estática de sitios (SSG). El código de la aplicación se escribe en TypeScript. Next.js ha ganado popularidad por lo fácil que resulta crear aplicaciones que usan renderizado en servidor, además de su soporte para Static Site Generation (SSG), que permite construir versiones estáticas de sitios web que pueden servirse rápidamente a los usuarios. Sin embargo, para algunos proyectos, podría merecer la pena explorar una alternativa a Next.js.
Recientemente creé una lista de blogs para desarrolladores usando Next.js y tengo que admitir que es una gran solución, especialmente a la hora de desplegar la aplicación en la plataforma vercel.com. El proceso de despliegue fue rápido e intuitivo, lo que hace que Next.js resulte muy atractivo para este tipo de proyectos. Además, crear este sitio fue una prueba para determinar si Next.js es la solución óptima para mi próximo proyecto, que estará disponible en la mayoría de los idiomas del mundo.
No obstante, aunque Next.js es una herramienta potente, no siempre es la opción óptima para todos los proyectos. Por eso empecé a considerar qué alternativa a Next.js podría encajar mejor en mis proyectos. Por ejemplo, el framework añade automáticamente datos adicionales, como archivos JSON, al código HTML con la información necesaria para recrear el estado de la aplicación en el navegador. Este proceso, aunque útil en algunos casos, puede provocar el envío de más información de la necesaria.
Por ejemplo, al crear un sitio multilingüe, Next.js suele enviar todas las traducciones (para varios idiomas) al navegador, incluso cuando el usuario solo está viendo una versión del idioma. Next.js coloca estos datos en el código fuente de la página como archivos JSON, con el objetivo de permitir un cambio de idioma instantáneo o la reconstrucción del estado en el cliente. El problema surge cuando un sitio admite varios idiomas: pueden enviarse todas las traducciones al navegador aunque el usuario solo esté viendo una versión, por ejemplo, en inglés.
Imaginemos que tu sitio admite 10 idiomas. En ese caso, Next.js podría generar archivos JSON que incluyan todas las versiones de traducción, incluso las que no se muestran en ese momento. Esto conduce a la transferencia de datos redundantes, lo que incrementa el peso de la página y, por tanto, el tiempo de carga. Un usuario que visita la página en inglés no necesita los datos de traducción al francés, alemán o japonés, y aun así se envían. Aquí es donde considerar una alternativa a Next.js puede ayudar a evitar estas ineficiencias, garantizando que solo se entregue la información necesaria.
Esto puede afectar de forma significativa al rendimiento del sitio, especialmente para usuarios con conexiones a Internet más lentas o que usan dispositivos móviles. Una mayor cantidad de datos para descargar implica tiempos de carga más largos, lo que repercute negativamente en la experiencia de usuario (UX) y en el posicionamiento del sitio en los resultados de los motores de búsqueda (SEO).
Por ello, si quieres tener control total sobre qué datos se envían y cómo se genera la página, merece la pena considerar soluciones alternativas a Next.js, como NestJS combinado con Nunjucks u otro motor de plantillas. En este enfoque, el renderizado se realiza íntegramente en el servidor y solo se envían al navegador los datos necesarios para la versión que se está mostrando. De este modo, se evita el problema de los datos redundantes y cada versión idiomática del sitio se cargará de forma óptima y rápida.
Un enfoque de este tipo es la combinación de NestJS con Nunjucks y Tailwind CSS, que ofrecen mayor flexibilidad y control sobre el proceso de generación de páginas. En este artículo veremos por qué conviene considerar estas tecnologías para crear proyectos globales y multilingües que potencialmente puedan generar mucho tráfico. Con la combinación de Nunjucks y Tailwind CSS es posible construir aplicaciones rápidas, flexibles y escalables que recuerdan a las soluciones clásicas del lado del servidor, como las conocidas en PHP, pero con herramientas modernas y mayor control sobre el rendimiento.
Si alguna vez has usado PHP para construir sitios web, recordarás cómo funciona el proceso de renderizado de páginas. Los scripts de PHP generan HTML de forma dinámica en el servidor y lo envían al navegador del usuario. Del mismo modo, NestJS con Nunjucks permite renderizar páginas HTML en el servidor a partir de datos, dándote mayor flexibilidad y control sobre qué se genera y cuándo.
NestJS es un framework moderno para Node.js diseñado para aplicaciones de servidor escalables y eficientes. Se basa en una arquitectura modular que simplifica la gestión de proyectos complejos, similar a frameworks de backend como Spring en Java o ASP.NET en el ecosistema de Microsoft. NestJS usa TypeScript y ofrece soporte integrado para renderizado del lado del servidor, por lo que es una excelente opción para crear aplicaciones basadas en API, aplicaciones web o sistemas de backend.
En cuanto al renderizado de páginas HTML, NestJS funciona con varios motores de plantillas; uno de los más potentes y flexibles es Nunjucks. Nunjucks es un motor de plantillas versátil, inspirado en Jinja2 de Python, que ofrece funcionalidades avanzadas como herencia de plantillas, macros, bucles, condiciones e inserción de datos dinámicos. Con Nunjucks puedes gestionar estructuras HTML complejas, renderizar contenido dinámico y controlar la lógica de visualización de elementos en la página. Es una solución ideal para construir aplicaciones globales que deben manejar muchos componentes y contenido dinámico en distintos idiomas.
Si NestJS con Nunjucks te parece la solución adecuada y una mejor alternativa a Next.js, también conviene saber que existen muchos otros motores de plantillas. Motores como Pug, Handlebars, Mustache o EJS ofrecen diferentes características y enfoques para el renderizado en servidor. La elección del motor adecuado depende de la complejidad del proyecto, la estructura de las plantillas y las preferencias de sintaxis.
Next.js automatiza muchos aspectos del renderizado del lado del servidor, lo cual puede resultar limitante para ciertos proyectos. Con NestJS y Nunjucks tienes control total sobre cada paso del proceso de renderizado —desde el acceso a la base de datos hasta la generación del HTML final—, de modo que puedes optimizar las páginas exactamente según tus necesidades.
En Next.js (SSR y SSG), durante la generación de la página, además del HTML estático se añade al código fuente información en forma de archivos JSON. Estos son necesarios para recrear el estado de la aplicación en el cliente, algo típico de las aplicaciones React. Sin embargo, este enfoque puede provocar el envío de más datos de los necesarios, ralentizando la página. Enviar más datos no solo implica tiempos de carga mayores, sino también costes más altos si utilizas servicios en la nube como Azure, AWS o Google Cloud. Según las soluciones elegidas, la transferencia de datos suele generar cargos adicionales, especialmente con un gran número de usuarios y un tráfico elevado en el sitio.
Con Nunjucks en NestJS solo generas lo que realmente se necesita en ese momento, minimizando la cantidad de datos transferidos. Así, no solo mejoras el rendimiento de la página, sino que también reduces los costes de transferencia de datos, lo que a largo plazo puede suponer un ahorro significativo, especialmente en aplicaciones grandes o sitios con mucho tráfico.
Tras presentar las ventajas de combinar NestJS con Nunjucks y Tailwind CSS, pasemos ahora a la parte práctica. A continuación encontrarás una guía completa paso a paso que te llevará por la configuración del entorno, la instalación de los paquetes necesarios y la preparación de la estructura del proyecto.
Instala la CLI de NestJS globalmente si aún no la tienes:
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/cliCrea un nuevo proyecto NestJS:
nest new name-of-your-projectInstala el motor de plantillas Nunjucks:
npm install nunjucksConfigura Nunjucks como motor de vistas en el archivo 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);
// Set the views directory and Nunjucks engine
nunjucks.configure('views', {
autoescape: true,
express: app,
watch: true,
});
app.setViewEngine('njk');
// Serving static files from the 'public' directory
app.useStaticAssets(join(__dirname, '..', 'public'));
await app.listen(3000);
}
bootstrap();
Instala Tailwind CSS y las dependencias necesarias:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss initConfigura el archivo tailwind.config.js:
module.exports = {
content: [
'./views/**/*.njk',
'./public/**/*.js',
],
theme: {
extend: {},
},
plugins: [],
};Crea un archivo de Tailwind CSS en la carpeta src/css/, por ejemplo src/css/styles.css, y añade las directivas de Tailwind:
@tailwind base;
@tailwind components;
@tailwind utilities;Configura PostCSS creando el archivo postcss.config.js:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Crea la carpeta views. En los archivos de Nunjucks, añade un enlace al CSS generado (por ejemplo, en views/index.njk):
<link href="/styles.css" rel="stylesheet">
Procesa Tailwind para generar el archivo CSS final:
npx tailwindcss -o public/styles.css
En el archivo del controlador (por ejemplo, app.controller.ts), crea un método que devuelva la vista de Nunjucks. Aquí tienes un ejemplo de controlador:
import { Controller, Get, Render } from '@nestjs/common';
@Controller()
export class AppController {
@Get()
@Render('index') // Refers to the 'index.njk' file in the 'views' folder
getHome() {
return { title: 'Strona główna' }; // You can pass data to the Nunjucks view
}
}En el archivo index.njk puedes añadir un HTML sencillo para mostrar la página de inicio:
<!DOCTYPE html>
<html lang="en">
<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>Hello!</h1>
</body>
</html>Ejecuta la aplicación y ve a la página de inicio (http://localhost:3000/). Deberías ver la página con el contenido del archivo index.njk.
En resumen:
views.index.njk, y el controlador es el responsable de renderizarla.Si quieres, puedes ampliar esta plantilla con secciones y componentes adicionales y aprovechar al máximo Tailwind CSS para los estilos. Considero que la combinación de NestJS, Nunjucks y Tailwind CSS es una excelente alternativa a Next.js, especialmente para proyectos que requieren control total del proceso de renderizado y minimizar los datos transferidos.
En la próxima publicación (o actualizando esta) mostraré cómo ampliar esta aplicación añadiendo integración con MongoDB. Esto nos permitirá gestionar datos en una base de datos y la aplicación se volverá totalmente dinámica y lista para manejar proyectos más grandes. También mostraré lo sencillo que es integrar MongoDB con NestJS usando el módulo @nestjs/mongoose y cómo crear operaciones CRUD (Create, Read, Update, Delete) para aplicaciones más avanzadas.
¡Sigue las próximas publicaciones para saber más!
¿Alternativa a Next.js (SSR)? Prueba NestJS + Nunjucks + Tailwind CSS
