SSR: Detect SSR is working on Vue 3 #1056

vuletuanbt · 2022-01-20T08:12:55Z

vuletuanbt
Jan 20, 2022

I'm new to enable SSR. I followed your docs to set up my project and it seems to work well. But I got a question, how do I know SSR is enabling?

My project

Laravel 8
NodeJS 16
Vue 3

config/inertia.php

<?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',

    ],
    ...
];

It would renders:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
      <link href="/css/app.css" rel="stylesheet">
      <script src="/js/app.js" defer></script>
   </head>
   <body>
      <div id="app" data-page="{&quot;component&quot;:&quot;About&quot;,&quot;props&quot;:{&quot;errors&quot;:{},&quot;about_us&quot;:&quot;working&quot;,&quot;users&quot;:[{&quot;id&quot;:1,&quot;name&quot;:&quot;Laurence Kuphal&quot;,&quot;email&quot;:&quot;[email protected]&quot;,&quot;email_verified_at&quot;:&quot;2022-01-15T08:34:57.000000Z&quot;,&quot;created_at&quot;:&quot;2022-01-15T08:34:57.000000Z&quot;,&quot;updated_at&quot;:&quot;2022-01-15T08:34:57.000000Z&quot;},{&quot;id&quot;:2,&quot;name&quot;:&quot;Millie Pacocha&quot;,&quot;email&quot;:&quot;[email protected]&quot;,&quot;email_verified_at&quot;:&quot;2022-01-15T08:34:57.000000Z&quot;,&quot;created_at&quot;:&quot;2022-01-15T08:34:57.000000Z&quot;,&quot;updated_at&quot;:&quot;2022-01-15T08:34:57.000000Z&quot;},{&quot;id&quot;:3,&quot;name&quot;:&quot;Micah Lebsack&quot;,&quot;email&quot;:&quot;[email protected]&quot;,&quot;email_verified_at&quot;:&quot;2022-01-15T08:34:57.000000Z&quot;,&quot;created_at&quot;:&quot;2022-01-15T08:34:57.000000Z&quot;,&quot;updated_at&quot;:&quot;2022-01-15T08:34:57.000000Z&quot;}]},&quot;url&quot;:&quot;/about-us&quot;,&quot;version&quot;:&quot;207fd484b7c2ceeff7800b8c8a11b3b6&quot;}">
         <div>
            <h1>Inertiajs is working</h1>
            <ul>
               <!--[-->
               <li>Laurence Kuphal</li>
               <li>Millie Pacocha</li>
               <li>Micah Lebsack</li>
               <!--]-->
            </ul>
            <a href="/">Go to Home</a>
         </div>
      </div>
   </body>
</html>

From your site demo SSR. It renders

<!DOCTYPE html>
<html class="h-full bg-gray-100">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="/css/app.css?id=bec3749df719fae909a0" rel="stylesheet">
    <script src="/js/app.js?id=f14f1db16ca92fd9f0ac" defer></script>
    <title inertia-head-ssr-element="true">Dashboard - Laravel</title>
