Netlify just announced built in support for server push. I think this could fit in really nicely with gatsby ecosystem as a plugin.
Here is the blog post: https://www.netlify.com/blog/2017/07/18/http/2-server-push-on-netlify/
It looks like the plugin just needs to create (or add to) a _headers file and generate the files to add to the push list.
What would be the crucial files to add to this list? Can / should we add all the files to this list?
I'm not familiar with the Gatsby 1.0 build system, but is this more complicated because of how the js files are built into chunks?
dardub
All 5 comments
This would be cool! I think a Netlify plugin would make a ton of sense. Both for this purpose but also to setup long-term caching for the static folder (where images and files from webpack go).
The critical files are everything that we're already preloading. See the static-entry.js file for how that'd work.
The plugin would just use https://www.gatsbyjs.org/docs/node-apis/#onPostBuild to write out the _headers file. You can get the page info there by using the Redux store that's passed to the first argument.
This would be a sweet! We'd be pretty much the first anything to support server push. I've wanted to do this for a while now. Would love to write a blog post with ya on this.
KyleAMathews
on 22 Jul 2017
I'd like to take this on鈥攖his provides immediate benefit for the bundles per page, and the common code across all pages.
I've been thinking about how to apply this in CSS land. With server push, it would usually be better to push rather than inline the "global" app styles on the HTML document (most browsers support it now). Global styles should be easy to extract into a separate file. Additionally, it would be great to have CSS cacheable _per page_ when not inlining. Unfortunately, CSS modules are not page specific鈥攃urrently the extract text plugin dumps in all the imported CSS across all pages. I think I have a solution, but would like to open a new issue to discuss separately.
@KyleAMathews is this a plugin you would like to officially support / add to this repo? Or should this be published separately?
pk-nb
on 11 Sep 2017
@pk-nb sweet!
Would want to have this plugin in this repo as we use Netlify a lot.
On CSS, would love to hear your thoughts but yeah this is a separate issue. I think for webpack 4 the plan is to have stronger primitives for splitting and loading css on demand.
FWIW, I've gone all in on css-in-js as it already is solving these issues of loading only critical CSS & splitting by page or bundle, etc.
KyleAMathews
on 11 Sep 2017
Apologies for being a bit slow taking this on鈥攇ot something together after small time commitments this week. Hope you can check out the PR when you have a chance!
pk-nb
on 18 Sep 2017
This was added I believe?
KyleAMathews
on 19 Dec 2017
Related issues
ghost
路
3Comments
rossPatton
路
3Comments
jimfilippou
路
3Comments
mikestopcontinues
路
3Comments
ferMartz
路
3Comments
Most helpful comment
This would be cool! I think a Netlify plugin would make a ton of sense. Both for this purpose but also to setup long-term caching for the static folder (where images and files from webpack go).
The critical files are everything that we're already preloading. See the
static-entry.jsfile for how that'd work.https://github.com/gatsbyjs/gatsby/blob/40120b0bc7d2619ea9794cd6a1545270c43e11b7/packages/gatsby/src/cache-dir/static-entry.js#L169
The plugin would just use https://www.gatsbyjs.org/docs/node-apis/#onPostBuild to write out the _headers file. You can get the page info there by using the Redux store that's passed to the first argument.
This would be a sweet! We'd be pretty much the first anything to support server push. I've wanted to do this for a while now. Would love to write a blog post with ya on this.