Rfc/issue 952 data loading strategies #1157

thescientist13 · 2023-10-01T00:52:50Z

Related Issue

resolves #952

Summary of Changes

Add ~~async loader function~~ constructor props for SSR pages request time data (aka getServerSideProps)
(breaking) Refactor / rename getFrontmatter.static -> export const prerender = true (aka getStaticProps)
- this aligns with greenwood.config.js and Rendering Strategies (prerender vs SSR vs CSR) #951
Added documentation for ~~loader~~ Web Server Components (WSCs) and export const prerender
(breaking) Refactor plugin-graphql
- Closer ESM compat (now no more need for Rollup aliases)
- Document / validate prerender: true / custom imports alternative to Puppeteer
Upgrade wcc@0.9.0

TODO

equivalent for getStaticPaths - I think this depends on landing Server side routes should support dynamic route naming (with prerendering) #882 , so will need to track there instead
Adopt non-loader implementation of data fetching
Align Greenwood and WCC on data loading behavior - feature/issue 119 constructor props wcc#120
Need to do anything for adapters?
address PR feedback

Thoughts / Questions

loaders pattern vs RSC flavor page components? - https://github.com/ProjectEvergreen/greenwood/pull/1157/files#r1349748857
GraphQL thoughts - should we keep it?
- can we prerender without puppeteer? - prototyping SSR GraphQL with prerendering and WCC www.greenwoodjs.dev#1
- internal vs external data sources - https://www.greenwoodjs.io/docs/data/
- How to handle data from the client (eg website header + GraphQL - inline ??) vs SSR. Can SSR now just use "real" Apollo client
- revisit all currently open "Data" issues - https://github.com/ProjectEvergreen/greenwood/issues?q=is%3Aopen+is%3Aissue+label%3AData
Graph refactoring (or own issue?) - Content as Data #1167
- rename imports field to resources in frontmatter for graph
- Change graph.json from path -> url (instance of URL)
- Make graph an actual graph (edges + nodes). What's the best data structure for this? Otherwise should we not call it a graph.json?
- How to vanilla fetch the graph without GraphQL? Come in as compilation props?
~~Rethink SSR pages API (getFrontmatter, getTemplates, getBody, etc)~~ - will save this for Layouts (Templates) and Pages #955
~~context plugins as part of SSR (for pages and templates work?)~~ - tracking in Layouts (Templates) and Pages #955
refactor context, move all things into manifest.json - tracking in Layouts (Templates) and Pages #955
Deprecate Custom Elements flavor of Include Plugin? - made a note of this to revisit this

thescientist13 · 2023-10-08T17:17:47Z

packages/cli/test/cases/develop.ssr/src/pages/post.js

