search

mlynch / nextjs-tailwind-ionic-capacitor-starter

A starting point for building an iOS, Android, and Progressive Web App with Tailwind CSS, React w/ Next.js, Ionic Framework, and Capacitor
https://dev.to/ionic/build-mobile-apps-with-tailwind-css-next-js-ionic-framework-and-capacitor-3kij
MIT License
1.63k stars 336 forks source link

SEO and static HTML? #42

Open erkkimon opened 1 year ago

erkkimon commented 1 year ago

It would be great if these two things would be clarified in the README since most people are after combination of Ionic + NextJS because of SEO and static hosting:

  1. Is the PWA crawlable by search engines?
  2. Can the exported version be hosted as static HTML?
erkkimon commented 1 year ago

I can't answer my own questions either, but to me it looks like the app is not crawlable. I can serve static files using Python3 http.server without any problems, but I can't wget the urls. If I'm right about this, could it be fixed somehow?

Screenshot 2023-01-09 at 22 56 31 Screenshot 2023-01-09 at 22 56 16
eeshankeni commented 1 month ago

i thought the whole point of this repo was the SEO benefits

deviationist commented 1 month ago

So the things is, if you want to use Next.js while making an app using Capacitor you need to make it non-SSR friendly since the whole app shell should be exportable to Xcode and Android Studio, and further into the app stores. You can see this when you export the client app bundle which again gets synched into Xcode and Android Studio. The tight coupling that Next providers between client and server side is reduced, and you're left with a standalone client side bundle and a Next.js backend that provides you with some nice features still, like the HTTP routes etc. Not sure if Server Actions still works, haven't tested it out yet. But this whole thing unfortunately leads to loss of SEO-friendliness due to the whole client side living in a JavaScript bundle, no server side rendered markup anymore. So I think you gotta choose - you want a SEO-friendly website or an app?

UPDATE: Watch this video and it might help you understand better: https://www.youtube.com/watch?v=xQKtDgJXrlM