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.72k stars 349 forks source link

Whats the point of using Next.js if I can’t use SSR? #12

Closed joamartico closed 2 years ago

joamartico commented 3 years ago

Isn't it the same as using Ionic in React.js without Next.js? Or it has some benefits?

hm-lee commented 3 years ago

It seems to be targeting users who already have a project consisting of SSR. In fact, Next has many advantages than I thought.

And i think there seems to be nothing new about this project without nextjs.

joamartico commented 3 years ago

Oh I understand. Despite that, it would be awesome to SSR an Ionic App. What's exactly the reason Next.js can't SSR Ionic? I know it can do it with the javascript vainilla ionic but it is not exactly what Im looking for

hm-lee commented 3 years ago

Basically, you don't have to SSR in ionic. because ionic doesn't need a client web server. If basic logic was constructed using functions such as getInitialProps, it also would work normally in CSR.

Perhaps if what you're trying to do is to configure only html and css as pre-configurable as possible, then the ssg build of next.js can be used with ionic.

joamartico commented 3 years ago

Tank you so much! I'll try SSG in Next.js with Ionic, I didn't know it works

colinmac17 commented 3 years ago

Just wanted to add my experience. I am building out a mobile app with Tailwind/Ionic/React using create react app with typescript. You definitely don't need to use next.js. Anything should work.

joamartico commented 3 years ago

Sure, but in my case I'm building a PWA so the SEO and the performance are things that I'm trying to improve and Next.js with SSR or SSG could be of great help

realmichaelye commented 3 years ago

Just wanted to add my experience. I am building out a mobile app with Tailwind/Ionic/React using create react app with typescript. You definitely don't need to use next.js. Anything should work.

How did you get TailwindCss to work without NextJS? I've been stuck on it forever

rommyarb commented 3 years ago

How did you get TailwindCss to work without NextJS? I've been stuck on it forever

Dude, TailwindCSS has official docs for Next.js https://tailwindcss.com/docs/guides/nextjs

yamatsum commented 3 years ago

If I don't do web development, I don't need nextjs, is that correct? Routing is left to ionic, no SSR is done, no SEO measures are required.

ccssmnn commented 3 years ago

Just wanted to add my experience. I am building out a mobile app with Tailwind/Ionic/React using create react app with typescript. You definitely don't need to use next.js. Anything should work.

How did you get TailwindCss to work without NextJS? I've been stuck on it forever

Tailwind has docs for setting it up with create-react-app (which Ionic Framework uses internally). Unfortunately, you need to use CRACO to take advantage of the purge CSS mechanism without ejecting.

There are two advantages for this starter with NextJS:

Still, it feels a little overkill to use NextJS to generate a fully client-side app just to use TailwindCSS.

mlynch commented 3 years ago

I think Next.js is probably overkill for this usecase but I also see Next.js as a quality production React framework. You don't have to use the SSR features of it to get a lot of other benefits, and it gives you the option to share code with perhaps a second sub-project that does have SSR enabled.

Of course, you also could load the app completely remotely by changing the server.url configuration for Capacitor to point to your SSR'ed Next.js app, but that has other challenges such as App Store approval if the app doesn't check the boxes for Apple to qualify it as an app that has enough native integration (at that point this is on you, not Capacitor)

Part of my goal in building this was to see if there was demand for a stack like this and hopefully communicate that through user interest with the Next.js team to hopefully support these export use cases a bit more thoroughly. Time will tell how that shakes out

joamartico commented 3 years ago

I think Next.js is probably overkill for this usecase but I also see Next.js as a quality production React framework. You don't have to use the SSR features of it to get a lot of other benefits, and it gives you the option to share code with perhaps a second sub-project that does have SSR enabled.

Of course, you also could load the app completely remotely by changing the server.url configuration for Capacitor to point to your SSR'ed Next.js app, but that has other challenges such as App Store approval if the app doesn't check the boxes for Apple to qualify it as an app that has enough native integration (at that point this is on you, not Capacitor)

Part of my goal in building this was to see if there was demand for a stack like this and hopefully communicate that through user interest with the Next.js team to hopefully support these export use cases a bit more thoroughly. Time will tell how that shakes out

Thanks for your reply, Max. But which are those benefits that Next.js provide? Improves the SEO although the project is not SSR nor SSG?

erkkimon commented 2 years ago

When I saw this project, I thought "great, at last I can easily do search engine optimized progressive web apps". In 2020/Q1 I tried combining NextJS and Ionic coz of Ionic's great toolbelt and and the sovereign SSR/SEO capabilities of NextJS but gave up. As they are now married, it would be great if SSR would be included in this project. It would be just wonderful for SEO of PWAs. Anyway, thank you @mlynch for many great Ionic starters during so many years!