#Convert Inertia CSR to SSR

1 messages · Page 1 of 1 (latest)

empty sparrow
# 
// noinspection JSIgnoredPromiseFromCall

import './bootstrap';
import '../scss/app.scss';

import {hydrateRoot} from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import {LaravelReactI18nProvider} from "laravel-react-i18n";
import GlobalContext from "./Context/GlobalContext";
import React, {StrictMode} from 'react';
import CookieBanner from "./Components/CookieBanner";

const appName = 'JobHuntr';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    //@ts-ignore
    resolve: (name) => resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
    setup({ el, App, props }) {
        const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        let userLang = 'sl';

        switch (timeZone) {
            case 'Europe/Ljubljana':
                userLang = 'sl';
                break;
            default:
                userLang = 'en';
                break;
        }

        hydrateRoot(el,
            <StrictMode>
                <LaravelReactI18nProvider
                    locale={userLang}
                    fallbackLocale={'en'}
                    //@ts-ignore
                    files={import.meta.glob('/lang/*.json')}
                >
                    <GlobalContext>
                        <App {...props} />
                    </GlobalContext>
                    <CookieBanner />
                </LaravelReactI18nProvider>
            </StrictMode>
            )
    },
    progress: {
        color: '#4B5563',
    },
});

This is my app.tsx

# 
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import path from 'path';
import i18n from "laravel-react-i18n/vite";

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.tsx',
            ssr: 'resources/js/ssr.tsx',
            refresh: true,
        }),
        react(),
        i18n(),
    ],
    ssr: {
      noExternal: ['styled-components']
    },
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
        }
    }
});

And my vite.config.js

#

Convert Inertia CSR to SSR

versed trout
#

Might be worth explaining what the issue is, as "no luck" doesn't tell us anything as to what's going on, so don't really know what to help with

empty sparrow
#

Well, the pages are just not Server rendered, it does not work?

If i disable my JS, site is a white page

versed trout
#

What does your Inertia config look like?

empty sparrow
#

Where can i find it?

# 
import { createInertiaApp } from '@inertiajs/react'
import createServer from '@inertiajs/react/server'
import ReactDOMServer from 'react-dom/server'
import {LaravelReactI18nProvider} from "laravel-react-i18n";
import CookieBanner from "@/Components/CookieBanner";
import React from 'react';
import {resolvePageComponent} from "laravel-vite-plugin/inertia-helpers";

const appName = 'JobHuntr';

createServer(page =>
    createInertiaApp({
        page,
        render: ReactDOMServer.renderToString,
        title: (title) => `${title} - ${appName}`,
        // @ts-ignore
        resolve: (name) => resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
        setup: ({ App, props }) => {
            const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
            let userLang = 'sl';

            switch (timeZone) {
                case 'Europe/Ljubljana':
                    userLang = 'sl';
                    break;
                default:
                    userLang = 'en';
                    break;
            }

            return (
                <LaravelReactI18nProvider
                    locale={userLang}
                    fallbackLocale={'en'}
                    //@ts-ignore
                    files={import.meta.glob('/lang/*.json')}>
                    <App {...props} />
                    <CookieBanner />
                </LaravelReactI18nProvider>
            )
        },
    }),
)
#

Is it not this? This is the ssr.tx?

empty sparrow
#

Okay, so i've found it and published the vendor

# 
<?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.
    |
    | You can specify a custom SSR bundle path, or omit it to let Inertia
    | try and automatically detect it for you.
    |
    | 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',

        // 'bundle' => base_path('bootstrap/ssr/ssr.mjs'),

    ],

    /*
    |--------------------------------------------------------------------------
    | 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',

        ],

    ],

    'history' => [

        'encrypt' => false,

    ],

];
```\
empty sparrow
winged plover
#

wait are you run php artisan inertia:start-ssr