Open
Description
🚀 Feature Proposal
Enable streaming preloads for known components in a dynamic server rendering approach, by passing in a set of predefined chunk names to the ChunkExtractor.
Motivation
At my company we use a templating approach, where the template informs the app what components should be rendered.
Since we know ahead of render what is going to be included, we want to be able to provide that set of chunk names to ChunkExtractor, so that we can ask ChunkExtractor to generate the preload links for that set, server side with streaming enabled.
Example
import { ChunkExtractor } from '@loadable/server'
// This is the stats file generated by webpack loadable plugin
const statsFile = path.resolve('../dist/loadable-stats.json')
// We'd fetch the template server side before rendering the app and extract the component keys
const templateKeys = ['key1', 'key2', ...]
// We create an extractor from the statsFile and pass in the known component chunk names
const extractor = new ChunkExtractor({ statsFile, predefinedChunkNames: templateKeys })
// Get the preload links for the known components
const linkTags = extractor.getPredefinedLinkTags()
const stream = SomeSteam
const head = `<html><head>${linkTags}</head><body>`
// Stream the head, ahead of the body so the preloads can start downloading
stream.send(head)
const body = chunkExtractor.collectChunks(<YourApp />)
// you'd then pipe the stream into the response object until it's done
// This takes a while with SSR data fetching etc, so the preloads will help things run in parallel a bit more
renderToNodeStream(body).pipe(stream, { end: false })
// and finalize the response with closing HTML
stream.on('end', () =>
res.end(`${chunkExtractor.getScriptTags()}</body></html>`),
)Pitch
Unlocks more complex rendering approaches to use preloading, that mix static/known and dynamic components.
Metadata
Metadata
Assignees
Labels
No labels