Implement SSR (server-side rendering) function based on Vue3

What is Server-side Rendering (SSR)?

Simply put, server-side rendering is a technology that generates HTML output on the server-side. Compared to traditional client rendering (CSR), SSR can provide full HTML tags when loading for the first time, so users spend less time loading pages and gain greater visibility in search engines. By directly generating and passing HTML through the server, SSR can also improve the rendering speed of the first screen and reduce the user's perceived latency.

Vue 3's SSR Features

Vue 3 has been significantly improved and optimized on SSR, which is divided into two main parts:

Vue 3 Server Portal: This is the output that generates HTML, dependent on Vue's rendering function.
Vue 3 Client rehydration: It can improve the user interaction experience after the user loads the page, and transfer the user's interaction to Vue's components after the page is loaded.

How to implement SSR

Next, let's implement Vue 3's SSR step by step. We will create a simple Vue app and show how to set up SSR.

Step 1: Environment Settings

First, make sure you have installed npm and npm. Then, we start creating a new Vue project. Open the terminal and run:

npm init -y
npm install vue vue-server-renderer express

Step 2: Create a Vue app

Create a project root directorysrc/Folders and create them indocument:

// src/
const { createSSRApp } = require('vue');

 = function () {
  const app = createSSRApp({
    data: () => ({
      message: 'Hello, SSR with Vue 3!'
    }),
    template: `<div>{{ message }}</div>`
  });

  return { app };
};

This simple Vue app returns a message. In the case of SSR, the application is about to be rendered by the server, so this is how we create our Vue instance.

Step 3: Create a server

Next, we need to create a server that will render the app to HTML and send it to the client. Create in the project root directorydocument:

// 
const express = require('express');
const { createSSRApp } = require('vue');
const { renderToString } = require('vue-server-renderer').createRenderer();
const appEntry = require('./src/app');

const server = express();

('/', async (req, res) => {
  const { app } = appEntry();

  try {
    const html = await renderToString(app);
    (`
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue 3 SSR Demo</title>
      </head>
      <body>
        <div >${html}</div>
        <script src="/"></script>
      </body>
      </html>
    `);
  } catch (error) {
    (500).send('Server Error');
  }
});

(3000, () => {
  ('Server running at http://localhost:3000');
});

In this file, we create an Express server and render the Vue component to HTML using the renderToString function when the root path (/). It should be noted that the app introduced here is the Vue application we created before.

Step 4: Client re-render

In order for Vue applications to become active in the browser, we need to create client JavaScript files. In the src/ folder, create a new file and add the following:

// src/
import { createSSRApp } from 'vue';
import appEntry from './app';

const { app } = appEntry();
('#app');

This file creates the same Vue app and mounts it to the root element we created in HTML.

Step 5: Test the application

Now that we have completed the implementation of Vue 3 SSR, we can start the service and test the application. Run the following command on the command line:

node

Open the browser and visit http://localhost:3000, and you will see the message "Hello, SSR with Vue 3!" displayed on the page, which is rendered by the server.

in conclusion

Vue 3's server-side rendering settings are relatively simple, which can significantly improve application performance and user experience. We show how to set up a basic SSR application with a simple example, but in actual development, the application may involve more advanced features such as routing, state management, etc.

With the popularity of Vue 3 and the expansion of application scenarios, SSR's advantages in improving user experience and SEO undoubtedly make it the first choice solution for developers. In the future, SSR will play a more important role.

This is the end of this article about implementing SSR (server-side rendering) based on Vue3. For more related content on implementing SSR in Vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!