We would want to make sure we could compliment this with the ability to "customize" the response, in addition the already provided HTML. This would be useful for pages, especially in the case of response headers, for setting things like:
Cookies (e.g. Set-Cookie)
Cache Headers
Custom Headers
In addition, being able to customize constructor props would be nice, to encompass all that data fetching / massaging outside of the component definition, where things could awkward within the limitation of a synchronous constructor and could make unit testing easier through dependency injection.
Details
As seen in #880, I think a custom "loader" function could be used for a double-purpose here, in that the loader function can be a mechanic for hydration, in that the user can return some JSON serialiaziable data, and we can inline that into the HTML of the page as well as pass it in as a custom constructor prop.
export default class PostPage extends HTMLElement {
constructor({ post }) {
super();
this.post = post;
}
async connectedCallback() {
const { id, title, body } = this.post;
this.innerHTML = `
<h1>Fetched Post ID: ${id}</h1>
<h2>${title}</h2>
<p>${body}</p>
`;
}
}
export async function loader(request) {
const params = new URLSearchParams(request.url.slice(request.url.indexOf('?')));
const postId = params.get('id');
const post = await fetch(`https://example.com/posts/${postId}`).then(resp => resp.json());
return { post };
}
From there, perhaps we can also define an instance of Response to be returned, and then we can just extract / merge everything but the body, so that something like this could be possible?
export async function loader(request) {
const params = new URLSearchParams(request.url.slice(request.url.indexOf('?')));
const postId = params.get('id');
const post = await fetch(`https://example.com/posts/${postId}`).then(resp => resp.json());
return {
props: { post },
response: new Response('', {
headers: new Headers({
'Cache-Control': 'max-age=604800'
})
})
};
}
I'm not quite sure how to reconcile this with #880 where all we care about is the custom prop, so not sure we can get this all from a Response, or maybe we can just pass in a mutable reference to the response being managed by Greenwood? 🤔
export async function loader(request, response) {
const params = new URLSearchParams(request.url.slice(request.url.indexOf('?')));
const postId = params.get('id');
const post = await fetch(`https://example.com/posts/${postId}`).then(resp => resp.json());
response.headers.set( 'Cache-Control', 'max-age=604800');
return { post },
}
Summary
Coming out of #952 , where in we introduced Web Server Components, that took in an instance of
Request
as a constructor propWe would want to make sure we could compliment this with the ability to "customize" the response, in addition the already provided HTML. This would be useful for pages, especially in the case of response headers, for setting things like:
Set-Cookie
)In addition, being able to customize constructor props would be nice, to encompass all that data fetching / massaging outside of the component definition, where things could awkward within the limitation of a synchronous constructor and could make unit testing easier through dependency injection.
Details
As seen in #880, I think a custom "loader" function could be used for a double-purpose here, in that the
loader
function can be a mechanic for hydration, in that the user can return some JSON serialiaziable data, and we can inline that into the HTML of the page as well as pass it in as a custom constructor prop.From there, perhaps we can also define an instance of
Response
to be returned, and then we can just extract / merge everything but the body, so that something like this could be possible?I'm not quite sure how to reconcile this with #880 where all we care about is the custom prop, so not sure we can get this all from a
Response
, or maybe we can just pass in a mutable reference to theresponse
being managed by Greenwood? 🤔The pilot for this can be Lit's SSR hydration support added in https://github.com/ProjectEvergreen/greenwood/pull/1201