Next.js App Router / React Server Components (RSCs) and RTK Query

[kcrwfrd]

I wanted to ask for some clarity on using RTK Query with React Server Components, specifically the Next.js app router.

From the docs on Redux Toolkit Setup with Next.js

We recommend using RTK Query for data fetching on the client only. Data fetching on the server should use fetch requests from async RSCs.

In the future, RTK Query may be able to receive data fetched on the server via React Server Components, but that is a future capability that will require changes to both React and RTK Query.

1. It would be nice to understand why RTK Query is advised for client-side fetches only. Is it because of the way Next.js patches fetch?
2. Can we not currently initialize our RTK Query caches with server-side data with something like the following?

// In our app/posts/page.ts RSC
export default async function PostsPage() {
  const posts = await getPosts()
 
  return <Posts initialPosts={posts} />
}

// In our Posts.tsx client component that can interact with the store
'use client'

import { useRef } from 'react'
import { apiSlice, useDispatch } from 'lib/store'

export const Posts = ({ initialPosts }) => {
  const dispatch = useDispatch()
  const initialized = useRef(false)
  
  if (!initialized.current) {
    dispatch(
      apiSlice.util.upsertQueryData('getPosts', undefined, initialPosts)
    )
    initialized.current = true
  }

  const { data: posts } = apiSlice.endpoints.getPosts.useQuery()
  
  return (
    posts.map(post => <Post post={post} />)
  )
}

[phryneas]

• there is no context in RSC, so your hooks won't work
• there is only a single render run in RSC and SSR, so you'd only render "loading" states
• there is no good way of transporting the data from RSC into SSR and then through the stream into the Browser without you writing a lot of injection code and modifying the way you structure your components

[phryneas]

So yes, you can probably do a manual approach as you are using here, but it requires quite a lot of work.
If we ship something as a library, we want to have some transparent way of doing this without you writing a lot of extra code. And right now, there's no good way for that yet. (React doesn't allow us to inject anything into the stream, so everything would need to manually be passed in props in many places.)