</head>
<body class="font-sans leading-none text-gray-700 antialiased">
<div data-server-rendered="true" id="app" data-page="{&quot;component&quot;:&quot;Dashboard\/Index&quot;,&quot;props&quot;:{&quot;errors&quot;:{},&quot;app_name&quot;:&quot;Laravel&quot;,&quot;auth&quot;:{&quot;user&quot;:{&quot;id&quot;:1,&quot;first_name&quot;:&quot;John&quot;,&quot;last_name&quot;:&quot;Doe&quot;,&quot;email&quot;:&quot;[email protected]&quot;,&quot;owner&quot;:true,&quot;account&quot;:{&quot;id&quot;:1,&quot;name&quot;:&quot;Acme Corporation&quot;}}},&quot;flash&quot;:{&quot;success&quot;:null,&quot;error&quot;:null}},&quot;url&quot;:&quot;\/&quot;,&quot;version&quot;:&quot;ddd6f42c85bd3752e34a6e7189db9780&quot;}">
    <!---->
    <div class="md:flex md:flex-col">
        <div class="md:h-screen md:flex md:flex-col">
            <div class="md:flex md:flex-shrink-0">
                <div class="bg-indigo-900 md:flex-shrink-0 md:w-56 px-6 py-4 flex items-center justify-between md:justify-center">
                    <a href="/" class="mt-1">
                        <svg viewBox="0 0 1185 266" xmlns="http://www.w3.org/2000/svg" width="120" height="28" class="fill-white">
                            <path d="M77.463 265c-19.497 0-35.318-15.405-35.318-34.39v-22.054C17.987 202.676 0 181.326 0 155.948V55.206C0 25.291 24.946 1 55.668 1h154.664C241.054 1 266 25.29 266 55.206v100.806c0 29.916-24.946 54.206-55.668 54.206H145.67c-2.823 0-5.383 1.407-6.827 3.58-10.7 17.067-24.158 31.897-39.98 43.915-6.236 4.794-13.654 7.287-21.4 7.287zM55.701 27.336c-15.771 0-28.65 12.465-28.65 27.87v100.806c0 15.342 12.813 27.87 28.65 27.87 7.49 0 13.536 5.881 13.536 13.168v33.624c0 4.922 4.272 7.99 8.214 7.99 1.709 0 3.286-.575 4.732-1.662 13.273-10.1 24.576-22.565 33.578-36.947 6.309-10.036 17.743-16.237 29.965-16.237h64.727c15.77 0 28.65-12.464 28.65-27.87V55.206c0-15.341-12.814-27.87-28.65-27.87H55.7z"></path>
                            <path d="M395.752 2.4c37.152 0 65.088 27.936 65.088 64.8 0 36.576-27.936 64.8-65.088 64.8h-46.368v72H322.6V2.4h73.152zm0 104.544c22.176 0 38.592-16.992 38.592-39.744 0-23.04-16.416-39.744-38.592-39.744h-46.368v79.488h46.368zM502.6 33.792c-9.504 0-16.992-7.488-16.992-16.704 0-9.216 7.488-16.992 16.992-16.992 9.216 0 16.704 7.776 16.704 16.992 0 9.216-7.488 16.704-16.704 16.704zM489.928 204V60h25.056v144h-25.056zM625 56.256c33.696 0 55.872 22.464 55.872 59.328V204h-25.056v-86.976c0-23.616-13.536-36.864-35.712-36.864-23.04 0-41.76 13.536-41.76 47.52V204h-25.056V60h25.056v20.736C589 63.744 604.84 56.256 625 56.256zM835.24 60h24.768v137.952c0 44.928-36 67.392-73.44 67.392-32.256 0-56.448-12.384-68.256-35.136l21.888-12.384c6.624 13.536 18.72 24.192 46.944 24.192 29.952 0 48.096-16.992 48.096-44.064v-20.448c-11.52 17.568-29.952 28.8-54.144 28.8-40.896 0-73.44-33.12-73.44-75.168 0-41.76 32.544-74.88 73.44-74.88 24.192 0 42.624 10.944 54.144 28.512V60zm-51.264 122.4c29.088 0 51.264-22.176 51.264-51.264 0-28.8-22.176-50.976-51.264-50.976-29.088 0-51.264 22.176-51.264 50.976 0 29.088 22.176 51.264 51.264 51.264zM946.8 205.08c-28.21 0-45.63-20.8-41.08-48.88 4.42-27.17 26.91-46.28 53.56-46.28 19.37 0 31.59 9.36 38.35 22.36l-23.79 12.61c-3.25-5.85-9.1-9.49-16.9-9.49-12.35 0-23.14 9.23-25.35 22.1-2.08 11.83 4.29 22.1 17.16 22.1 8.06 0 13.91-4.03 18.59-10.14l21.58 13.65c-9.36 13.78-24.44 21.97-42.12 21.97zm126.36-59.93c-1.95 11.18-8.58 19.5-18.2 24.44l11.7 33.28h-26l-9.36-28.6h-8.32l-5.07 28.6h-26l16.12-91h36.4c18.33 0 32.24 13.65 28.73 33.28zm-43.42-9.36l-2.99 16.9h10.66c5.07.13 8.84-2.99 9.75-8.32.91-5.33-1.82-8.58-7.02-8.58h-10.4zM1184.05 112l-15.99 91h-26l7.67-43.81-25.48 33.54h-2.34l-14.82-35.23-7.93 45.5h-26l15.99-91h26l13.65 37.31 27.95-37.31h27.3z"></path>
                        </svg>
                    </a>
                    <button type="button" class="md:hidden">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-white w-6 h-6">
                            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                        </svg>
                        <!---->
                    </button>
                </div>
                <div class="bg-white border-b w-full p-4 md:py-0 md:px-12 text-sm md:text-md flex justify-between items-center">
                    <div class="mt-1 mr-4">Acme Corporation</div>
                    <button type="button" class="mt-1">
                        <div class="flex items-center cursor-pointer select-none group">
                            <div class="text-gray-700 group-hover:text-indigo-600 focus:text-indigo-600 mr-1 whitespace-nowrap"><span>John</span> <span class="hidden md:inline">Doe</span></div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="w-5 h-5 group-hover:fill-indigo-600 fill-gray-700 focus:fill-indigo-600">
                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                            </svg>
                        </div>
                        <!---->
                    </button>
                </div>
            </div>
            ....
        </div>
    </div>
