commit before react_on_rails install

Gemfile

@@ -114,6 +114,6 @@ end
 
 gem "tailwindcss-rails", "~> 2.0"
 
-gem "react-rails"
 gem "shakapacker"
+gem "react_on_rails"
 gem "rack-cors"

Gemfile.lock

@@ -78,10 +78,6 @@ GEM
       tzinfo (~> 2.0)
     addressable (2.8.1)
       public_suffix (>= 2.0.2, < 6.0)
-    babel-source (5.8.35)
-    babel-transpiler (0.7.0)
-      babel-source (>= 4.0, < 6)
-      execjs (~> 2.0)
     bindex (0.8.1)
     binding_of_caller (1.0.0)
       debug_inspector (>= 0.0.1)
@@ -254,13 +250,14 @@ GEM
       rake (>= 12.2)
       thor (~> 1.0)
       zeitwerk (~> 2.5)
+    rainbow (3.1.1)
     rake (13.0.6)
-    react-rails (2.6.2)
-      babel-transpiler (>= 0.7.0)
+    react_on_rails (13.3.3)
+      addressable
       connection_pool
-      execjs
-      railties (>= 3.2)
-      tilt
+      execjs (~> 2.5)
+      rails (>= 5.2)
+      rainbow (~> 3.0)
     regexp_parser (2.6.2)
     reline (0.3.2)
       io-console (~> 0.5)
@@ -316,7 +313,6 @@ GEM
     tailwindcss-rails (2.0.26)
       railties (>= 6.0.0)
     thor (1.2.1)
-    tilt (2.1.0)
     timeout (0.3.1)
     turbo-rails (1.3.3)
       actionpack (>= 6.0.0)
@@ -380,7 +376,7 @@ DEPENDENCIES
   rails (~> 7.0.4, >= 7.0.4.2)
   rails_semantic_logger
   rb-bsdiff!
-  react-rails
+  react_on_rails
   ripcord
   rspec-rails
   ruby-prof

app/javascript/components/UserSearchBar.tsx

@@ -5,8 +5,8 @@ import ListItem from "./ListItem";
 import Icon from "./Icon";
 
 // staging
-// const HOST = "http://scraper.local:3001";
-const HOST = "";
+const HOST = "http://scraper.local:3001";
+// const HOST = "";
 const COMMON_LIST_ELEM_CLASSES = `
   w-full p-2 pl-8
   text-xl font-light

app/views/pages/root.html.erb

@@ -2,5 +2,5 @@
   <%= javascript_pack_tag "application" %>
 <% end %>
 <div class='w-full mt-2 sm:mt-6'>
-  <%= react_component("UserSearchBar") %>
+  <%= react_component("UserSearchBar", {}, prerender: true) %>
 </div>

config/application.rb

@@ -52,5 +52,13 @@ module ReduxScraper
     config.x.proxy_name = proxy_name
     config.x.proxy = Rails.application.config.x.proxies[proxy_name] || raise("no proxy config for '#{proxy_name}'")
     config.x.proxy[:name] = proxy_name
+
+    # react-rails SSR
+    # config.same_bundle_for_client_and_server = true
+    # config.react.server_renderer = React::ServerRendering::BundleRenderer
+    # config.react.server_renderer_options = {
+    #   files: ["server_rendering.js"],       # files to load for prerendering
+    #   replay_console: true,                 # if true, console.* will be replayed client-side
+    # }
   end
 end

config/environments/production.rb

@@ -2,7 +2,7 @@ require "active_support/core_ext/integer/time"
 
 Rails.application.configure do
   # Settings specified here will take precedence over those in config/application.rb.
-  config.react.server_renderer_extensions = ["jsx", "js", "tsx", "ts"]
+  # config.react.server_renderer_extensions = ["jsx", "js", "tsx", "ts"]
 
   # Code is not reloaded between requests.
   config.cache_classes = true

config/environments/staging.rb

@@ -2,7 +2,9 @@ require "active_support/core_ext/integer/time"
 
 Rails.application.configure do
   # Settings specified here will take precedence over those in config/application.rb.
-  config.react.server_renderer_extensions = ["jsx", "js", "tsx", "ts"]
+  # config.react.server_renderer_extensions = ["jsx", "js", "tsx", "ts"]
+  # config.react.variant = :production
+
   config.hosts << "localhost"
   config.hosts << "scraper.local"