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

dynamic runtime layouts for SSR #1248

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

dynamic runtime layouts for SSR #1248

thescientist13 opened this issue Jun 21, 2024 · 0 comments
Labels
CLI documentation Greenwood specific docs feature New feature or request SSR
Milestone
1.x

Comments

@thescientist13
Copy link
Member

thescientist13 commented Jun 21, 2024 •
edited
Loading

Summary

Coming out of #955 / #1212 , one follow up feature to track is supporting dynamic layouts during SSR. So while this has been possible

src/
  layouts/
    blog.js

The layout was executed only once at bundle time which means it was only a one time render.
https://github.com/ProjectEvergreen/greenwood/blob/v0.30.0-alpha.2/packages/cli/src/lifecycles/bundle.js#L243

Details

Our "Web Server Components" pattern combined with #882 would be useful for layouts that want to customize <head> tags from an external service, like a CMS for example.

export default class BlogLayout 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 { title } = post;

    this.innerHTML = `
      <head>
        <title>Greenwood - Blog: ${title}</title>
      </head>
    `;
  }
}

For compatible build outputs (greenwood serve, serverless adapters), the main trick is that I think this this will require bundling layouts into SSR pages like we do for the page itself. Not sure how tricky this will be though. 🤔

Additionally, would be nice to support dynamic context layouts too, as currently they are hardcoded to only support HTML.
https://github.com/ProjectEvergreen/greenwood/blob/v0.30.0-alpha.2/packages/cli/src/lib/templating-utils.js#L13
@thescientist13 thescientist13 added documentation Greenwood specific docs CLI SSR feature New feature or request labels Jun 21, 2024
@thescientist13 thescientist13 added this to the 1.x milestone Jun 21, 2024
@thescientist13 thescientist13 mentioned this issue Jun 21, 2024
Merged
20 tasks
@thescientist13 thescientist13 changed the title dynamic layouts for SSR dynamic runtime layouts for SSR Aug 30, 2024
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 feature New feature or request SSR
Projects
[Greenwood] Phase 11 - Burndown to 1.0
Status: 📋 Backlog
Milestone
1.x
Development

No branches or pull requests
1 participant
@thescientist13