0

In my web app I would like to render most of my content on the server and serve complete HTML. Also, I would like for each React component to fetch its own data. I don't like the Next.js' approach of "fetch the data for the whole page". React suspense seems to be a good tool for this but suspense is never resolved on the server. The best you can do with React 18 is to renderToPipeableStream but then the actual content is still being constructed on the client by injecting script tags. That's not what I want. I want plain old HTML generated on the server.

I am now using react-ssr-prepass which works fine with React 17 but it is not suited to React 18.

Is there some way to achieve this? It seems to me it would be quite common usecase.

lishaak
  • 416
  • 2
  • 11
  • "actual content is still being constructed on the client by injecting script tags" That's how incremental rendering is achieved (this improves TTFB, allowing the user to see a response faster). If you do not want to stream and instead block to send all HTML at once, you can simply prefetch all your data and wait for it to be ready in some external store like redux before you call renderToPipeableStream. This way when you render the application none of the pieces will suspend server side as they will already have a primed cache with the prefetch. I'm happy to provide more details – Nathaniel Tucker Jan 08 '23 at 15:11

1 Answers1

1

Check react-streaming. It's the only library that helps at the moment but it's still experimental

jaybe78
  • 363
  • 4
  • 18
  • Thank you! This is very interesting. I will experiment with it and see. Are you the author of this lib? – lishaak Jul 03 '22 at 05:52