handle microbrowsers well

[mikehardy]

Is your feature request related to a problem? Please describe.

microbrowsers (like google search, or the minibrowsers used to parse a site behind a URL used when sharing an app URL to social media) require a non-React site with proper OpenGraph tags

Right now, any app built on this template will be invisible to search engines and links to the app (even though they are well-formed / useful URLs #43 ) will have useless cards show up in social apps

Describe the solution you'd like
This...is hard.

Relevant reading:

• isomorphic react ? unsure this is a useful knowledge path
  https://necolas.github.io/react-native-web/docs/rendering/#server-api - server side rendering (the most flexible! you serialize state to client on all responses and accept state back, server re-hydrates a Context server-side in order to know how to render next screen etc...) but it works, here's one using Redux though I think a Context could work: https://www.freecodecamp.org/news/server-side-rendering-your-react-app-in-three-simple-steps-7a82b95db82e/
• just adding open graph tags? https://stackoverflow.com/questions/50968603/sharing-on-social-media-the-url-does-not-render-any-meta-data in combo with for example https://github.com/s-yadav/react-meta-tags
• pre-rendering cornerstone pages? (same stackoverflow link above)

I think making this template work correctly with server side rendering for those that want it is the best way to go, as it is the most flexible by far. However I may be misunderstanding either how difficult that is, or that pre-render is seperate/orthogonal as a solution and just as valid

Describe alternatives you've considered
My work projects right now use firebase dynamic links which at least provides something nice when users do social sharing, but it doesn't allow for truly link-specific content to show up as a nice shared card like when Open Graph tags are used really well

Additional context

I lost the link but there was an information article I read recently on the theme "You still need an HTML website" that talked about how unreliable network connections, small network connections, crap mobile devices etc all contribute to a small-percentage chance that users have a bad experience on your site. And then it argued that it is not a small percentage of your users, it is a small percentage of visits across all users, and that after some number of bad experiences a user leaves, and this affects your entire audience. It was fairly convincing, especially combined with the idea of SEO and microbrowsers needing non-javascript support when the app is delivered

[LunatiqueCoder]

Describe the solution you'd like
This...is hard.

😂 I have to agree with you on that. I actually have no experience with server side rendering, but it's been on my list for some time now. The reasons why I didn't dive into it: I did not need it so far and I've been waiting for React 18, which makes server-side-rendered apps more interactive and insightful.

[LunatiqueCoder]

Hey @mikehardy!

After some digging, I came across lots of references and possible updates for Luna.

1. react-native-url-router

React Native Url Router aims to simplify native navigation patterns.

It allows for native navigation UI that feels natural on mobile together with easy navigation by opening URLs.

It exports Stack and Tab Navigators same as react-navigation, but they are usually closely mapped with an app-wide URL structure.

Being designed to work seamlessly with react-router and it should feel immidiately intuitive to people who used react-router on web.

React Router provides the routing logic, route ranking, matching, params support and more.

React Native Url Router provides a powerful new abstraction over a regular web history stack. It also integrates with react-native-screens providing a fully native stack behavior, and relies on react-native-pager-view for swipeable Tabs.

This library is great as it fixes a lot of issues that react-navigation currently has on web! Unfortunately, it's a work in progress
and still does not solve our described issues in the first post.

Useful links:
Youtube: React Native Everywhere! | Taz Singh | App.js Conf 2022

2. Next.js

Well, now with Next.js, we will solve all our issues. It has features like server side rendering and pre rendering and many other optimizations that you normally want.

There's also a navigation library for React Native + Next.js called Solito which handles navigation very well from what I've tried it out.

However, there's not much support for bare React Native projects and Next.js. It can be seen be used with Expo (https://docs.expo.dev/guides/using-nextjs/) by using @expo/next-adapter to handle the configuration and integration of the tools. However, I've played around with the @expo/next-adapter and we can come up with an adapter without the Expo support.

EDIT: We will no longer need react-scripts, craco or react-app-rewired. @expo/next-adapter has the configuration that we need for react-native-web and with Next.js we can still configure anything with no headaches.

Useful links:
Youtube: Building Cross-Platform Apps with React Native + Next.js | Fernando Rojo | App.js Conf 2022

[mikehardy]

Hey! Believe it or not, I'm back to doing a lot of web work just now (after a long long pause while finishing a work project, then traveling, then mostly native stuff) and I was just thinking about trying to push the web template stuff forward

I will admit my initial reaction to anything-but-react-navigation is that all those projects look cool but I would be really really hesitant to move from react-navigation. Why? I feel like we're close to getting that package to work (it works pretty well even on web in my experience? with URLs and everything), it works really well on native, and most of all: it is professionally supported over a long period of time. That last part, the maintenance+support over a long period of time is just so critical. As long as react-navigation can be made to work, that's my strongest criteria personally. But then: software mansion also has a track record of good support. Tough one!

Also, it looks like it handles a UX I am trying to go for (drawer navigator for app feature navigation - I guess that could be a side by side - on left, and drawer navigator or modal on right for user/app settings) but I'm not sure https://software-mansion-labs.github.io/react-native-url-router/docs/overview/#what-if-an-opened-url-is-not-found

At the same time, Fernando Rojo is really into all this stuff (including with PRs etc) so that's an interesting voice selling this stuff :-). Perhaps I am coming at it all from a perspective that is too react-native focused, and instead coming at it from a more web focus is better?

So some questions then - when navigation on these projects do transitions with animations etc, are those 60fps in mobile? I guess yes with solito since it is react-navigation (and thus reanimated) under the covers)

