SSR using vitejs

[ibrunotome]

I'm using inertia with vitejs instead webpack, everything works well but without any settings related to SSR (see below):

const { resolve } = require('path')
import vue from '@vitejs/plugin-vue'

export default ({ command }) => ({
  base: command === 'serve' ? '' : '/dist/',
  publicDir: 'fake_dir_so_nothing_gets_copied',
  build: {
    manifest: true,
    outDir: resolve(__dirname, 'public/dist'),
    rollupOptions: {
      input: 'resources/scripts/app.ts',
      external: [
        resolve(__dirname, 'public/img')
      ],
    },
  },

  plugins: [vue()],

  resolve: {
    alias: {
      '@': resolve('./resources/scripts'),
    },
  },
})

Has anyone made it with SSR?

[ajnsn]

Hey @ibrunotome

I am also still trying out things regarding SSR in combination with Vite, but this seems to work:

vite.ssr.config.js

import { defineConfig } from 'vite';
import { resolve } from 'path';
import vue from '@vitejs/plugin-vue';

export default defineConfig(() => ({
    publicDir: false,
    build: {
        ssr: true,
        target: 'node17',
        outDir: 'public/build-ssr',
        rollupOptions: {
            input: 'resources/js/ssr.js',
        },
    },
    resolve: {
        alias: {
            '@': resolve(__dirname, 'resources/js'),
        },
    },
    plugins: [vue()],
}));

ssr.js

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

const components = import.meta.globEager('./pages/**/*.vue');

createServer(page =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: name => components[`./pages/${name}.vue`].default,
        setup({ app, props, plugin }) {
            return createSSRApp({
                render: () => h(app, props),
            }).use(plugin);
        },
    }),
);

vite build --config vite.ssr.config.js
node public/build-ssr/ssr.js

[ibrunotome]

@ajnsn after two weeks working on other tasks, I'm finishing SSR settings again. The build is working, but when I hit a url that has the Ziggy route method, it crashes. Works normally on pages that doesn't has the route method.

This is my route method:

I use it normally with import route from '@/Shared/useRoute' on my .vue files and it works normally without SSR.

Do you have a idea of what could be happening?

[ajnsn]

Hey @ibrunotome
afaik Ziggy heavily relies on the window, which is not available in SSR.
This article might help. Also make sure to use the latest version(s).

[ibrunotome]

Hey @ibrunotome
afaik Ziggy heavily relies on the window, which is not available in SSR.
This article might help. Also make sure to use the latest version(s).

I came to this article yesterday, but since I'm using Composition API and typescript, the suggested mixin method on the article would not work since Composition API doesn't have mixins. So I edited my useRoute.ts to replace the Ziggy configuration like the article showed, but only when the request is coming from a server and... it worked 😀

Thank you for your help Alexander!

[secondmanveran]

@ibrunotome

Can you show the new useRoute.ts I'm interested in seeing how you resolved this?

Thanks

[ibrunotome]

@secondmanveran

import ZiggyRoute, { Config, RouteParamsWithQueryOverload } from 'ziggy-js'
import { Ziggy } from '@/Shared/useZiggy'
import { computed } from 'vue'
import { usePage } from '@inertiajs/inertia-vue3'

const locale = computed(() => usePage().props.value.locale)

// @ts-ignore
const ZiggyConfig = computed<Config>(() => ({
  ...Ziggy,
  // @ts-ignore
  location: new URL(usePage().props.value.ziggy.location),
}))

const route = (name, params?, absolute = false, config = ZiggyConfig.value) =>
  ZiggyRoute(name, params, absolute, config)

export const localizedRoute = (routeName: string, params?: RouteParamsWithQueryOverload) => {
  if (locale.value === 'en') {
    return route(routeName, params)
  }

  return route(`${locale.value}.${routeName}`, params)
}

export default route