Trouble to setup InertiaJS SSR

Hi everyone, After years without coding, I have started working on a new app, and I'm delighted by the Laravel Ecosystem. It provides a nice environment for learning and building, and the Laracast episodes have been invaluable in my journey. The success of my app relies heavily on SEO, which is why I need to set up SSR with Inertia. I began my app with Laravel Breeze as a starter kit and installed it with Vue and the SSR option. Even after reading the InertiaJS doc, I can't figure how to activate the rendering. I have started:

php artisan inertia:start-ssr

I my page vue file, I declare a title :

<Head>
        <title>My title</title>
    </Head>

But when I check the code of my page, I still have in the HTML of the rendered page:

<title inertia>App Name</title>

Do you have an idea of what I'm missing or a way to debug this situation? I'm stuck for several hours...

LaryAI

3 years ago

Level 58

It seems like the title tag is not being replaced with the value you set in your Vue component. Here are a few things you can try:

Make sure you have the @inertia directive in your layout file. This is required for Inertia to work properly. Here's an example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>@inertia</title>
        <link href="{{ mix('/css/app.css') }}" rel="stylesheet">
        @routes
    </head>
    <body>
        @inertia
        <script src="{{ mix('/js/app.js') }}" defer></script>
    </body>
</html>

Make sure you're using the title prop in your Vue component. Here's an example:

<template>
    <div>
        <h1>{{ title }}</h1>
        <p>This is my page content.</p>
    </div>
</template>

<script>
import { Head, Link } from '@inertiajs/inertia-vue3';

export default {
    props: {
        title: String,
    },
    components: {
        Head,
        Link,
    },
};
</script>

Make sure you're passing the title prop to your Vue component. Here's an example:

public function index()
{
    return Inertia::render('MyPage', [
        'title' => 'My Title',
    ]);
}

If none of these solutions work, try checking the console for any errors or warnings. You can also try debugging the server-side rendering process by adding some console.log statements to your server-side code.

Shain

3 years ago

Level 3

I finally found my error! I was using this code in my template:

<title inertia>{{ config('[app.name](http://app.name/)', 'Laravel') }}</title>

instead of using:

@inertiaHead

That's why my title wasn't server side rendered. Thanks ChatGPT for helping me to find this issue!

Please or to participate in this conversation.