RSC: Use the default entry.client file (#9654)

__fixtures__/test-project-rsa/web/src/App.tsx

@@ -0,0 +1,12 @@
+import { FatalErrorBoundary } from '@redwoodjs/web'
+
+import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
+import Routes from './Routes'
+
+const App = () => (
+  <FatalErrorBoundary page={FatalErrorPage}>
+    <Routes />
+  </FatalErrorBoundary>
+)
+
+export default App

__fixtures__/test-project-rsa/web/src/entry.client.tsx

@@ -1,20 +1,23 @@
-import { createRoot } from 'react-dom/client'
-
-import { FatalErrorBoundary } from '@redwoodjs/web'
-
-import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
-import Routes from './Routes'
+import { hydrateRoot, createRoot } from 'react-dom/client'
 
+import App from './App'
+/**
+ * When `#redwood-app` isn't empty then it's very likely that you're using
+ * prerendering. So React attaches event listeners to the existing markup
+ * rather than replacing it.
+ * https://reactjs.org/docs/react-dom-client.html#hydrateroot
+ */
 const redwoodAppElement = document.getElementById('redwood-app')
 
-const root = createRoot(redwoodAppElement)
-
-const App = () => {
-  return (
-    <FatalErrorBoundary page={FatalErrorPage}>
-      <Routes />
-    </FatalErrorBoundary>
+if (!redwoodAppElement) {
+  throw new Error(
+    "Could not find an element with ID 'redwood-app'. Please ensure it exists in your 'web/src/index.html' file."
   )
 }
 
-root.render(<App />)
+if (redwoodAppElement.children?.length > 0) {
+  hydrateRoot(redwoodAppElement, <App />)
+} else {
+  const root = createRoot(redwoodAppElement)
+  root.render(<App />)
+}

__fixtures__/test-project-rsc-external-packages/web/src/App.tsx

@@ -0,0 +1,12 @@
+import { FatalErrorBoundary } from '@redwoodjs/web'
+
+import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
+import Routes from './Routes'
+
+const App = () => (
+  <FatalErrorBoundary page={FatalErrorPage}>
+    <Routes />
+  </FatalErrorBoundary>
+)
+
+export default App

__fixtures__/test-project-rsc-external-packages/web/src/entry.client.tsx

@@ -1,20 +1,23 @@
-import { createRoot } from 'react-dom/client'
-
-import { FatalErrorBoundary } from '@redwoodjs/web'
-
-import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
-import Routes from './Routes'
+import { hydrateRoot, createRoot } from 'react-dom/client'
 
+import App from './App'
+/**
+ * When `#redwood-app` isn't empty then it's very likely that you're using
+ * prerendering. So React attaches event listeners to the existing markup
+ * rather than replacing it.
+ * https://reactjs.org/docs/react-dom-client.html#hydrateroot
+ */
 const redwoodAppElement = document.getElementById('redwood-app')
 
-const root = createRoot(redwoodAppElement)
-
-const App = () => {
-  return (
-    <FatalErrorBoundary page={FatalErrorPage}>
-      <Routes />
-    </FatalErrorBoundary>
+if (!redwoodAppElement) {
+  throw new Error(
+    "Could not find an element with ID 'redwood-app'. Please ensure it exists in your 'web/src/index.html' file."
   )
 }
 
-root.render(<App />)
+if (redwoodAppElement.children?.length > 0) {
+  hydrateRoot(redwoodAppElement, <App />)
+} else {
+  const root = createRoot(redwoodAppElement)
+  root.render(<App />)
+}

packages/cli/src/commands/experimental/setupRscHandler.js

@@ -90,15 +90,6 @@ export const handler = async ({ force, verbose }) => {
           })
         },
       },
-      {
-        title: 'Removing App.tsx...',
-        task: async () => {
-          const appPath =
-            rwPaths.web.app ?? path.join(rwPaths.web.src, 'App.tsx')
-
-          fs.rmSync(appPath, { force: true })
-        },
-      },
       {
         title: 'Adding Pages...',
         task: async () => {
@@ -284,19 +275,17 @@ export const handler = async ({ force, verbose }) => {
         },
       },
       {
-        title: 'Overwrite entry.client.tsx...',
+        title: 'Overwrite App.tsx...',
         task: async () => {
-          const entryClientTemplate = fs.readFileSync(
-            path.resolve(
-              __dirname,
-              'templates',
-              'rsc',
-              'entry.client.tsx.template'
-            ),
+          const appTemplate = fs.readFileSync(
+            path.resolve(__dirname, 'templates', 'rsc', 'App.tsx.template'),
             'utf-8'
           )
 
-          writeFile(rwPaths.web.entryClient, entryClientTemplate, {
+          const appPath =
+            rwPaths.web.app ?? path.join(rwPaths.web.src, 'App.tsx')
+
+          writeFile(appPath, appTemplate, {
             overwriteExisting: true,
           })
         },

packages/cli/src/commands/experimental/templates/rsc/App.tsx.template

@@ -0,0 +1,12 @@
+import { FatalErrorBoundary } from '@redwoodjs/web'
+
+import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
+import Routes from './Routes'
+
+const App = () => (
+  <FatalErrorBoundary page={FatalErrorPage}>
+    <Routes />
+  </FatalErrorBoundary>
+)
+
+export default App