Dedupe content in JavaScript

[thescientist13]

Type of Change

• New Feature Request
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

One concern with a pre-rendering approach is that even though the HTML is pre-generated, it often still ends up with an architecture that ships the same code via JavaScript as well.

If the project is generating static content it really shouldn't also be delivered via JavaScript too, ideally.

This should also be taken into context with #299 and #265

Details

For example, in our project, since all pages are generated by JavaScript, you'll see that even static the page content is in the index.js bundle.

        <h2>Community</h2>
<p>Greenwood understands the role of community in open source, technology, and learning and we want to embrace that in this project as well.  There are many great tools and projects available in the web ecosystem and we want to highlight those projects here, that have been important in the development of Greenwood (in no particular order).</p>
<ul>
<li><a href="https://webpack.js.org/"><strong>webpack</strong></a> (and friends) - Module bundler and powers the local development environment for Greenwood.</li>
<li><a href="https://github.com/GoogleChrome/puppeteer"><strong>puppeteer</strong></a> - Headless Chrome browser used for serializtion.</li>
<li><a href="https://github.com/hutchgrant/wc-markdown-loader/"><strong>WC Markdown Loader</strong></a> - A webpack plugin that transforms a markdown file into a Web Component! 🤯</li>
<li><a href="https://github.com/fernandopasik/lit-redux-router"><strong>LitReduxRouter</strong></a> - Declarative client side routing library.</li>
</ul>
<p>And of course we can't forget our <a href="https://github.com/ProjectEvergreen/greenwood/graphs/contributors">Contributors</a>!</p>
<p>So please come join our community and help us grow and advance the web together!  We can't wait to see what you come up with.  💡</p>

Wondering if there's anything about our implementation that should change re: pre-rendering vs SSG?

• A pretty interesting discussion from the React side of things here
• lit-html supporting SSR / lit-ssr?

[thescientist13]

Some interesting comments / links / resources on the subject

https://twitter.com/slightlylate/status/1240419628557283328

My best hope today is "RedactJS": go full-SSR, strip out all client-side JS from the payload, and then only re-add JS via module/no-module and web components (via Lit, Stencil, etc.) that are vended by a smaller group in the org:

---

https://twitter.com/slightlylate/status/1240376840788643840

My interest was piqued at Gatsby + "low-tech", but my affections were cemented with "no JavaScript".

---

https://www.gatsbyjs.org/packages/gatsby-plugin-no-javascript/

Removes all javascript files created by Gatsby from the static HTML files. This plugin is not meant to remove all javascript, but only the javascript that Gatsby is adding to the page.

[thescientist13]

An interesting Twitter thread on the topic, with some comments in regards to lit-html

edit: another one

[thescientist13]

More

• https://twitter.com/pierb/status/1252011416585998337
• https://twitter.com/mikesherov/status/1251868773616943105

[thescientist13]

If we "dedupe" content from JS, then in SPA mode wouldn't all the content be missing when routing? Will each page need to grab it's contents some other way, like we do with cache.json?

[thescientist13]

Some Gatsby docs on how they do it

• https://www.gatsbyjs.org/docs/react-hydration/
• https://www.gatsbyjs.org/docs/overview-of-the-gatsby-build-process/

[thescientist13]

More content to digest!

• https://ckeditor.com/blog/html-in-node-js/
• https://macwright.org/2020/05/10/spa-fatigue.html
• https://stenciljs.com/docs/static-site-generation

[thescientist13]

We are HTML first for all (markdown) content now as part of v0.10.0! 🎉