Dark Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Pass in a set of predefined chunk keys to enable streaming preload for known components #1015

Open
Open
Pass in a set of predefined chunk keys to enable streaming preload for known components#1015

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

${linkTags}` // Stream the head, ahead of the body so the preloads can start downloading stream.send(head) const body = chunkExtractor.collectChunks() // 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()}`), )">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 = `${linkTags}`

// 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()}`),
)

Pitch

Unlocks more complex rendering approaches to use preloading, that mix static/known and dynamic components.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions