How doe the inertia ssr server works ?

Hi all,

I am currently not working with Laravel but Aspnet core, and as I am not a big Blazor fan I wanted to explore the other options I had to build my front end. Alpine is handy and setting Vue as a hosted Spa works reasonably well but I wanted to give Inertia a try because I really like the concept.

I have managed to build a small kind of working demo App but I also wanted to add SSR support.

I have tried to follow https://inertiajs.com/server-side-rendering

If I get it right I can build a SSR server compiling the server given by @inertiajs/vue3/server createServer running "vite build --ssr ./src/ssr.js --outDir ./server

I have run the output with node and it obviously exposes something on port 13714. Starting SSR server on port 13714... But as the code is generated, it is hard to understand what it does. I can just tell that it holds references to the content of my Vue components which I take for a good sign.

If I understand https://vitejs.dev/guide/ssr.html well the goal Is to swap a

<!--ssr-outlet-->

placeholder from my dom with what this endpoint can give me. Obviously the c# inertia adapter does not do that, but I guess I could try to hack something like a middleware.

The problem is I don't really know how the endpoint is to be called.

I took a look at Laravel's HttpGateway from Inertia\ssr

        $url = str_replace('/render', '', config('inertia.ssr.url', 'http://127.0.0.1:13714')).'/render';
        try {
            $response = Http::post($url, $page)->throw()->json();
        } catch (Exception $e) {
            return null;
        }

And indeed there is a "/render" endpoint accepting POST but I have no clue what the $page variable should look like.

Does anyone know how it is supposed to work?

erizo

3 years ago

Level 8

Actually reading https://github.com/inertiajs/server/blob/master/src/index.ts

it seems that it expects a form-encoded version of Page from

import { Page} from "@inertiajs/core"

I have something back. Still not sure what to do with it but I guess I am making progress :)

{
  "head": [
    "<meta name=\"description\" content=\"Your page description\" inertia>",
    "<title inertia>The Home fage from Head</title>"
  ],
  "body": "<div id=\"app\" data-page=\"{&quot;component&quot;:&quot;TheHomePage&quot;,&quot;props&quot;:{},&quot;url&quot;:&quot;&quot;}\"> ........."
}

What I have sent :

@baseUrl = http://localhost:13714
### 
# @name=preview
POST {{baseUrl}}/render HTTP/1.1
Content-Type: x-www-form-urlencoded

{
  
   "component": "TheHomePage",
   "props": {},
   "url": ""
}

    # component: string;
    # props: PageProps & SharedProps & {
    #     errors: Errors & ErrorBag;
    # };
    # url: string;
    # version: string | null;
    # scrollRegions: Array<{
    #     top: number;
    #     left: number;
    # }>;
###

I guess It will me a bit of time to figure out what to send exactly.

Please or to participate in this conversation.