Rendering Strategies (prerender vs SSR vs CSR)

[thescientist13]

Summary

Coming out of #921 / #879, just wanted to track and make sure we are accurately accounting for the various cases of rendering and how / when to use them, and how we document them

Adding support for prerender in development would also be supper awesome here.

Details

At least break them down a bit clearer and when they happen, and what the JS output / delivery is

• SSG - run at build time - CDN
• SSR - run at request time - server, serverless
• CSR - run at run time, like a SPA
• prerender - CSR (or SSR) run JS once at build time, e.g. puppeteer (one time render)
  • however, also means "export" for SSR, so will need to disambiguate
  • export const prerender = true;
• export -> prerender SSR at build time to produce SSG (e.g. getStaticProps)
• csr = false instead of static optimization, but how in HTML? (custom <script setup> block?)
• move prerender configuration to be an optimization setting?

It should also cover how client side JavaScript plays a role, hydration, eager / lazy loading, etc.

Also, for instance using the GraphQL plugin requires needing to set prerender configuration to true as well as only working with the puppeteer rendering plugin? Should validate if this can work with WCC SSR too.

Maybe worth looking into along with #545

Also, need to handle globalThis as per ProjectEvergreen/wcc#100, and possibly refactoring / documenting using globalThis instead of window, like in the router.

[thescientist13]

Documenting as part of the new website - ProjectEvergreen/www.greenwoodjs.dev#117