Search code examples
reactjsfirebasereact-nativenext.jsreact-native-web

Static HTML with dynamic SEO friendly Reactjs/Nextjs and React Native / React Native Web on firebase?

I apologize in advance for how new I am to this all. I have a new business and there are some things I want to code for it myself as proof of concept till we have enough revenue to actually hire real coders.

Our ecosystem will have 4 major areas and I'm not sure if my approach is how to go about it or even possible.

  1. The normal, static, info webpage that just talks about our business. (SEO and load times important)
  2. A React JS / Next JS non-static section of that same website for blog and other dynamic content. (SEO and load times important)
  3. A react JS employee backend for customer tracking and another tracking of customer data. (SEO and load times not as important here).
  4. A customer portal where they can log in and see stats and stuff about their account (this will pull from data we enter in the employee backend and they can access to track progress) (I would eventually like android/ios apps as well as web portal for this so I was thinking using react-native / react-native web for this section to try and maximize code reuse. (SEO not important, but a smooth experience is)

I planed on using firebase to host it all. I'm curious if this seems it can work? Can you combine all of these different frameworks and strategies in one overall project like this without causing over bloat of download and such? Like for example, the employee backend will likely have a lot of packages and dependencies that the static front end would not require. And the static frontend would be in the same project as the dynamic blog but be built on different things (one static HTML, the other react with next.js? is that a bad idea?). Also, it's been hard to find info on exactly how goog react-native-web is so I'm just lost with this all and would love some guidance. Thank you so much in advance for any direction you can offer.

Solution

  • With firebase hosting you can host static sites, and redirect some paths, such as /api/* or /dynamic/* to firebase cloud functions.

    On those cloud functions, you can do dynamic rendering, e.g. with remix.run or next.js.

    If you use good cache-headers on those cloud functions, firebase hosting caches the results appropriately, making dynamic rendering of all pages feasible too.