chore(rsc): Rename rscFetch to rscFetchRoutes and hardcode the rscId (#11407)

Author: Tobbe

packages/router/src/rsc/ClientRouter.tsx

@@ -49,7 +49,7 @@ const LocationAwareRouter = ({
     //     'defined for the root of your React app.',
     // )
     const rscProps = { location: { pathname, search } }
-    return <RscFetcher rscId="__rwjs__Routes" rscProps={rscProps} />
+    return <RscFetcher rscProps={rscProps} />
   }
 
   const requestedRoute = pathRouteMap[activeRoutePath]
@@ -80,7 +80,7 @@ const LocationAwareRouter = ({
         activeRouteName={requestedRoute.name}
       >
         <AuthenticatedRoute unauthenticated={unauthenticated}>
-          <RscFetcher rscId="__rwjs__Routes" rscProps={rscProps} />
+          <RscFetcher rscProps={rscProps} />
         </AuthenticatedRoute>
       </RouterContextProvider>
     )
@@ -91,7 +91,7 @@ const LocationAwareRouter = ({
   // re-initializes RscFetcher. I wonder if there's an optimization to be made
   // here. Maybe we can lift RscFetcher up so we can keep the same instance
   // around and reuse it everywhere
-  return <RscFetcher rscId="__rwjs__Routes" rscProps={rscProps} />
+  return <RscFetcher rscProps={rscProps} />
 }
 
 export interface RscFetchProps extends Record<string, unknown> {

packages/router/src/rsc/RscFetcher.tsx

@@ -36,29 +36,26 @@ function onStreamFinished(
   )
 }
 
-function rscFetch(rscId: string, serializedProps: string) {
+function rscFetchRoutes(serializedProps: string) {
   console.log(
-    'rscFetch :: args:\n    rscId: ' +
-      rscId +
-      '\n    serializedProps: ' +
-      serializedProps,
+    'rscFetchRoutes :: args:\n    serializedProps: ' + serializedProps,
   )
-  const rscCacheKey = `${rscId}::${serializedProps}`
+  const rscCacheKey = serializedProps
 
   const cached = rscCache.get(rscCacheKey)
   if (cached) {
-    console.log('rscFetch :: cache hit for', rscCacheKey)
+    console.log('rscFetchRoutes :: cache hit for', rscCacheKey)
     return cached
   } else {
-    console.log('rscFetch :: cache miss for', rscCacheKey)
+    console.log('rscFetchRoutes :: cache miss for', rscCacheKey)
   }
 
   const searchParams = new URLSearchParams()
   searchParams.set('props', serializedProps)
 
   // TODO (RSC): During SSR we should not fetch (Is this function really
   // called during SSR?)
-  const responsePromise = fetch(BASE_PATH + rscId + '?' + searchParams, {
+  const responsePromise = fetch(BASE_PATH + '__rwjs__Routes?' + searchParams, {
     headers: {
       'rw-rsc': '1',
     },
@@ -82,7 +79,7 @@ function rscFetch(rscId: string, serializedProps: string) {
       // a new cache key that will trigger a rerender.
       // TODO (RSC): What happens if you call the same RSA twice in a row?
       // Like `increment()`
-      const rscCacheKey = `${rscId}::${serializedProps}::${rsaId}::${new Date()}`
+      const rscCacheKey = `${serializedProps}::${rsaId}::${new Date()}`
 
       const searchParams = new URLSearchParams()
       searchParams.set('action_id', rsaId)
@@ -150,17 +147,16 @@ function rscFetch(rscId: string, serializedProps: string) {
 }
 
 interface Props {
-  rscId: string
   rscProps: RscProps
 }
 
-export const RscFetcher = ({ rscId, rscProps }: Props) => {
+export const RscFetcher = ({ rscProps }: Props) => {
   const serializedProps = JSON.stringify(rscProps)
   const [currentRscCacheKey, setCurrentRscCacheKey] = useState(() => {
     console.log('RscFetcher :: useState initial value')
-    // Calling rscFetch here to prime the cache
-    rscFetch(rscId, serializedProps)
-    return `${rscId}::${serializedProps}`
+    // Calling rscFetchRoutes here to prime the cache
+    rscFetchRoutes(serializedProps)
+    return serializedProps
   })
 
   useEffect(() => {
@@ -173,19 +169,13 @@ export const RscFetcher = ({ rscId, rscProps }: Props) => {
   }, [])
 
   useEffect(() => {
-    console.log('RscFetcher :: useEffect about to call rscFetch')
-    // rscFetch will update rscCache with the fetched component
-    rscFetch(rscId, serializedProps)
-    setCurrentRscCacheKey(`${rscId}::${serializedProps}`)
-  }, [rscId, serializedProps])
+    console.log('RscFetcher :: useEffect about to call rscFetchRoutes')
+    // rscFetchRoutes will update rscCache with the fetched component
+    rscFetchRoutes(serializedProps)
+    setCurrentRscCacheKey(serializedProps)
+  }, [serializedProps])
 
-  console.log(
-    'RscFetcher :: current props\n' +
-      '    rscId: ' +
-      rscId +
-      '\n    rscProps: ' +
-      serializedProps,
-  )
+  console.log('RscFetcher :: current props\n    rscProps: ' + serializedProps)
   console.log('RscFetcher :: rendering cache entry for\n' + currentRscCacheKey)
 
   const component = rscCache.get(currentRscCacheKey)