La renderización del lado del servidor (SSR) es una técnica popular para renderizar una aplicación de una sola página (SPA) normalmente del lado del cliente en el servidor y luego enviar una página completamente renderizada al cliente. El paquete de JavaScript del cliente puede asumir el control y el SPA puede funcionar con normalidad.
La técnica SSR es útil en situaciones en las que el cliente tiene una conexión a Internet lenta y luego la representación de toda la página en el lado del cliente lleva demasiado tiempo en ciertas situaciones. La representación del lado del servidor puede resultar útil. Uno de los módulos más utilizados para realizar la representación del lado del servidor en Node.js es el módulo EJS. EJS significa plantilla JavaScript incrustada.
Característica del módulo EJS:
- Usa javascript simple.
- Tiempo de desarrollo rápido.
- Sintaxis sencilla.
- Ejecución más rápida.
- Fácil depuración.
- Desarrollo Activo.
Instalación del módulo de solicitud:
1. En primer lugar, instale express js y ejs usando npm install. También puede visitar este enlace para saber más sobre EJS.
npm install ejs
2. El método require() se utiliza para cargar y almacenar en caché los módulos de JavaScript.
const ejs = require('ejs');
3. El siguiente paso es crear una carpeta y agregar un nombre de archivo app.js y un archivo llamado index.ejs. Tenga cuidado con la sintaxis del archivo de índice, aquí es ejs que indica que es un archivo ejs. Para ejecutar este archivo, necesita el siguiente comando.
node app.js
Renderizar archivo usando el método EJS renderFIle()
Para realizar el renderizado del lado del servidor usamos el método renderFile() del módulo ejs, que nos ayuda a renderizar el archivo ejs en el lado del servidor.
Sintaxis:
ejs.renderFile( fileName, { }, { }, callback);
Aquí, la función de devolución de llamada toma dos argumentos, primero es un error (si ocurre un error, renderFile devuelve un error) y, al renderizarse correctamente, devuelve una plantilla.
Nombre de archivo: app.js
Javascript
// Requiring modules
const express = require('express');
const app = express();
const ejs = require('ejs');
var fs = require('fs');
const port = 8000;
// Render index.ejs file
app.get('/', function (req, res) {
// Render page using renderFile method
ejs.renderFile('index.ejs', {},
{}, function (err, template) {
if (err) {
throw err;
} else {
res.end(template);
}
});
});
// Server setup
app.listen(port, function (error) {
if (error)
throw error;
else
console.log("Server is running");
});
Nombre de archivo: index.ejs
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> </head> <body> <h1>Hello World</h1> </body> </html>
Pasos para ejecutar el programa:
1. Estructura de carpetas:
2. Asegúrese de haber instalado el módulo express y request usando los siguientes comandos:
npm install express npm install ejs
3. Ejecute app.js usando el siguiente comando:
node app.js
Servidor de Node de inicio
4. Ahora escriba localhost:8000 en su navegador para mostrar la página ejs y ver el siguiente resultado:
Resultado en el navegador
Publicación traducida automáticamente
Artículo escrito por ramanshhrma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA