nextjs-tailwind-ionic-capacitor-starter
nextjs-tailwind-ionic-capacitor-starter copied to clipboard
mlynch
I am interested in figuring out a SSR solution. Can we discuss here?
I wanted to open a discussion if there are any ideas about creating an SSR solution that works on the web.
From my understanding the main issue with SSR in Ionic is the routing in Next JS uses a folder structure where Ionic is using its version of React Router to do transitions. The pages directory is where Next looks for where to go and also what to SSR.
The solution in this repo has been to not use the page directory other than for a single pointer to the AppShell which would have all the React Router stuff.
I could vaguely imagine a solution where we could still use the pages directory and each page has a conditional logic to decide if it shows an App directory with IonRoutes (mobile) or loads the component directly, possibly passing SSR data along (web). If the component needs to fetch data, it can see if it was loaded with data already from the server. If not, then fetch the data clientside. And finally, new routes can be done with a custom useRouter hook that takes handles useIonRoute and Next's useRouter.
For now, I wouldn't account for the new Next App directory cause that's more complexity.
I can fiddle around with it and produce a repo at some point if there's interest. But I just want to see if maybe people already have a solution, or have suggestions or improvements for this proposal.
The issue is that ionic web components are web components and can't be SSR'ed in Next.js since Next.js doesn't have a window object. There are workarounds (such as using a custom Next.js server) but those workarounds then make it not able to run on Vercel (at least that used to be a limitation, I haven't been following if there's any progress there)
I see. But what about getServerSideProps + next/dyanmic w/ ssr:false? We may not get a fully rendered page, but I think accessing data server side before the page load could still be useful. I don't think we would need a custom server.
Want to ask few things, so if we want a mobile app with SEO on the web, we can use next js + capacitor correct? but we will lose the native transition and routing from ionic because we did not use it (using next js file routing).
I suppose if you set up next js correctly and can get it working on capacitor, then I would imagine yes. But this repo uses ionic and I'm still trying to figure out how SEO is possible here.
On Sun, May 21, 2023 at 3:02 AM Sami Kalammallah @.***> wrote:
Want to ask few things, so if we want a mobile app with SEO on the web, we can use next js + capacitor correct? but we will lose the native transition and routing from ionic because we did not use it (using next js file routing).
— Reply to this email directly, view it on GitHub https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter/issues/44#issuecomment-1556136790, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYFLNZPRJGWYD2QFQ5ZBYQDXHHRZ3ANCNFSM6AAAAAAX2H6KLE . You are receiving this because you authored the thread.Message ID: <mlynch/nextjs-tailwind-ionic-capacitor-starter/issues/44/1556136790@ github.com>
If you just use Next.js with Capacitor and build your own UI, SSR should work. You won't have the native style transitions but you can still build a quality app and can design your own transitions if you like (a simple fade or modal animation might suffice for most of the app anyways)
The issue is that ionic web components are web components and can't be SSR'ed in Next.js since Next.js doesn't have a
windowobject. There are workarounds (such as using a custom Next.js server) but those workarounds then make it not able to run on Vercel (at least that used to be a limitation, I haven't been following if there's any progress there)
@mlynch Could you give more details on workarounds? Especially regarding the use of a custom Next.js server. I don't mind having a custom server for now (hoping to use Vercel at some point). Why does using a custom server solve the problem of using window? What do I need to change in the server configuration to support window?
The issue is that ionic web components are web components and can't be SSR'ed in Next.js since Next.js doesn't have a
windowobject. There are workarounds (such as using a custom Next.js server) but those workarounds then make it not able to run on Vercel (at least that used to be a limitation, I haven't been following if there's any progress there)@mlynch Could you give more details on workarounds? Especially regarding the use of a custom Next.js server. I don't mind having a custom server for now (hoping to use Vercel at some point). Why does using a custom server solve the problem of using window? What do I need to change in the server configuration to support window?
This looks promising, maybe give it a look: https://github.com/jagreehal/nextjs-stenciljs-ssr-example
FWIW, I've been trying a few different approaches to SSR with Ionic + Next.js (and the app directory). I think this is a promising PoC: https://github.com/jkhaui/app-dir-ionic-ssr
But implementing a client-side routing system that plays nicely with Next.js' in-built router will probably be challenging