Server-side rendering without Next.js, Remix, Nuxt.js, etc.

Server-side rendering without Next.js, Remix, Nuxt.js, etc.


Hello everyone! Perhaps you want to implement server-side rendering in your project, but do not want to rework its established architecture? Then this article is especially for you. Today, I will try to tell you how to do this.

It is worth noting that this method is suitable for any web project architecture, be it WordPress, Vue.js, or any other.



Using HMPL

You can achieve server-side rendering by using this module. The connection is very simple and the usage is also:

"https://unpkg.com/json5/dist/index.js">
"https://unpkg.com/hmpl-js/dist/hmpl.min.js">
Enter fullscreen mode

Exit fullscreen mode

or

npm i hmpl-js
Enter fullscreen mode

Exit fullscreen mode

Now, you can safely use the module in the project. Let’s try to take some component from the server:


 lang="en">
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
    </span>Example<span class="nt"/>
  <span class="nt"/>
  <span class="nt"/>
    <span class="nt"><script/></span>
      <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span>
        <span class="nx">hmpl</span><span class="p">.</span><span class="nx">compile</span><span class="p">(</span><span class="s2">`<main>{{ src: "/api/header" }}</main>`</span><span class="p">)().</span><span class="nx">response</span>
      <span class="p">);</span>
    <span class="nt"/>
  <span class="nt"/>
<span class="nt"/>
</span></span></span></code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode
    

Exit fullscreen mode

Thanks to the extended markup of request objects, we can compile the string into a ready-made DOM node that can be easily rendered into the DOM.

The result will be as follows:

header

This way, our components are rendered on the server, and we simply display them on the client.

To better understand the process, let’s move on to the theory.



How Server-Side Rendering Works

This list describes the Server-Side rendering process step by step:

  1. Request: When a user requests a web page (by entering a URL or clicking a link), the request is sent to the web server.

  2. Processing: The server processes the request. This often involves fetching data from a database, running business logic, and rendering the HTML based on this data. This can be done using server-side frameworks such as Node.js with Express, Django, Ruby on Rails, etc.

  3. Generating HTML: The server creates the complete HTML for the requested page. This can be done using templating engines (like EJS, Handlebars, or Pug) or directly with server-side languages that build the HTML structure.

  4. Response: The server sends the fully rendered HTML page back to the client’s browser.

  5. Rendering in Browser: The browser receives the HTML and renders it immediately, displaying the content to the user.

In the diagram, it looks like this:

SSR

Now, let’s see what this looks like in code:

Here’s a simple example using Node.js with Express and EJS as the templating engine for SSR:

1. Set up Node.js with Express

First, you need to create a new Node.js project and install Express and EJS:

npm install express ejs
Enter fullscreen mode

Exit fullscreen mode

2. Create the Server

Create a file named server.js:

const express = require('express');
const app = express();
const PORT = 3000;

// Set EJS as the templating engine
app.set('view engine', 'ejs');

// Sample data
const data = {
    title: 'Server Side Rendering Example',
    content: 'This is an example of Server Side Rendering using Node.js and EJS.'
};

// Define a route
app.get('/', (req, res) => {
    // Render the HTML using EJS
    res.render('index', { data });
});

// Start the server
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});
Enter fullscreen mode

Exit fullscreen mode

3. Create the EJS Template
Create a folder named views, and inside it create a file named index.ejs:


 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    <%= data.title %>


    %= data.title %>
    

<

%= data.content %>
Enter fullscreen mode

Exit fullscreen mode

4. Start the Server
Run the server:

node server.js
Enter fullscreen mode

Exit fullscreen mode

Now, when you navigate to http://localhost:3000, the server will render the complete HTML page and send it to the browser.



Conclusion

This method is great when you don’t need to depend on the architecture of frameworks and libraries, but at the same time, because of this feature, since the page is requested from the client, search robots will not see the page. Therefore, this method is suitable when you don’t need to think too much about SEO.


Like

Also, I will be glad if you support the project with your star. Thank you!

Star HMPL ☆



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *