The AdonisJS InertiaJS Adapter Now Supports Vue Server-Side Rendering (SSR)

The AdonisJS Adapter by Lev Eidelman Nagar for InertiaJS now supports server-side rendering (SSR) for both Vue 2 and Vue 3.

Published
Aug 01, 22

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

Version 7 of the AdonisJS Adapter by Lev Eidelman Nagar (Eidellev on GitHub) for InertiaJS was released on July 30th. This version adds server-side rendering (SSR) support for Vue 2 and Vue 3.

We'll have a complete lesson on this within our AdonisJS & InertiaJS series, but to get you started, let's go over some of the required steps to add SSR to your AdonisJS, InertiaJS, and Vue 3 app.

Update to 7.0.0 or Later

First, you'll want to make sure you're running at least version 7.0.0 of the @eidellev/inertia-adonisjs package.

To upgrade you can run the below.

npm i @eidellev/[email protected]
Copied!

If you're starting fresh, you should be fine installing without specifying a version.

npm i @eidellev/inertia-adonisjs

Configure with SSR

Next, you'll want to reconfigure the package within your AdonisJS application. With the new version, we'll be able to enable SSR through our selections. Note, for this guide I'll be using Vue 3. Check out the documentation for Vue 2 instructions.

node ace configure @eidellev/inertia-adonisjs

 Enter the edge file you would like to use as your entrypoint · app
 Would you like to install the Inertia.js client-side adapter? (Y/n) · true
 Would you like to use SSR? (y/N) · true
 Which client-side adapter would you like to set up? · @inertiajs/inertia-vue3
Copied!

If you're running this on a project with the adapter already configured, be sure to use the same entry point name you previously set up.

By selecting true for "Would you like to use SSR?", the package will add a webpack.ssr.config.js Webpack Encore configuration file in the root of our project. Go ahead and open this file and configure it the same as your normal webpack.config.js file; uncomment the below Encore.enableVueLoader lines near line 145.

Encore.enableVueLoader(() => {}, {
  version: 3,
  runtimeCompilerBuild: false,
  useJsx: false,
})
Copied!

Add an SSR Script Entrypoint

Lastly, we'll want to add an additional script entry point specific for SSR at resources/js/ssr.js

import { createSSRApp, h } from 'vue';
import { renderToString } from '@vue/server-renderer';
import { createInertiaApp } from '@inertiajs/inertia-vue3';

export default function render(page) {
  return createInertiaApp({
    page,
    render: renderToString,
    resolve: (name) => require(`./Pages/${name}`),
    setup({ app, props, plugin }) {
      return createSSRApp({
        render: () => h(app, props),
      }).use(plugin);
    },
  });
}
Copied!

Boot It Up

Congratulations, you've now got SSR ready to go within your AdonisJS, InertiaJS, and Vue 3 application! Let's boot it up and test it out.

First, start your normal server.

node ace serve --watch
Copied!

Then, add the SSR watcher

node ace ssr:watch
Copied!

Head into your application, open up the Network tab of your developer tools, and inspect the response for the document request. If all went well, you should see the contents of your Vue 3 application rendered out.

TODO

Join The Discussion! (4 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. Commented 1 year ago

    Note that this won't work with Vite - as far as I could recreate this, it's meant to be used with the Webpack Encode providers.

    0

    Please sign in or sign up for free to reply

    1. Commented 1 year ago

      I couldn't make it work. Could you help?

      0

      Please sign in or sign up for free to reply

  2. Commented 1 year ago

    I did all the steps and an error is shown.

    require() of ES Module C:\Users\Projeto\node_modules@inertiajs\vue3\dist\index.js from C:\Users\Projeto\inertia\ssr\ssr.js not supported. index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\Users\Projeto\node_modules@inertiajs\vue3\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).


    I believe that the transpile is not made to run on the frontend (Client). I tried a few things, but to no avail.

    1

    Please sign in or sign up for free to reply

    1. Commented 1 year ago

      Both Inertia and this provider have had a major release since this was posted. We recently released a lesson walking through setting up the latest version

      https://adocasts.com/lessons/how-to-create-an-adonisjs-5-and-inertia-1-project-with-ssr

      0

      Please sign in or sign up for free to reply