</div>
</body>
</html>

I see some differences

<title inertia-head-ssr-element="true">Dashboard - Laravel</title>

<div data-server-rendered="true" id="app" data-page="{}">
....
</div>

So when you enable SSR , would it have inertia-head-ssr-element="true" and data-server-rendered="true" id="app" ?

HassanZahirnia · 2022-01-22T09:27:02Z

HassanZahirnia
Jan 22, 2022

Hey @vuletuanbt 😀
There are few differences between SSR enabled and non-SSR pages:

You usually should see nothing inside the <div id="app">
The SSR enabled pages are longer and has more content because everything is prerendered before it reaches the browser.
Also you should see the page title when SSR is enabled, like so:

<title inertia>Login</title>

If you disable javascript in your browser, you can still visit the SSR website and see it's content. If SSR is not enabled, you will see a blank page (without JS)

Also I suggest you to not compare your situation with Inertia's website, because sometimes the website uses custom or dated version of packages and it takes quite a while to maintainers to update the website to the latest stuff.

Let me know if you have any more questions! Have a great day!

4 replies

vuletuanbt Jan 23, 2022
Author

Hey @vuletuanbt 😀 There are few differences between SSR enabled and non-SSR pages:

You usually should see nothing inside the <div id="app">

The SSR enabled pages are longer and has more content because everything is prerendered before it reaches the browser.

Also you should see the page title when SSR is enabled, like so:
<title inertia>Login</title>
If you disable javascript in your browser, you can still visit the SSR website and see it's content. If SSR is not enabled, you will see a blank page (without JS)

Also I suggest you to not compare your situation with Inertia's website, because sometimes the website uses custom or dated version of packages and it takes quite a while to maintainers to update the website to the latest stuff.

Let me know if you have any more questions! Have a great day!

Thanks for your help. I think it works. I disabled javascript then it still render html.

vuletuanbt Jan 23, 2022
Author

TypeError: Cannot read properties of undefined (reading 'dispatch')
    at Proxy.D.forEach.n.<computed> (/var/www/html/public/js/ssr.js:2:105810)
    at Proxy.created (/var/www/html/public/js/ssr.js:2:107210)
    at _o (/var/www/html/public/js/ssr.js:2:171698)
    at So (/var/www/html/public/js/ssr.js:2:171775)
    at So (/var/www/html/public/js/ssr.js:2:171883)
    at un (/var/www/html/public/js/ssr.js:2:139328)
    at ln (/var/www/html/public/js/ssr.js:2:138936)
    at ao (/var/www/html/public/js/ssr.js:2:169605)
    at /var/www/html/public/js/ssr.js:2:169037
    at oo (/var/www/html/public/js/ssr.js:2:169045)
