SSR and Serverless experiments [DO NOT MERGE]

[thescientist13]

Overview

Opening this for demonstration and discussion purposes and to flesh out ideas and architecture for implementing server side and serverless capabilities for Greenwood. The goal is to see what an implementation might look like, how it plays together with other parts of the system, and what implications there are that should be accounted for ahead of actually intending to submit a PR.

SSR

I think what's really cool about the possibilities here is how seamless it would be to run a hybrid application, such that you can have a set of static and dynamic pages and routes that can all share the same static resources, yet still feel like one app.

src/
  pages/
    about.md
    index.html
    contact.html
  routes/
    artists.js
    artist.js
  templates/
    app.html
    page.html
    product.html
  styles/
    theme.css
    artist.css
    main.css

In this way

• your landing / marketing "pages" can consist of static pages at build time (either as markdown or from a headless CMS)
• that can co-locate with "routes" that can be server rendered, but still re-use the same templating system

I tried to demonstrate that here in this PR with the "Artists" page, though obviously this will not work on Netlify, but you can try it locally!

Testing

To run this branch on a server

1. Spin up a server, like an EC2 instance
2. git clone the repo and checkout this branch
3. Run yarn install
4. Run yarn serve

From your public IP (make sure to open up port 8080 through your SGs, etc)

• http://x.x.x.x:8080/
• http://x.x.x.x:8080/artists

Live Demos (make sure I've started the server first!)

• http://184.73.61.125:8080/
• http://184.73.61.125:8080/artists/
• http://184.73.61.125:8181/ (https://github.com/thescientist13/lit-ssr-demo)

Caveats

• Wasn't able to get Chromium working on an EC2 instance, had to set prerender config setting to false
• Seems un related to SSR, but looks like styles are broken when setting prerender to false - see setting prerender: false and optimization: inline leads to broken and missing styles #810

Serverless

Since there are typically size constraints related to running serverless, for this reason, to limit size, it may be advisable to:

• Do this in a standalone repo
• Manually delete puppeteer from node_modules

Testing

1. Create a directory and run npx @greenwood/init --install
2. cd into that directory and delete puppeteer from node_modules
3. From this PR, copy the contents of the following files from packages/cli/ in your own local node_modules/@greenwood/cli/ directory
   • index.js
   • src/plugins/resource/plugin-standard-html.js
   • src/commands/serve.js
   • src/lifecycles/config.js
   • src/lifecycles/context.js
   • src/lifecycles/serve.js
   • src/plugins/resource/plugin-standard-html.js
4. Copy / paste in index.js as the Lambda handler

Or you can clone this reference repo.

Workflow

1. To test locally, uncomment the run() function in index.js and then run node ./index.js
2. To create an upload for Lamda by creaunge a zip file

   $ zip -r upload.zip . -x ".git/*"

3. Or bundle using Rollup by running yarn dist
4. Upload this to your cloud hosting and invoke the function

Live Demos

• Greenwood + SSR (Artists list) - https://jli1ix2q83.execute-api.us-east-1.amazonaws.com/prod/
• Declarative Shadow DOM - https://57xdk1noff.execute-api.us-east-1.amazonaws.com/prod/
• Lit+SSR - https://v8ddb2guie.execute-api.us-east-1.amazonaws.com/prod/

For testing, I used AWS Lambda + API Gateway.

Caveats

• Most providers don't support ESM functions (AWS, and by proxy Netlify) though it does support Node v14
  • Netlify and Vercel lambda functions expect CJS, not ESM sveltejs/kit#400
  • Publish native es modules aws/aws-sdk-js#1766 (comment)
  • https://answers.netlify.com/t/lambda-function-es-module-support/30673/15
• Some "complaints" / warnings about certain platform APIs?
  

Notes / Takeaways

1. Noticed that ESM has a caching mechanism of modules which is something to be mindful of for development
   • Invalidate cache when using import nodejs/node#49442
   • Require cache equivalent in es modules nodejs/help#2806
2. With routes, we'll want to investigate what a hydration strategy could look like for more idiomatic SSR solutions like Lit
3. We will need to open up the ability for users to set ports, not just for the dev server
4. I think we should rethink the mode config option, and remove it entirely? I would like to implement "progressive configuration" such that if we see a user has pages and / or routes, or just an index.html, we can handle that without needing to have it configured by the user. I think this is because now we really have a hybrid situation and it should be easy for users to static and add / go dynamic, would be sweet. Instead, we turn mpa mode into a staticRouter config such that if users want this static route (since it's not designed for SPA) they can use that instead.
5. We really need to make puppeteer optional i think, and potentially have prerender off by default. The website builds sooooo much faster without it, so it is definitely probably better for us to not force that long time as default, especially if you really just want a static site.

Open Items

1. Properly encode Lambda response (remove escaping and line breaks from the response) - this resource helped a lot!
2. Bundling (rollup) routes (SSR)
3. Prerendering (puppeteer) routes (SSR)
4. Bikeshed on serverless API
5. Handle dynamic routes, e.g. /artist/:id
6. Draft issue for no mode
7. Draft issue for optional puppeteer

[thescientist13]

One good point that was brought up during the call was that we could this getMetadata function to provide more hints to Greenwood such that even if routes exist in the project, but the user still wants to statically export them (so no server at runtime) we could definitely handle this:

async function getMetadata() {
  return {
    staticExport: true
  }
}

This would provide NextJS like behavior in that you can author purely dynamic content at build time but still reuse your templates / components / styles, and get a completely static artifact just as if it was in the pages/ directory. 📦 🙌

[thescientist13]

Interesting thread that could help us with designing an entry file that is both main and bin when working in ESM - nodejs/node#49440

[thescientist13]

Maybe this would be helpful for detecting if run from JS or run from the CLI; import.meta.main - https://github.com/nodejs/modules/issues/274#issuecomment-1302971322

[thescientist13]

Serverless support released as part of v0.29.0! 🚀