Server Side Rendering

[felixroos]

Feature request summary

It would be good if swirl components supported Server Side Rendering (SSR), to reduce loading times.
As most of the components are static, it does not make a lot of sense to render them on the client when using SSR anyway.

Rationale

As of now, these components cannot be rendered on the server. (At least I haven't found a way to do that). This leads to huge JS bundles being shipped to the client. I made a little test to confirm that. Here is a screenshot of the Network tab when just using one SwirlButton:

If the SwirlButton is removed, the network tab looks like this:

If react is used without swirl on the client, it looks like this:

So above the ~100kB of react, swirl adds another ~150kB for components that are mostly static.

It seems to be possible to export Stencil components for SSR, see https://stenciljs.com/docs/hydrate-app

For static views, this could save ~250kB, which is quite significant on slower networks (>1s on 3g).
For dynamic views, it would still save ~150kB (>600ms on 3g).

edit: The above screenshots are from an astro build (SSR mode), but I also got similar results using Next.js earlier

[Sqrrl]

We are already experimenting with SSR and SSG (Next.js) internally. We could add the dist-hydrate-script output target as a first step, if that helps.

I'm however confused by the high initial JS load in your example. How are you importing the library? It should not be necessary to load the entire lib, as the Stencil build provides a built-in lazy loading mechanism for components that are actually rendered. See https://stenciljs.com/docs/distribution

[felixroos]

We are already experimenting with SSR and SSG (Next.js) internally. We could add the dist-hydrate-script output target as a first step, if that helps.

That would be very helpful. Then we could use renderToString to prerender the html on the server. I am not sure how it handles the hydration on the client to add interactivity. Although our current use case does not require any user interaction except static links (which works with plain html).

I'm however confused by the high initial JS load in your example. How are you importing the library? It should not be necessary to load the entire lib, as the Stencil build provides a built-in lazy loading mechanism for components that are actually rendered. See https://stenciljs.com/docs/distribution

I've imported the react library as instructed here. I could also provide a reproducible example if that helps. Maybe there are also different ways to import components to enable tree shaking the library.

But if everything is rendered on the server, the library size is not a problem anymore, as no JS should be shipped to the client.

[Sqrrl]

I have published the hydration stuff as a separate package for testing purposes.
https://www.npmjs.com/package/@getflip/swirl-components-hydrate

[felixroos]

thanks for that! I can't test it before June though. I will give you feedback then

[felixroos]

Ok found time to test it, sadly, renderToString returns null. I found out that stencil swallows the following error in renderToString:

TypeError: Cannot read properties of undefined (reading '__core-js_shared__')
    at Array.<anonymous> (.../node_modules/@getflip/swirl-components-hydrate/index.js:23283:19

It is a bit tricky because everything is already bundled and transpiled, but the error has probably something to do with pdfjs, at least the error happens here:

/* 38 */
/***/ ((module, __unused_webpack_exports, __w_pdfjs_require__) => {

var global = __w_pdfjs_require__(7);
var defineGlobalProperty = __w_pdfjs_require__(39);
var SHARED = '__core-js_shared__';
var store = global[SHARED] || defineGlobalProperty(SHARED, {}); // <----- line of error
module.exports = store;

/***/ }),

So it looks like __w_pdfjs_require__(7) returns undefined, so my guess is that pdfjs or a dependency of pdfjs is not properly injected, probably because pdfjs uses something that is not available on node (web workers?).

I am not even using pdfjs, just a button. this is my test code:

import { renderToString } from "@getflip/swirl-components-hydrate";

const { html } = await renderToString(
  '<div><swirl-button label="My first button">asfasfas</swirl-button></div>',
  {
    prettyHtml: true,
    removeScripts: true,
  }
);
console.log("html", html); // null