+  }
+}
+
+export async function loader(request) {


Another thought here is to just lean into the class based paradigm instead of creating a custom API, e.g. loaders. So basically something like this, wherein the request comes through the constructor instead, any synchronous operations are done there, and let all the async work happen in connectedCallback

export default class PostPage extends HTMLElement { constructor(request) { super(); const params = new URLSearchParams(request.url.slice(request.url.indexOf('?'))); this.postId = params.get('id'); } async connectedCallback() { const { postId } = this; const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then(resp => resp.json()); const { id, title, body } = post; this.innerHTML = ` <h1>Fetched Post ID: ${id}</h1> <h2>${title}</h2> <p>${body}</p> `; } }

We can even call them WSCs (Web Server Components) ™️ 🤠

Per the last Greenwood weekly meeting, a good suggestion was made that the default behavior could be done as in the snippet above, and that possibly with #880, for users that want to opt-in to hydration, that mechanism could be to export a loader function.

This would have a few benefits:

It helps draw a line between a basic component definition, and a custom bespoke API

For hydration, we need to know the props. Having a loader function allows us to serialize the props for further hydration at runtime.

Perhaps to tie it all in together, we can leverage apply isomorphic standards to userland libraries and plugins (globalThis) #1005 ?

thescientist13 · 2023-10-14T21:19:39Z

www/pages/docs/server-rendering.md

-> _**Note**: Keep in mind that for these "page" components, you will likely want to _avoid_ Declarative Shadow for rendering the top level (to avoid wrapping static content in `<template>` tags), but definitely use Declarative Shadow DOM within any dependent custom elements of your page._
+A couple of notes:
+- WSCs run only on the server, thus you have full access to any APIs of the runtime, with the ability to perform one time `async` operations for [data loading](/docs/server-rendering/#data-loading) in `connectedCallback`.
+- In the above example, card.js will automatically be bundled for you on the client side!


Hmm... goes Greenwood actually do this? 🤔

I feel like yes, but in reality I don't think I've observed it? Can't say I've directly looked for it since I didn't think it was actually a feature 😅

thescientist13 · 2023-10-15T03:27:15Z

packages/cli/src/lifecycles/serve.js

@@ -293,9 +293,9 @@ async function getHybridServer(compilation) {
      const isApiRoute = manifest.apis.has(url.pathname);
      const request = transformKoaRequestIntoStandardRequest(url, ctx.request);

-      if (!config.prerender && matchingRoute.isSSR && !matchingRoute.data.static) {
+      if (!config.prerender && matchingRoute.isSSR && !matchingRoute.prerender) {
+        console.log('MATCHING ROUTE -> ', matchingRoute.filename);


Need to delete this console line

thescientist13 · 2023-10-15T03:34:20Z

packages/plugin-graphql/README.md

@@ -1,23 +1,15 @@
 # @greenwood/plugin-graphql

 ## Overview
-A plugin for Greenwood to support using [GraphQL](https://graphql.org/) to query Greenwood's content graph.  It runs [**apollo-server**](https://www.apollographql.com/docs/apollo-server/) on the backend and provides an [**@apollo/client** _"like"_](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.readQuery) interface for the frontend that you can use.
+A plugin for Greenwood to support using [GraphQL](https://graphql.org/) to query Greenwood's [content graph](https://www.greenwoodjs.io/docs/data/) with our optoinal [pre-made queries](https://www.greenwoodjs.io/docs/menus/).  It runs [**apollo-server**](https://www.apollographql.com/docs/apollo-server/) on the backend at build time and provides a **"read-only"** [**@apollo/client** _"like"_](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.readQuery) interface for the frontend that you can use.


Spelling mistake here on optional

thescientist13 · 2023-10-15T03:34:59Z

packages/plugin-graphql/README.md

@@ -1,23 +1,15 @@
 # @greenwood/plugin-graphql

 ## Overview
-A plugin for Greenwood to support using [GraphQL](https://graphql.org/) to query Greenwood's content graph.  It runs [**apollo-server**](https://www.apollographql.com/docs/apollo-server/) on the backend and provides an [**@apollo/client** _"like"_](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.readQuery) interface for the frontend that you can use.
+A plugin for Greenwood to support using [GraphQL](https://graphql.org/) to query Greenwood's [content graph](https://www.greenwoodjs.io/docs/data/) with our optoinal [pre-made queries](https://www.greenwoodjs.io/docs/menus/).  It runs [**apollo-server**](https://www.apollographql.com/docs/apollo-server/) on the backend at build time and provides a **"read-only"** [**@apollo/client** _"like"_](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.readQuery) interface for the frontend that you can use.


Also a little funky grammar here at the end of the last sentence.

thescientist13 · 2023-10-15T03:36:37Z

packages/plugin-graphql/README.md

-
-> _We are working on re-evaluating and improving our [data loading](https://github.com/ProjectEvergreen/greenwood/issues/952) and [rendering strategies](https://github.com/ProjectEvergreen/greenwood/issues/951) as part of our [1.0 release](https://github.com/ProjectEvergreen/greenwood/milestone/3)._
+As of now, this plugin requires some form of [prerendering](https://www.greenwoodjs.io/docs/server-rendering/#render-vs-prerender) either through:
+1. Enabling [custom imports](https://www.greenwoodjs.io/docs/server-rendering/#custom-imports)


Clarify that custom imports is related to SSR

* add support for SSR page loader with runtime request object * refactor static export from getFrontmatter to export const prerender * document loaders and prerendering for SSR routes * adopt and document constructor props pattern for SSR page data loading * update develop SSR test case for constructor props * remove desribe.only * refactor graphql plugin for ESM compat * add test case for experimental prerendering with custom .gql imports * upgrade website for breaking changes * update website documentation and graphql plugin package README * add test cases for adapter plugins and SSR constructor props * upgrade wcc to 0.9.0 * misc PR cleanup

thescientist13 added RFC Proposal and changes to workflows, architecture, APIs, etc documentation Greenwood specific docs CLI breaking SSR feature New feature or request labels Oct 1, 2023

thescientist13 linked an issue Oct 7, 2023 that may be closed by this pull request

Data Loading Strategies #952

Closed

thescientist13 added the Content as Data label Oct 8, 2023

thescientist13 commented Oct 8, 2023

View reviewed changes

thescientist13 added the discussion tied to an ongoing discussion or meeting notes label Oct 8, 2023

thescientist13 force-pushed the rfc/issue-952-data-loading-strategies branch from b68732c to e258bdd Compare October 14, 2023 18:50

thescientist13 mentioned this pull request Oct 14, 2023

provide component data through render method params (constructor props) ProjectEvergreen/wcc#119

Closed

thescientist13 self-assigned this Oct 14, 2023

thescientist13 added the needs upstream label Oct 14, 2023

thescientist13 commented Oct 14, 2023

View reviewed changes

thescientist13 mentioned this pull request Oct 14, 2023

prototyping SSR GraphQL with prerendering and WCC ProjectEvergreen/www.greenwoodjs.dev#1

Closed

3 tasks

thescientist13 added the Plugins Greenwood Plugins label Oct 15, 2023

thescientist13 commented Oct 15, 2023

View reviewed changes

thescientist13 marked this pull request as ready for review October 17, 2023 01:48

thescientist13 mentioned this pull request Oct 18, 2023

docs/document Lit SSR caveats in Lit renderer plugin #1170

Merged

thescientist13 added the dependencies Pull requests that update a dependency file label Oct 28, 2023

thescientist13 added 9 commits October 27, 2023 21:07

add support for SSR page loader with runtime request object

948bdfb

refactor static export from getFrontmatter to export const prerender

50cc7d4

document loaders and prerendering for SSR routes

b829ac7

adopt and document constructor props pattern for SSR page data loading

810fcc2

update develop SSR test case for constructor props

8a0c67c

remove desribe.only

09b5df2

refactor graphql plugin for ESM compat

c21bacb

add test case for experimental prerendering with custom .gql imports

f01a6c3

upgrade website for breaking changes

b4472d0

thescientist13 added 3 commits October 27, 2023 21:07

update website documentation and graphql plugin package README

6fce8fc

add test cases for adapter plugins and SSR constructor props

a51abee

upgrade wcc to 0.9.0

806e9e9

thescientist13 force-pushed the rfc/issue-952-data-loading-strategies branch from 4ebfb81 to 806e9e9 Compare October 28, 2023 01:13

misc PR cleanup

c7edc08

thescientist13 merged commit 34156fc into release/0.29.0 Oct 31, 2023
7 checks passed

thescientist13 deleted the rfc/issue-952-data-loading-strategies branch October 31, 2023 00:37

thescientist13 mentioned this pull request Nov 4, 2023

add full client API support for Apollo client in plugin-graphql (as ESM) #535

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rfc/issue 952 data loading strategies #1157

Rfc/issue 952 data loading strategies #1157

thescientist13 commented Oct 1, 2023 •

edited

Loading

thescientist13 Oct 8, 2023 •

edited

Loading

thescientist13 Oct 14, 2023 •

edited

Loading

thescientist13 Oct 14, 2023

thescientist13 Oct 15, 2023

thescientist13 Oct 15, 2023

thescientist13 Oct 15, 2023

thescientist13 Oct 15, 2023

Rfc/issue 952 data loading strategies #1157

Rfc/issue 952 data loading strategies #1157

Conversation

thescientist13 commented Oct 1, 2023 • edited Loading

Related Issue

Summary of Changes

TODO

Thoughts / Questions

thescientist13 Oct 8, 2023 • edited Loading

Choose a reason for hiding this comment

thescientist13 Oct 14, 2023 • edited Loading

Choose a reason for hiding this comment

thescientist13 Oct 14, 2023

Choose a reason for hiding this comment

thescientist13 Oct 15, 2023

Choose a reason for hiding this comment

thescientist13 Oct 15, 2023

Choose a reason for hiding this comment

thescientist13 Oct 15, 2023

Choose a reason for hiding this comment

thescientist13 Oct 15, 2023

Choose a reason for hiding this comment

thescientist13 commented Oct 1, 2023 •

edited

Loading

thescientist13 Oct 8, 2023 •

edited

Loading

thescientist13 Oct 14, 2023 •

edited

Loading