Server Side Rendering | Advanced Vuejs

Introduction to Server-Side Rendering in VueJS

Server-Side Rendering (SSR) allows you to render your VueJS application on the server before sending it to the client. This can improve performance and SEO by providing fully rendered pages to search engines and users.

Key Points:

SSR renders your application on the server, generating HTML for the initial load.
Improves performance and SEO by providing fully rendered pages to search engines and users.
Requires a Node.js server to render the VueJS application on the server.
Vue.js provides official support for SSR through the `vue-server-renderer` package.

Setting Up a VueJS Project for SSR

To set up a VueJS project for SSR, you need to create a Node.js server and configure Webpack for server-side and client-side bundles. You can use the `vue-cli` and the `@vue/cli-plugin-ssr` plugin to streamline this process:


// Create a new VueJS project with SSR plugin
$ vue create my-ssr-app
$ cd my-ssr-app
$ vue add ssr

Project Structure

After setting up the SSR plugin, your project structure should look like this:


my-ssr-app/
├── dist/
├── public/
├── src/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   ├── entry-client.js
│   ├── entry-server.js
│   ├── router.js
│   └── store.js
├── package.json
└── server.js

Server-Side Entry Point

The server-side entry point is responsible for creating a Vue instance and rendering it to a string. Here is an example of `entry-server.js`:


// src/entry-server.js
import { createApp } from './main';

export default (context) => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp();

    router.push(context.url);

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();
      if (!matchedComponents.length) {
        return reject({ code: 404 });
      }

      Promise.all(matchedComponents.map(component => {
        if (component.asyncData) {
          return component.asyncData({ store, route: router.currentRoute });
        }
      })).then(() => {
        context.state = store.state;
        resolve(app);
      }).catch(reject);
    }, reject);
  });
};

Client-Side Entry Point

The client-side entry point is responsible for hydrating the server-rendered HTML. Here is an example of `entry-client.js`:


// src/entry-client.js
import { createApp } from './main';

const { app, router, store } = createApp();

if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__);
}

router.onReady(() => {
  app.$mount('#app');
});

Creating the Vue Instance

The `createApp` function is responsible for creating a new Vue instance. Here is an example of `main.js`:


// src/main.js
import Vue from 'vue';
import App from './App.vue';
import { createRouter } from './router';
import { createStore } from './store';

export function createApp() {
  const router = createRouter();
  const store = createStore();
  const app = new Vue({
    router,
    store,
    render: h => h(App)
  });

  return { app, router, store };
}

Setting Up the Server

Create a `server.js` file to set up the Node.js server and handle server-side rendering:


// server.js
const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');
const serverBundle = require('./dist/vue-ssr-server-bundle.json');
const clientManifest = require('./dist/vue-ssr-client-manifest.json');
const template = require('fs').readFileSync('./src/index.template.html', 'utf-8');

const app = express();

const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false,
  template,
  clientManifest
});

app.use('/dist', express.static('./dist'));

app.get('*', (req, res) => {
  const context = {
    title: 'Vue SSR',
    url: req.url
  };

  renderer.renderToString(context, (err, html) => {
    if (err) {
      if (err.code === 404) {
        res.status(404).end('Page not found');
      } else {
        res.status(500).end('Internal Server Error');
      }
    } else {
      res.end(html);
    }
  });
});

app.listen(8080, () => {
  console.log('Server is running on http://localhost:8080');
});

Best Practices

Follow these best practices when implementing SSR in VueJS:

Optimize Performance: Use caching strategies to optimize the performance of your SSR application.
Handle Errors Gracefully: Provide meaningful error messages and fallback content for users.
Use Async Data Handling: Ensure that asynchronous data is properly handled on both the server and client sides.
Test Thoroughly: Test your SSR application thoroughly to ensure it works correctly in different scenarios.
Keep Server and Client Code in Sync: Ensure that your server and client code are in sync to avoid rendering issues.

Summary

This guide provided an overview of server-side rendering (SSR) in VueJS, including setting up a project for SSR, creating server-side and client-side entry points, setting up the server, and best practices. By implementing SSR, you can improve the performance and SEO of your VueJS applications.

VueJS - Server-Side Rendering (SSR)