Support for React's renderToPipeableStream function
#10602
Replies: 1 comment 10 replies
-
|
I've been able to get a working implementation of react router with deferred data loaders using a streaming render and suspense. https://gist.github.com/thomaswelton/e135d2fcf8ee9cce031b3c82d8daa5d9 There should only be two steps
|
Beta Was this translation helpful? Give feedback.
-
|
@thomaswelton i tried following your guidelines, but i am obviously missing the createFetchRequest function somehow. if you could provide a small little snippet, oh great one, descent upon this world scarce of resources, for small fracture of your love. |
Beta Was this translation helpful? Give feedback.
-
|
figured it out: import type { Request } from 'express';
export const createFetchHeaders = (requestHeaders?: Request['headers']): Headers => {
const headers = new Headers()
for (const [key, values] of Object.entries(requestHeaders ?? {})) {
if (values) {
if (Array.isArray(values)) {
for (const value of values) {
headers.append(key, value)
}
} else {
headers.set(key, values)
}
}
}
return headers
}
export const createFetchRequest = (req: Request): globalThis.Request => {
const origin = `${req.protocol}://${req.get('host')}`
const url = new URL(req.originalUrl || req.url, origin)
const controller = new AbortController()
req.on('close', () => {
controller.abort()
})
const init: RequestInit = {
method: req.method,
headers: createFetchHeaders(req.headers),
signal: controller.signal
}
if (req.method !== 'GET' && req.method !== 'HEAD') {
init.body = req.body
}
return new Request(url.href, init)
} |
Beta Was this translation helpful? Give feedback.
-
|
@brophdawg11 the primary reason stopping me from migrating my app to Remix is the fact that another service is sitting in front of my app, and uses HTML comments from my app to insert its own markup, which gets erased upon React hydration. Remix is intended to render entire documents, unless there's a workaround to only render it in part of an HTML template? Until I discover an alternative, I'm using React Router to render a piece of my app into a The secondary reason is waiting for Vite support to stabilize, I need Vite's Public Base Path feature because my app is on a subpath, and that feature solves my problem perfectly. |
Beta Was this translation helpful? Give feedback.
-
|
You can choose to render remix as only a portion of the document but you will give up
I don't think this will nicely with streaming features though. It sounds very error-prone to have react streaming HTML chunks via Suspense along with another downstream apps messing with the HTML. I would just avoid Vite |
Beta Was this translation helpful? Give feedback.
-
|
It felt scary not having Meta and Links because I thought it might screw up Vite or some other important feature, but I assume that Vite's asset insertion is operating outside of those tags. Thanks for the encouragement and instructions, I'll definitely give it a shot! ❤️ And for the streaming tip, I don't need it and I want to switch over regardless of being able to stream or not. Regarding the base path, I assume that the asset path of the feature can be offloaded to Vite, so I'll wait for stable Vite plugin support before trying out Remix. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I would like my SSR React application to take advantage of suspension using the
renderToPipeableStreambut it doesn't seem like this library has support for the streaming of HTML and only supportsrenderToStringBeta Was this translation helpful? Give feedback.
All reactions