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...