docs: Motivations behind this package and limitations

[maiieul]

📚 Is your documentation request related to a problem?

I personally would like to know what are the motivations behind this package, and what are the known limitations or limitations you have been thinking about. It seems quite obvious to me that the goal behind nuxt with ionic allows cross platform development with one codebase and still get the advantages of nuxt. To my understanding, just like with next.js in react world, people are mainly using nuxt for the developer experience and SSR/SSG for SEO performance. Correct me if I'm wrong, but SSR shines for unpredictable data (e.g. user generated data) and SSG shines for stable data. One of my main concern is: do SSR and SSG work in this package? There is this package in next world, but they say SSR doesn't work out of the box.

Lastly, are there any other undocumented known limitations?

Knowing and documenting those two points could help other developers have a sense of a kind of roadmap and contribute more easily perhaps.

🔍 Where should you find it?

Seems like one of the first things to tell. It's always good to start with WHY (see Simon Sinek) in my opinion.

ℹ️ Additional context

No response

[aaronksaunders]

I have found this issue to be a limitation https://github.com/danielroe/nuxt-ionic/issues/19

[daver987]

A big limitation!

[ennioVisco]

The reason is pretty obvious in my view: providing a plug and play solution for deploying a nuxt project on mobile. This, of course, could prove to be quite challenging considering the large set of features nuxt provides (e.g. does talking about SSR make any sense in this context?)

[saviorsoul]

(e.g. does talking about SSR make any sense in this context?)

I created some example of what I think this module can do for us in terms of SSR with Nuxt and Ionic

https://github.com/saviorsoul/nuxt-ionic

I added one missing piece of nuxt router which was not included in this module:

nuxtApp.hooks.hookOnce('app:created', async () => {
    try {
      await router.replace({
        ...router.resolve(initialURL),
        name: void 0,
        force: true,
      })
    } catch (error2) {
      callWithNuxt(nuxtApp, showError, [error2])
    }
  })

the result is that now nuxt server is trying to generate HTML from components but without ionic web-components context, so it basically creates a DOM structure which contains all needed data but is always rendered without possibility to hydrate. Adding ionic web-components context on client-side hydration always changes the DOM structure. So for now my understanding is like this:

• it's hard for me to create ionic web-components DOM structure on node.js server. What if I couldn't do it at all - does SSR gives me other benefits?

• If I forget about First Contentful Paint which is delivered by server side, I can just use client side rendering which is happening during hydration. If I do display: none (or maybe better visibility: hidden) on 'non-hydratable' DOM from server I still have all needed data for crawlers. I will remove 'non-hydratable' DOM just before client hydration and update the DOM with fully interactive ionic app.

https://github.com/saviorsoul/nuxt-ionic/blob/9121b9afe1822f12911feea45ff544a6e4e51afd/src/runtime/app.vue

• I'm able to use data fetched from server side, which is available for me in window.__NUXT__ - I can still speed up client side rendering if I only cache some requests on server side and it will increase my Time To Interactive.

• SEO or media preview crawlers might be able to get all the needed data from meta tags and web components that are just plain DOM elements. Maybe it will be even beneficial for crawlers like the one from Bing which doesn't use Javascript?

https://medium.com/patternfly-elements/web-components-and-seo-58227413e072

• In mobile context I don't need SSR and SEO, my understanding here is that setting ssr: false in nuxt.config.ts for build should be enough.

So I think to summarise this whole concept, maybe SSR integration with Ionic doesn't gives us easy way of pre-rendering DOM structure on server-side but can gives us all other benefits from both Nuxt and Ionic frameworks?