npmpackage.info

gatsby-plugin-loadable-components-ssr

Gatsby plugin for using @loadable/component with Gatsby's SSR

4.3.2

JavaScript

129.00 B

Installations

npm install gatsby-plugin-loadable-components-ssr

Pull Requests

Open

12

Total

46

Closed

15

Merged

19

Issues

Open

3

Total

40

Closed

37

Releases

Updated dependencies

v2.1.0

Published on 15 May 2020

Renamed option renderFn to useHydrate

v2.0.0

Published on 03 Mar 2020

Added option to specify render function

v1.1.0

Published on 03 Mar 2020

Fixed error logged on console on develop

v1.0.8

Published on 03 Mar 2020

Fixed a bug that rendered all chunks on all the pages

v1.0.7

Published on 18 Dec 2019

v1.0.6

Published on 15 Dec 2019

View all 12 releases

Developer

graysonhicks

Developer Guide

BETA

Module System

Unable to determine the module system for this package.

Min. Node Version

>=12.0.0

Typescript Support

No

Node Version

18.4.0

NPM Version

8.12.1 Statistics

49 Stars

96 Commits

26 Forks

4 Watching

26 Branches

14 Contributors

Updated on 03 Jul 2023

Bundle Size

142.00 B

Minified

129.00 B

Minified + Gzipped

Bundlephobia

Languages

JavaScript (98.39%)

Shell (1.61%)

Total Downloads

Cumulative downloads

Total Downloads

4,694,485

Last day

1.4%

2,916

Compared to previous day

Last week

3.4%

14,994

Compared to previous week

Last month

4.8%

65,752

Compared to previous month

Last year

-27.8%

910,973

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Description

Server-side rendering loadable components in your gatsby application.

Installation

npm install --save gatsby-plugin-loadable-components-ssr @loadable/component

Latest version of this plugin for v2 Gatsby is 2.1.0

Latest version of this plugin for v3 Gatsby is 3.4.0

Problem

As described in the documentation a series of steps must be followed to implement server-side rendering in your app. However, it's not trivial to apply them to a gatsby application.

Solution

This plugin implements the steps described in the link above using gatsby's APIs, so you can use it only by adding gatsby-plugin-loadable-components-ssr in your list of gatsby plugins.

Usage

Simply add gatsby-plugin-loadable-components-ssr to the plugins array in gatsby-config.js.

1// gatsby-config.js
2
3module.exports = {
4  plugins: [
5    "gatsby-plugin-loadable-components-ssr",
6    // OR
7    {
8      resolve: `gatsby-plugin-loadable-components-ssr`,
9      options: {
10        // Whether replaceHydrateFunction should call ReactDOM.hydrate or ReactDOM.render
11        // Defaults to ReactDOM.render on develop and ReactDOM.hydrate on build
12        useHydrate: true,
13      },
14    },
15  ],
16}

Preloading chunks

By default, this plugin will create preload tags for the chunks it creates. This can cause overeaging fetching and inaccurate prioritizing of fetching of the chunks. You can disable this behavior with the preloadTags option. You can then use a more fine-grained approach with /* webpackPreload: true */ for known above-the-fold components like heros.

1  {
2      resolve: "gatsby-plugin-loadable-components-ssr",
3      options: {
4         preloadTags: false
5      },
6  }

React 18 and Gatsby 5 Support

Loadable does not seem to be planning support for React 18 and Gatsby v5 will require React 18. React 18 ships with React.lazy which performs the same code-splitting + SSR that we are accomplishing here. There are no plans to write compatibility for React 18 / Gatsby 5 with this plugin, so the migration path should be one to React.lazy. This should result in an overall simpler implementation, and should be considered a positive that this plugin will no longer be needed.

My gatsby-browser.js already implements replaceHydrateFunction API

This plugin uses replaceHydrateFunction API. If your application also implements this API (gatsby-browser.js) make sure you wrap your implementation with loadableReady(() => ...).

Before (from the example in here):

1// gatsby-browser.js
2
3exports.replaceHydrateFunction = () => {
4  return (element, container, callback) => {
5    ReactDOM.render(element, container, callback)
6  }
7}

After:

1// gatsby-browser.js
2
3const loadableReady = require("@loadable/component").loadableReady
4
5exports.replaceHydrateFunction = () => {
6  return (element, container, callback) => {
7    loadableReady(() => {
8      ReactDOM.render(element, container, callback)
9    })
10  }
11}

Note on Fully Dynamic Imports

While loadable does support fully dynamic imports (e.g. const MyDynamic = loadable(() => import(/components/${myComponentVar}))), the plugin currently loses the relationship between that chunk and the webpack mapping so it 404s. The workaround is here using a hardcoded 'map' component. This works well, but does not scale as well as fully dynamic as the number of components grows. There is not a plan to resolve this, as the hope is to deprecate this library when React 18 gets a stable release and you could use the React.lazy() pattern described here.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

41 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-c6f8-8r25-c4gc
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-54xq-cgqr-rpm3
Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

2.5

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to gatsby-plugin-loadable-components-ssr

react-loadable-ssr-addon-v5-slorber

1.0.1

Server Side Render add-on for React Loadable. Load splitted chunks was never that easy.

gatsby-plugin-styled-components

6.14.0

Gatsby plugin to add support for styled components

@netlify/plugin-gatsby

3.8.1

Netlify Build plugin - Run Gatsby seamlessly on Netlify

@loadable/babel-plugin

5.16.1

Babel plugin for loadable (required for SSR).

gatsby-plugin-loadable-components-ssr

Installations

Pull Requests

12

46

15

19

Issues

3

40

37

Releases

Developer

graysonhicks

Developer Guide

>=12.0.0

No

18.4.0

8.12.1

Statistics

Bundle Size

142.00 B

129.00 B

Languages

Total Downloads

4,694,485

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Description

Installation

Problem

Solution

Usage

Preloading chunks

React 18 and Gatsby 5 Support

My gatsby-browser.js already implements replaceHydrateFunction API

Note on Fully Dynamic Imports

10

10

3

1

0

0

0

0

0

0

0

0

0

2.5

/10

Other packages similar to gatsby-plugin-loadable-components-ssr