How does it actually do SSR? It seems like dripsy at least (responsive design component in the next / solito stack) doesn't handle it? But I'm not sure I guess deploying the starter to vercel then browsing it with javascript disabled is the test. It seemed like step 3 above this link and this SEO link mean you have to do a special side thing for SSR / SEO things? https://www.dripsy.xyz/get-started/web/next#seo

All really interesting though, I learned so much just by reading through this stuff. I think Solito has lots of potential and it looks worth a try...

[guplem]

Hi! I am eager to create a web/app using Luna, it provides almost all features we need. However, after checking the pull requests and issues, it looks like the template is very close to receiving some nice features. What is keeping those pull requests from being merged? May I help in any way?
Thanks for your work and for sharing this!

[LunatiqueCoder]

Hello @guplem

Thank you for your interest! It means a lot! Unfortunately, most of the contributions are made in our spare time, and from my side, I think it will only be ready on Christmas/New Year period, since only then I will have a lot of spare time to work on 😂 But I hope in in January at the latest to have a stable release.

[guplem]

Hello @guplem

Thank you for your interest! It means a lot! Unfortunately, most of the contributions are made in our spare time, and from my side, I think it will only be ready on Christmas/New Year period, since only then I will have a lot of spare time to work on 😂 But I hope in in January at the latest to have a stable release.

Thanks for the fast response! However, I can't wait that long to start the development… but do you know if it would be possible to easily update my project once those changes are done? I am specially interested in the resolution of this issue, since the webpage must be discoverable via search engines.

[LunatiqueCoder]

I think it will be quite a challenge to update indeed, especially if you manage to implement a lot in a short amount of time. However, I can suggest you create-solito-app, it basically solves this issue by using Next.js for web, but you will be using Expo instead.

Hmm, but you actually intrigued me. What's the deadline that you need to start this project? Maybe I can push a little bit harder...

[guplem]

@criszz77 unfortunately I could not delay this app much more than one week… I was actually creating the project now, and I found out about Luna while troubleshooting here.

I have considered expo many times… but I am afraid I will have to implement a feature in the future and I won't be able due to Expo. My boss would kill me 😅
Would you recommend using it? I see it has been quite improved over time, but I am new to React Native development and I don't know much about it, so I don't know if I will encounter many issues doing real-world development.

[mikehardy]

I think with EAS build and config-plugins there is not too much fear of Expo lock-in now. You may find yourself in a situation where you need to author a config-plugin in order to adapt some non-Expo external native module to Expo so that it works in EAS build, but those do not look too hard to author to me. We have several in the non-Expo repositories I help maintain so I know there are examples everywhere of how to do it.

[LunatiqueCoder]

I personally haven't used Expo in a long time. But indeed, I noticed it improved a lot. Also, Expo got you covered with Next.js support and there's expo-router, a library that's under development but looks very similar to the routing with Next.js. So overall, I think Expo might be a better choice at the moment for this tech stack and if it actually becomes a problem I believe you can also eject to a bare React Native project.

[guplem]

@mikehardy @criszz77 Thank you very much for sharing your experience. I will deeply consider your suggestions. It looks like it is indeed the best way to create fast react cross-platform web-applications. Thank you very much!