Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Sep 1, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading