Express.js For Server-Side Rendering

Note: this page has been created with the use of AI. Please take caution, and note that the content of this page does not necessarily reflect the opinion of Cratecode.

Express.js might just ring a bell if you're familiar with the world of web development. It's a nifty framework built on top of Node.js that makes it a breeze to build web applications. Today, we're going to be using Express.js to explore the wonderland of server-side rendering.

The Concept

Before we jump in, let's first understand what server-side rendering (SSR) is. In a nutshell, it's when the server creates the entire HTML for a page in response to a user's request, instead of leaving it to the client's browser. Thanks to SSR, the user sees a fully rendered page without any laggy loading, and search engines find it easier to crawl and index your site. The tradeoff? Your server might need to hit the gym to handle the extra workload.

The Setup

To get started with Express.js for server-side rendering, you'll first need Node.js and npm installed on your machine. If Node.js is the heart of your server, npm is like its personal assistant, helping it manage packages and dependencies.

The Showtime

Once you're all set, it's time to roll up your sleeves and start writing some code. Here's how to create a basic Express.js server:

const express = require("express");
const app = express();

app.get('/', (req, res) => {
    res.send('Hello, Cratecode!');
});

app.listen(3000, () => {
    console.log("Server is running on port 3000");
});

This script will start a server at http://localhost:3000. If you navigate to that URL, you'll see the message "Hello, Cratecode!" That's great and all, but it's not server-side rendering. Let's amp up the complexity a bit.

To implement server-side rendering, we need a way to create our HTML server-side. A handy library for this purpose is EJS. Let's install it using npm:

npm install ejs

Now let's modify our script to use EJS for server-side rendering:

const express = require("express");
const app = express();

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    res.render('index', {message: 'Hello, Cratecode!'});
});

app.listen(3000, () => {
    console.log("Server is running on port 3000");
});

Now, when you navigate to http://localhost:3000, the server will use EJS to render an HTML file named 'index.ejs', passing it an object {message: 'Hello, Cratecode!'}.

FAQ