feat: implement SSR to web components

[aralroca]

Fixes #13

SSR to web components (server components from the very beginning of Brisa have always been SSRs)

The idea is that without JavaScript the web components are still displayed. To do this we have used the Declarative Shadow DOM. This also avoids the possible FOUC when loading the components. However, the SSR can be disabled even by default in some cases.

with / without JavaScript on the client:

The good thing is that it has been possible to reuse the render to readable stream made by the server components, since the idea is that the server components are physically the same as the web components. This makes that the server does not have knowledge of the signals nor of the DOM, the server is dumb and does not need any DOM parser to do it, with the function of renderToReadableStream is enough, and the good thing is that it also works with streaming.

After this PR📝: we can do another topic which is to decide when to hydrate, and it can be done also by a similar prop to ssr, hydrateMode for example, or something like that. The default is eager, but there are other options like lazy or visible in case you want to load the JS code only once when the component is in the viewport.

@amatiasq @danielart I mention you in the PR in case you want to be updated on what is being done and if you want to give your feedback. I don't expect you to review the PR as there is a lot of code and you are out of context, but any feedback will be welcome.

---

Docs:

Server Side Rendering

By default Brisa applies Server Side Rendering (SSR) of the web components, this means that they are executed both on the server and then on the client during hydration. To do this we use the Declarative Shadow DOM below.

Within the Web Component the only ones that do not run on the server are:

• effect - Effects such as side-effects that can be used to interact with the Web API are not executed during the SSR.
• onMount - The components are mounted on the client once the browser receives the HTML (even if it does not have JavaScript), so it does not make sense to run this function on the server. When the component is hydrated on the client then this function is executed, only once, on the client.
• cleanup - Similar to onMount, if they are not mounted on the server, they are not unmounted on the server either. All cleanup functions are only executed on the client.
• Events - Since the events are executed after a user (client) action, they are not executed during the SSR.

How to disable SSR to a web component

There are cases where we can avoid the SSR of some web component. It makes sense for these web components that are not available in the initial rendered page, for example they appear after some web interaction, such as a modal.

To do this, all web components have available the ssr attribute. It's true by default (this attribute does not need to be used when it is true), but you can use it to turn to false. This can be used in any web-component, either consumed from another web-component or from a server component.

<some-web-component ssr={false} />