SSR Support #51

arthur-er · 2022-01-09T22:25:31Z

SSR Support for Inertia is officially out, and should be here as well

Currrently Inertia docs suggests running a separate server for rendering the pages as the official adapters don't run in NodeJS, but as Adonis is a NodeJS framework we can add support for Inertia SSR on the same server.

I'm currently using SSR without support from the adapter (using a view global that renders and returns the inertia page) and its working as a breeze.

My suggestion to implement this is just including a SSR Render config function on the already existing inertia config that receives the render function to support different front-end frameworks and include the SSR request in the existing @inertia edge tag with a extra @inertiaHead tag to match Inertia Laravel implementation

I'm willing to work in this if approved

eidellev · 2022-01-10T06:19:42Z

Thank you. I completely agree and was planing on starting to implement SSR later this week. If you have a working implementation and would like to open a PR that would be great. Please note that I just added a contribution guide to the readme.
Let me know if you have any questions. This is really exciting :-)

arthur-er · 2022-01-11T03:04:52Z

I don't know exactly how to fit it into the package, current it works like that:

// start/view.ts
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import View from '@ioc:Adonis/Core/View'

View.global('ssr', (page) => {
  try {
    return createInertiaApp({
      resolve: (name: string) => require(`Resources/Pages/${name}`).default,
      page,
      render: ReactDOMServer.renderToString,
      setup: ({ App, props }) => React.createElement(App, processProps(props)),
    })
  } catch (error) {
    return undefined
  }
})

@set('ssr_page', await ssr(page))
<!DOCTYPE html>
<html>
  <head>
    @each(element in ssr_page?.head)
      {{{ element }}}
    @end
  </head>
  <body>
    @if(ssr_page)
      {{{ ssr_page.body }}}
    @else
      @inertia()
    @end
  </body>
</html>

kevin-DL · 2022-02-23T11:24:32Z

I don't know exactly how to fit it into the package, current it works like that:

// start/view.ts
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import View from '@ioc:Adonis/Core/View'

View.global('ssr', (page) => {
  try {
    return createInertiaApp({
      resolve: (name: string) => require(`Resources/Pages/${name}`).default,
      page,
      render: ReactDOMServer.renderToString,
      setup: ({ App, props }) => React.createElement(App, processProps(props)),
    })
  } catch (error) {
    return undefined
  }
})

@set('ssr_page', await ssr(page))
<!DOCTYPE html>
<html>
  <head>
    @each(element in ssr_page?.head)
      {{{ element }}}
    @end
  </head>
  <body>
    @if(ssr_page)
      {{{ ssr_page.body }}}
    @else
      @inertia()
    @end
  </body>
</html>

Hello, this looks great, would it work the same way for Vue?

arthur-er · 2022-02-23T11:49:04Z

Yes, just swap the react part of inertia setup for the vue ones

kevin-DL · 2022-02-23T12:57:30Z

Thank you I will try that.

…

On Wed, 23 Feb 2022, 11:49 Arthur Emanuel, ***@***.***> wrote: Yes, just swap the react part of inertia setup for the vue ones — Reply to this email directly, view it on GitHub <#51 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB6YYW5PEAKYZHH4DWJUHRDU4TCTZANCNFSM5LSLLDOQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

kevin-DL · 2022-03-02T22:27:35Z

So i tried like this

View.global('ssr', async (page) => {
  try {
    return createInertiaApp({
      resolve: (name) => require(`Resources/js/Pages/${name}.vue`),
      page,
      render: renderToString,
      setup: ({ app, props, plugin }) => {
        return createSSRApp({
          render: () => h(app, props),
        }).use(plugin)
      },
    }).catch((e) => {
      console.log({
        e,
      })
    })
  } catch (error) {
    console.log({
      error,
    })
    return undefined
  }
})

but i keep getting an error

`
^

SyntaxError: Unexpected token '<'`

Do you have any idea what i am doing wrong?

Cheers.

justDare · 2022-03-15T16:57:40Z

Any update on this one for out-of-the-box package support? Or does anyone have a working example they'd be open to sharing?

I'm close to a working react example I'd be able to share but still running into some webpack issues with TSX files.

eidellev · 2022-03-16T07:59:08Z

@justDare official support is coming eventually (I just had a busy couple of months with the whole covid-19 situation).
meanwhile, if you manage to make things work with your react example I'd be happy if you would consider opening a PR.

eidellev · 2022-03-22T16:34:57Z

SSR support for react was added in 6.1.0
Vue and svelte will be added soon
I'm keeping this ticket open until then

@arthur-er thank you for you example code, it really helped!

EsTharian · 2022-03-26T20:37:43Z

SSR support at v6.1.0 breaks the others, mine is Svelte and I got below error. @eidellev

edit: v6.0.1 works well 👍

eidellev · 2022-03-28T08:28:20Z

@EsTharian thank you for reporting this. i'm already working on a fix + support for vue3.
meanwhile you can safely downgrade.

bradley-varol · 2022-06-04T22:48:27Z

Vue and svelte will be added soon

Sorry to be that guy but is there an ETA on the Vue SSR support? I'm about to start a project and want to make sure it's going to be supported. Thanks 🙌🏻

eidellev · 2022-06-05T14:10:07Z

It's a little hard for me to commit to a timeline, this being a side project of mine, but support for Vue is coming.

eidellev · 2022-07-30T20:26:37Z

Vue is officially supported in v7.0.0 onward! 🥳

eidellev closed this as completed Jul 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SSR Support #51

SSR Support #51

arthur-er commented Jan 9, 2022

eidellev commented Jan 10, 2022

arthur-er commented Jan 11, 2022 •

edited

Loading

kevin-DL commented Feb 23, 2022

arthur-er commented Feb 23, 2022

kevin-DL commented Feb 23, 2022 via email

kevin-DL commented Mar 2, 2022 •

edited

Loading

justDare commented Mar 15, 2022

eidellev commented Mar 16, 2022

eidellev commented Mar 22, 2022

EsTharian commented Mar 26, 2022 •

edited

Loading

eidellev commented Mar 28, 2022

bradley-varol commented Jun 4, 2022

eidellev commented Jun 5, 2022

eidellev commented Jul 30, 2022

SSR Support #51

SSR Support #51

Comments

arthur-er commented Jan 9, 2022

SSR Support for Inertia is officially out, and should be here as well

eidellev commented Jan 10, 2022

arthur-er commented Jan 11, 2022 • edited Loading

kevin-DL commented Feb 23, 2022

arthur-er commented Feb 23, 2022

kevin-DL commented Feb 23, 2022 via email

kevin-DL commented Mar 2, 2022 • edited Loading

justDare commented Mar 15, 2022

eidellev commented Mar 16, 2022

eidellev commented Mar 22, 2022

EsTharian commented Mar 26, 2022 • edited Loading

eidellev commented Mar 28, 2022

bradley-varol commented Jun 4, 2022

eidellev commented Jun 5, 2022

eidellev commented Jul 30, 2022

arthur-er commented Jan 11, 2022 •

edited

Loading

kevin-DL commented Mar 2, 2022 •

edited

Loading

EsTharian commented Mar 26, 2022 •

edited

Loading