title: How do I make my react app SSR in monorepo?
body: <p>So one reason I was using react was to take advantage of &quot;Learn Once, Write Anywhere&quot;. I have a mono-repo setup, something like this:</p>
  <pre><code>backend:
    * flask (&amp; other stuff)
  frontend: 
    * components (keeps all the business logic, .web.js files and .native.js files)
    * native (keeps setup and entry point for react native)
    * web (keeps setup and entry point for react)
  </code></pre>
  <p>so in this way i was able to write business logic in <strong>components</strong> and was able to share them between react and react-native, all the views to be rendered in web were <strong>.web.js</strong> and for react-native they were <strong>.native.js</strong> . It took months for me to setup me like this and react-router helped out greatly and everything is working smoothly....until I just realized how bad it is for SEO.</p>
  <p>I hadn't thought that this client-side JS web-app wouldn't show anything to google to index. Now I want to make it SSR, if not all, at-least the homepage and other static pages. The core app which is behind login can use CSR.
  I was thinking about using nextjs, which is what should when I started for web. All my shared components are inside <strong>components</strong> and don't know how to setup next.js now. And there will be another hustle to remove react-router and react-router-native,  which would be huuuge rewrite.
  My app is almost done and I was about to launch it in a month. I worked it on for almost a year now. I don't know what approach to take.</p>
  <p>After some research I came with these thoughts:</p>
  <ul>
  <li>use nextjs in <strong>components -&gt; web</strong> and move <strong>.web.js</strong> stuff from components  use file based routing, remove all react-router dependence and use react-navigation for react-native,  this will make my whole webapp ssr, which is what i ideally need. However, I tried doing that all night but bugs keep coming and they keep coming, something tells me i should look for another solution</li>
  <li>create <strong>components -&gt; nextjs</strong>  (or maybe gatsbyjs) and keep all the stuffs I need for SSR there, then use <strong>app.mydomain.com</strong> to host the CSR app and all other SSR stuff in <strong>mydomain.com</strong>,  looks less difficult path, don't know if it's ideal. But how do i combine them?</li>
  <li>install nextjs and react-native in <strong>components</strong>   and keep all <strong>next.config.js</strong> and <strong>metro.config.js</strong> everything there, use approach #1 to make file based routing and remove react-router</li>
  </ul>
  <p>What do you think? How should I get off this mess?
  Is there another solution which will make my app SSR without much refactoring already existing setup? I was just thinking next.js just for SSR. Everything else is sorted.</p>