Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option not to load on server #195

Closed
overlookmotel opened this issue Jan 7, 2019 · 5 comments
Closed

Option not to load on server #195

overlookmotel opened this issue Jan 7, 2019 · 5 comments

Comments

@overlookmotel
Copy link
Contributor

overlookmotel commented Jan 7, 2019

🚀 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?

@gregberge
Copy link
Owner

Hello @overlookmotel, thanks for providing it! I think this feature is great and must be part of loadable ecosystem.

I would be very happy to review your PR if you want to implement it. But can you please use ssr: false instead of ssr: true. It is preferable to avoid "noXX" for boolean, it is like a Yoda style. And for a bonus we will be compliant with next.

@overlookmotel
Copy link
Contributor Author

Hi @neoziro.

Thanks very much for swift reply and your willingness to entertain this.

I'm fine with ssr rather than noSsr. But that means the default is true. You OK with that? Some people also feel that's an anti-pattern.

@gregberge
Copy link
Owner

No it is OK, by default it will be true and we can set it to false if needed.

@overlookmotel
Copy link
Contributor Author

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
Copy link
Contributor Author

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!

fivethreeo pushed a commit to fivethreeo/loadable-components that referenced this issue Nov 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants