[React 19] Hydration appending RSC component to body

[mayansharma]

Summary

Consuming RSC payload in a component using createFromFetch causing the response to get appended in the DOM instead of replacing if not wrapped with Suspense

const RouteWrapper = () => {
  const location = useLocation();
  const [rscContent, setRscContent] = useState(null);

  useEffect(() => {
    const content = createFromFetch(
      fetch("/rsc?location=" + location.pathname),
      {
        callServer,
      }
    );
    setRscContent(content);
  }, [location.pathname]);

  return rscContent
};

Link to repositories

1. Hydration appending RSC response to body - https://github.com/tata1mg/catalyst-core/tree/hydration-error
2. Hydration causing mismatch - https://github.com/tata1mg/catalyst-core/tree/rsc-demo-routing

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[Gautammangesh]

import React, { Suspense, useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { createFromFetch } from 'react-server-dom-webpack';

const RouteWrapper = () => {
const location = useLocation();
const [rscContent, setRscContent] = useState(null);

useEffect(() => {
const content = createFromFetch(
fetch(/rsc?location=${location.pathname}),
{
callServer,
}
);
setRscContent(content);
}, [location.pathname]);

return (
<Suspense fallback={

Loading...

}>
{rscContent}

);
};

export default RouteWrapper;

[Gautammangesh]

try this one

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!