diff --git a/packages/router/src/rsc/ClientRouter.tsx b/packages/router/src/rsc/ClientRouter.tsx index d262c22b2e3a..483a4674815d 100644 --- a/packages/router/src/rsc/ClientRouter.tsx +++ b/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 + return } const requestedRoute = pathRouteMap[activeRoutePath] @@ -80,7 +80,7 @@ const LocationAwareRouter = ({ activeRouteName={requestedRoute.name} > - + ) @@ -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 + return } export interface RscFetchProps extends Record { diff --git a/packages/router/src/rsc/RscFetcher.tsx b/packages/router/src/rsc/RscFetcher.tsx index 0c5e19abf6eb..5a750c968a81 100644 --- a/packages/router/src/rsc/RscFetcher.tsx +++ b/packages/router/src/rsc/RscFetcher.tsx @@ -36,21 +36,18 @@ 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() @@ -58,7 +55,7 @@ function rscFetch(rscId: string, serializedProps: string) { // 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', }, @@ -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)