TechQA.

SSR in React18 using renderToPipableStream - Server Generated HTML and Client Side HTML file UI are not matching

809 views Asked by At

I was trying to make Server Side Rendering using Node,Express and React18 feature. The method I used was with renderToPipeableStream and not with renderToString.

Link for the CODE -

  1. GITHUB : https://github.com/ranjanrnj44/react-ssr/tree/master
  2. CODESANDBX : https://codesandbox.io/s/react-ssr-9x9ohn

NOTE :

  1. Please Download the code and run from the local machine. I have provided package.json file to install all the dependencies
  2. for now, on any code changes in server side I'm generating a build file (please look package.json under scripts line 25 and 28)
  3. after changes on server.js please try running npm run bild followed by npm run ssr(now you will notice app is running on localhost:3001/one)

ISSUE :

  • I get message like Hydration failed because the initial UI does not match what was rendered on the server.
  • The server generated HTML file is not with whole part that includes (html,head,meta,body tags).
  • In renderToString method we can use replace method to inject the data but here, I'm streaming html(stream- nodejs part)
  • I couldn't inject the chunk of data between the root file (i.e ideally <div id="root"> <!-received chunk data should inject here-></div> )

WHAT I TRIED :

  1. I tried sending hard-coded split method and inject the response (Unfortunately I got [object][Object] error).
  2. Also tried serving whole raw content with response to stream.pipe(). It doesn't work.

Please provide me the solution to match the Server generated HTML and Client side HTML so that I can hydrate the UI.

javascript node.js reactjs react-18 react-ssr
Original Q&A
1

There are 1 answers

0
Heil Programmierung On

The thing is, when you're working with react streaming, there's no real way to inject something in it.

The solution would be to provide your own Document component like in Next.js.

const Document = ({ title, js, css, children }) => {
  return (
    <html>
      <head>
        <meta charSet="utf-8" />
        <title>{title}</title>
        {js.map((src, i) => (
          <script key={i} src={src} defer />
        ))}
        {css.map((src, i) => (
          <link key={i} href={src} rel="stylesheet" />
        ))}
      </head>
      <body>
        <div id="root">{children}</div>
      </body>
    </html>
  );
};

Related Questions in JAVASCRIPT

Related Questions in NODE.JS

Related Questions in REACTJS

Related Questions in REACT-18

Related Questions in REACT-SSR

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions