Skip to content

Commit

Permalink
chore(rsc): Rename rscFetch to rscFetchRoutes and hardcode the rscId (r…
Browse files Browse the repository at this point in the history
  • Loading branch information
Tobbe authored Sep 1, 2024
1 parent eaf6221 commit 0f49c1e
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 30 deletions.
6 changes: 3 additions & 3 deletions packages/router/src/rsc/ClientRouter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down Expand Up @@ -80,7 +80,7 @@ const LocationAwareRouter = ({
activeRouteName={requestedRoute.name}
>
<AuthenticatedRoute unauthenticated={unauthenticated}>
<RscFetcher rscId="__rwjs__Routes" rscProps={rscProps} />
<RscFetcher rscProps={rscProps} />
</AuthenticatedRoute>
</RouterContextProvider>
)
Expand All @@ -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> {
Expand Down
44 changes: 17 additions & 27 deletions packages/router/src/rsc/RscFetcher.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand All @@ -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)
Expand Down Expand Up @@ -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(() => {
Expand All @@ -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)
Expand Down

0 comments on commit 0f49c1e

Please sign in to comment.