Option not to load on server

🚀 Feature Proposal

An option called e.g. noSsr to prevent a loadable component being rendered to HTML on the server.

If option is set, the fallback will be rendered on the server and no chunk sent to ChunkExtractor. The client will then initially render the fallback and async load the component (same as if you weren’t using SSR at all).

Motivation

Often it’s useful to be able to server render only parts of the app, and leave completing the render to the client. This allows:

• Server render critical parts of the page only
• Reduce size of code client downloads before app is hydrated
• Reduce time to hydration on client

Example use cases:

• Server render only what’s critical for SEO
• Server render only content that’s “above the fold”
• Leave downloading of heavy components including large libraries to after hydration, so e.g. interactive menus requiring React at top of page start work faster without waiting for download of a mapping component lower down the page

Example

const OtherComponent = loadable(
  () => import('./OtherComponent'),
  { noSsr: true }
);

On server, this component would just render the fallback.

Pitch

In my opinion, this feature is pretty key to striking a nice balance between the pros and cons of SSR.

This kind of approach is likely to be easier with React’s forthcoming async renderer, so it’d be great to allow people to start working in this way before that drops.

As a bonus, I’m happy to implement it myself, and I don’t think it’d be very difficult!

If I worked up a PR, would you be likely to accept it?

[overlookmotel]

OK great. I’ve started work on this and it seems pretty simple, but still need to write tests. I’ll make a PR in a few weeks time.

[overlookmotel]

Hi @neoziro. Thanks for implementing this. I was working on it but been delayed by other work. Great that you’ve gone and done it!