Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

support prerender during development #1249

Open
thescientist13 opened this issue Jun 21, 2024 · 0 comments
Open

support prerender during development #1249

thescientist13 opened this issue Jun 21, 2024 · 0 comments
Labels
CLI documentation Greenwood specific docs enhancement Improve something existing (e.g. no docs, new APIs, etc) SSR
Milestone
1.0

Comments

@thescientist13
Copy link
Member

thescientist13 commented Jun 21, 2024 •
edited
Loading

Summary

While Greenwood supports prerendering pages at build time, for example, having a "client" side component like this

<! -- src/pages/index.html -->
<html>
  <head>
    <script type="module" src="./components/header.js"></script>
  </head>
  <body>
    <app-header></app-header>
</html>

This actually doesn't take place during development, so it is very common to see layout shifts and FOUC, as well as not having the same behavior during development and production! 🫨

Details

The main trick is what to do about the <script> tag in the head, because if you have a Light DOM component, e.g.

// src/components/header.js
export default class Header extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<h1>Welcome to my website!</h1>'
  }
}

customElements.define('x-header', Header);

if you don't "guard" it like you would with declarative shadow DOM, e.g.

```js export default class Header extends HTMLElement { connectedCallback() { if(this.innerHTML) return; 
this.innerHTML = '<h1>Welcome to my website!</h1>'

}
}

customElements.define('x-header', Header);


You'll see duplicate rendering.  

// TODO get a screenshot!  @thescientist13 

So maybe could we strip the `<script>` tag for them if they have added `data-gwd-opt="static"`, or maybe we can do something clever like this?

```js
'use static'

export default class Header extends HTMLElement {
  connectedCallback() {
    if(this.innerHTML) return;

    this.innerHTML = '<h1>Welcome to my website!</h1>'
  }
}

customElements.define('x-header', Header);
----

Coming out of #1212, we should see if any of these observations at the time can be handled as part of this work (without scope creeping too much 😅 )
- revisit `<!-- greenwood-ssr-start -->` implementation
- In `preRenderCompilationWorker` could we consolidate into ONE SSR call? (instead serve + execute-route-module)
    - would this tie into the Workers refactor discussion?
- Entire main logic of `bundleSsrPages` should probably happen _in_ the pool too?
@thescientist13 thescientist13 added enhancement Improve something existing (e.g. no docs, new APIs, etc) documentation Greenwood specific docs CLI SSR labels Jun 21, 2024
@thescientist13 thescientist13 added this to the 1.0 milestone Jun 21, 2024
@thescientist13 thescientist13 mentioned this issue Jun 21, 2024
Merged
20 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CLI documentation Greenwood specific docs enhancement Improve something existing (e.g. no docs, new APIs, etc) SSR
Projects
[Greenwood] Phase 10 - Burndown to 1.0
Status: 🔖 Ready
Milestone
1.0
Development

No branches or pull requests
1 participant
@thescientist13