TypeError: Cannot read properties of undefined (reading 'state')
    at Proxy.D.forEach.n.<computed> (/var/www/html/public/js/ssr.js:2:104909)
    at w.run (/var/www/html/public/js/ssr.js:2:114744)
    at Qe.get value [as value] (/var/www/html/public/js/ssr.js:2:123182)
    at Object.get [as allUsers] (/var/www/html/public/js/ssr.js:2:138711)
    at Object.get (/var/www/html/public/js/ssr.js:2:166391)
    at /var/www/html/public/js/ssr.js:2:107446
    at v (/var/www/html/public/js/ssr.js:2:29322)
    at g (/var/www/html/public/js/ssr.js:2:28638)
    at b (/var/www/html/public/js/ssr.js:2:30553)
    at v (/var/www/html/public/js/ssr.js:2:29409)
TypeError: Cannot read properties of undefined (reading 'dispatch')
    at Proxy.D.forEach.n.<computed> (/var/www/html/public/js/ssr.js:2:105810)
    at Proxy.created (/var/www/html/public/js/ssr.js:2:107210)
    at _o (/var/www/html/public/js/ssr.js:2:171698)
    at So (/var/www/html/public/js/ssr.js:2:171775)
    at So (/var/www/html/public/js/ssr.js:2:171883)
    at un (/var/www/html/public/js/ssr.js:2:139328)
    at ln (/var/www/html/public/js/ssr.js:2:138936)
    at ao (/var/www/html/public/js/ssr.js:2:169605)
    at /var/www/html/public/js/ssr.js:2:169037
    at oo (/var/www/html/public/js/ssr.js:2:169045)
TypeError: Cannot read properties of undefined (reading 'state')
    at Proxy.D.forEach.n.<computed> (/var/www/html/public/js/ssr.js:2:104909)
    at w.run (/var/www/html/public/js/ssr.js:2:114744)
    at Qe.get value [as value] (/var/www/html/public/js/ssr.js:2:123182)
    at Object.get [as allUsers] (/var/www/html/public/js/ssr.js:2:138711)
    at Object.get (/var/www/html/public/js/ssr.js:2:166391)
    at /var/www/html/public/js/ssr.js:2:107446
    at v (/var/www/html/public/js/ssr.js:2:29322)
    at g (/var/www/html/public/js/ssr.js:2:28638)
    at b (/var/www/html/public/js/ssr.js:2:30553)
    at v (/var/www/html/public/js/ssr.js:2:29409)

I integrate with VueX. But I got new problems. It seems not working with vuex

HassanZahirnia Jan 23, 2022

Well I don't have much experience with vuex. Have you checked Vue's SSR Guide on vuex ? There are things you need to do to make vuex work with SSR.
I think you need to adjust/rewrite your Vuex in a way that it's data is available so the ssr node can finish pre-rendering.

neilyoung Dec 17, 2024

@vuletuanbt Best hint found today

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SSR: Detect SSR is working on Vue 3 #1056

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

SSR: Detect SSR is working on Vue 3 #1056

vuletuanbt Jan 20, 2022

Replies: 1 comment · 4 replies

HassanZahirnia Jan 22, 2022

vuletuanbt Jan 23, 2022 Author

vuletuanbt Jan 23, 2022 Author

HassanZahirnia Jan 23, 2022

neilyoung Dec 17, 2024

vuletuanbt
Jan 20, 2022

Replies: 1 comment 4 replies

HassanZahirnia
Jan 22, 2022

vuletuanbt Jan 23, 2022
Author

vuletuanbt Jan 23, 2022
Author