Set-up SSR

composer.json

@@ -10,7 +10,7 @@
         "ext-gd": "*",
         "fruitcake/laravel-cors": "^2.0",
         "guzzlehttp/guzzle": "^7.0.1",
-        "inertiajs/inertia-laravel": "^0.4.5",
+        "inertiajs/inertia-laravel": "^0.5.3",
         "laravel/framework": "^8.65",
         "laravel/sanctum": "^2.11",
         "laravel/tinker": "^2.5",

config/inertia.php

@@ -0,0 +1,62 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Server Side Rendering
+    |--------------------------------------------------------------------------
+    |
+    | These options configures if and how Inertia uses Server Side Rendering
+    | to pre-render the initial visits made to your application's pages.
+    |
+    | Do note that enabling these options will NOT automatically make SSR work,
+    | as a separate rendering service needs to be available. To learn more,
+    | please visit https://inertiajs.com/server-side-rendering
+    |
+    */
+
+    'ssr' => [
+
+        'enabled' => true,
+
+        'url' => 'http://127.0.0.1:13714/render',
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Testing
+    |--------------------------------------------------------------------------
+    |
+    | The values described here are used to locate Inertia components on the
+    | filesystem. For instance, when using `assertInertia`, the assertion
+    | attempts to locate the component as a file relative to any of the
+    | paths AND with any of the extensions specified here.
+    |
+    */
+
+    'testing' => [
+
+        'ensure_pages_exist' => true,
+
+        'page_paths' => [
+
+            resource_path('js/Pages'),
+
+        ],
+
+        'page_extensions' => [
+
+            'js',
+            'jsx',
+            'svelte',
+            'ts',
+            'tsx',
+            'vue',
+
+        ],
+
+    ],
+
+];

package.json

@@ -2,7 +2,7 @@
     "private": true,
     "scripts": {
         "dev": "npm run development",
-        "development": "mix",
+        "development": "mix && npm run ssr:build",
         "fix:eslint": "eslint --ext .js,.vue resources/js/ --fix",
         "fix:prettier": "prettier --write --loglevel warn 'resources/js/**/*.vue'",
         "fix-code-style": "npm run fix:prettier && npm run fix:eslint",
@@ -10,18 +10,22 @@
         "watch-poll": "mix watch -- --watch-options-poll=1000",
         "hot": "mix watch --hot",
         "prod": "npm run production",
-        "production": "mix --production",
-        "heroku-postbuild": "npm run prod"
+        "production": "mix --production && npm run ssr:build",
+        "heroku-postbuild": "npm run prod",
+        "ssr:build": "mix --production --mix-config=webpack.ssr.mix.js",
+        "ssr:serve": "node public/js/ssr.js"
     },
     "dependencies": {
-        "@inertiajs/inertia": "^0.10.1",
-        "@inertiajs/inertia-vue3": "^0.5.2",
-        "@inertiajs/progress": "^0.2.6",
+        "@inertiajs/inertia": "^0.11.0",
+        "@inertiajs/inertia-vue3": "^0.6.0",
+        "@inertiajs/progress": "^0.2.7",
+        "@inertiajs/server": "^0.1.0",
         "@popperjs/core": "^2.11.0",
+        "@vue/server-renderer": "^3.2.27",
         "autoprefixer": "^10.4.0",
         "eslint": "^8.4.1",
         "eslint-plugin-vue": "^8.2.0",
-        "laravel-mix": "^6.0.39",
+        "laravel-mix": "^6.0.41",
         "lodash": "^4.17.21",
         "postcss": "^8.4.4",
         "postcss-import": "^12.0.1",
@@ -30,7 +34,8 @@
         "prettier-plugin-tailwind": "^2.2.12",
         "tailwindcss": "^2.0.3",
         "uuid": "^8.3.2",
-        "vue": "^3.2.24",
-        "vue-loader": "^16.2.0"
+        "vue": "^3.2.27",
+        "vue-loader": "^16.2.0",
+        "webpack-node-externals": "^3.0.0"
     }
 }

resources/js/app.js

@@ -6,7 +6,7 @@ InertiaProgress.init()
 
 createInertiaApp({
   resolve: name => require(`./Pages/${name}`),
-  title: title => `${title} - Ping CRM`,
+  title: title => title ? `${title} - Ping CRM` : 'Ping CRM',
   setup({ el, App, props, plugin }) {
     createApp({ render: () => h(App, props) })
       .use(plugin)

resources/js/ssr.js

@@ -0,0 +1,16 @@
+import { createSSRApp, h } from 'vue'
+import { renderToString } from '@vue/server-renderer'
+import { createInertiaApp } from '@inertiajs/inertia-vue3'
+import createServer from '@inertiajs/server'
+
+createServer((page) => createInertiaApp({
+  page,
+  render: renderToString,
+  resolve: name => require(`./Pages/${name}`),
+  title: title => title ? `${title} - Ping CRM` : 'Ping CRM',
+  setup({ app, props, plugin }) {
+    return createSSRApp({
+      render: () => h(app, props),
+    }).use(plugin)
+  },
+}))

resources/views/app.blade.php

@@ -13,6 +13,7 @@
     <script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.startsWith" defer></script>
 
     <script src="{{ mix('/js/app.js') }}" defer></script>
+    @inertiaHead
 </head>
 <body class="font-sans leading-none text-gray-700 antialiased">
     @inertia

webpack.mix.js

@@ -1,4 +1,3 @@
-const path = require('path')
 const process = require('process')
 const mix = require('laravel-mix')
 const cssImport = require('postcss-import')

webpack.ssr.mix.js

@@ -0,0 +1,13 @@
+const mix = require('laravel-mix')
+const webpackNodeExternals = require('webpack-node-externals')
+const webpackConfig = require('./webpack.config')
+
+mix
+  .options({ manifest: false })
+  .js('resources/js/ssr.js', 'public/js')
+  .vue({ version: 3, options: { optimizeSSR: true } })
+  .webpackConfig({
+    ...webpackConfig,
+    target: 'node',
+    externals: [webpackNodeExternals()],
+  })