diff --git a/packages/next/build/webpack/loaders/next-middleware-ssr-loader/render.ts b/packages/next/build/webpack/loaders/next-middleware-ssr-loader/render.ts
index 70a3ae3596ef74e..78bb79ab5903cd2 100644
--- a/packages/next/build/webpack/loaders/next-middleware-ssr-loader/render.ts
+++ b/packages/next/build/webpack/loaders/next-middleware-ssr-loader/render.ts
@@ -45,7 +45,14 @@ export function getRender({
     const renderServerComponentData = isServerComponent
       ? query.__flight__ !== undefined
       : false
+
+    const serverComponentProps =
+      isServerComponent && query.__props__
+        ? JSON.parse(query.__props__)
+        : undefined
+
     delete query.__flight__
+    delete query.__props__
 
     const req = {
       url: pathname,
@@ -73,6 +80,7 @@ export function getRender({
       supportsDynamicHTML: true,
       concurrentFeatures: true,
       renderServerComponentData,
+      serverComponentProps,
       serverComponentManifest: isServerComponent ? rscManifest : null,
       ComponentMod: null,
     }
diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
index 625a5b16912e025..e7ab94e6b57a3eb 100644
--- a/packages/next/client/index.tsx
+++ b/packages/next/client/index.tsx
@@ -653,10 +653,13 @@ if (process.env.__NEXT_RSC) {
 
   const rscCache = createResponseCache()
 
-  function fetchFlight(href: string) {
+  function fetchFlight(href: string, props?: any) {
     const url = new URL(href, location.origin)
     const searchParams = url.searchParams
     searchParams.append('__flight__', '1')
+    if (props) {
+      searchParams.append('__props__', JSON.stringify(props))
+    }
     return fetch(url.toString())
   }
 
@@ -700,10 +703,10 @@ if (process.env.__NEXT_RSC) {
     const startTransition = React.startTransition
     const renrender = () => dispatch({})
     // If there is no cache, or there is serialized data already
-    function refreshCache() {
+    function refreshCache(nextProps: any) {
       startTransition(() => {
         const href = getHref()
-        const response = createFromFetch(fetchFlight(href))
+        const response = createFromFetch(fetchFlight(href, nextProps))
         // FIXME: router.asPath can be different from current location due to navigation
         rscCache.set(href, response)
         renrender()
diff --git a/packages/next/client/rsc.ts b/packages/next/client/rsc.ts
index c1158f5fbf9719b..262590160641001 100644
--- a/packages/next/client/rsc.ts
+++ b/packages/next/client/rsc.ts
@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 
-export const RefreshContext = createContext(() => {})
+export const RefreshContext = createContext((_: any) => {})
 
 export function unstable_useRefreshRoot() {
   // eslint-disable-next-line react-hooks/rules-of-hooks
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index 927e237a72a3a3b..56ae6780be9e312 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -209,6 +209,7 @@ export type RenderOptsPartial = {
   resolvedAsPath?: string
   serverComponentManifest?: any
   renderServerComponentData?: boolean
+  serverComponentProps?: any
   distDir?: string
   locale?: string
   locales?: string[]
@@ -356,6 +357,7 @@ export async function renderToHTML(
     getServerSideProps,
     serverComponentManifest,
     renderServerComponentData,
+    serverComponentProps,
     isDataReq,
     params,
     previewProps,
@@ -1004,7 +1006,7 @@ export async function renderToHTML(
 
   if (renderServerComponentData) {
     const stream: ReadableStream = renderToReadableStream(
-      <OriginalComponent {...props.pageProps} />,
+      <OriginalComponent {...props.pageProps} {...serverComponentProps} />,
       serverComponentManifest
     )
     const reader = stream.getReader()