Closed arthur-er closed 2 years ago
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 :-)
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>
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?
Yes, just swap the react part of inertia setup for the vue ones
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 https://github.com/eidellev/inertiajs-adonisjs/issues/51#issuecomment-1048701630, 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: @.***>
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.
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.
@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.
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!
SSR support at v6.1.0 breaks the others, mine is Svelte and I got below error. @eidellev
edit: v6.0.1 works well :+1:
@EsTharian thank you for reporting this. i'm already working on a fix + support for vue3. meanwhile you can safely downgrade.
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 🙌🏻
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.
Vue is officially supported in v7.0.0 onward! 🥳
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