RE: Adding server-side-rendering support for Client Extension Custom Elements

2024-11-19T16:37:54Z

Feature Request Created: https://liferay.atlassian.net/browse/LPD-42484

Adding server-side-rendering support for Client Extension Custom Elements

2024-11-19T16:29:45Z

As it was discussed at DEVCON 2024, we as Liferay frontend developers need the possibility to server-side-render client extension custom elements. There are two main reasons why this is really important and a must-have:

SEO - If the client wants a b2c shop or a company website, SEO is one of the most important requirements. With the current implementation of client extensions, the whole content is rendered after the initial page loaded (client-side-rendering). This prevents bots to access the data and index them properly.
Core Web Vitals Score (https://developers.google.com/search/docs/appearance/core-web-vitals?hl=de) - We as frontend-developers are required to create web applications with the highest possible user experience / user satisfaction as possible. The Core Web Vitals score is a good way to measure this (as well: the higher the score, the better the search engine ranking is). With client extensions being client-side-rendering only, it is currently not possible to prevent a layout shift which is measured in the Cumulative Layout Shift (CLS) metric.

Marco Leo said: "Liferay should be the best CMS on the market" and I do expect a solution to these issues of the best CMS on the market. But I know, that this is quite a challenging task which is not easy to solve.

I came up with an idea, on how this could be achieved. I would do this in two stages. The first stage should be not a big change, the second one is more challenging.

Stage 1: Providing initial HTML which is included inside the custom element tags

If it was possible to provide an HTML file, where the content of that file would be included inside the custom element tags, the problem with the layout shift could be solved by providing skeletons or a loading screen as soon as the initial file gets rendered.

assemble:
    - from: assets
      into: static
liferay-sample-custom-element-1:
    friendlyURLMapping: vanilla-counter
    htmlElementName: vanilla-counter
    instanceable: false
    name: Liferay Sample Custom Element 1
    portletCategoryName: category.client-extensions
    type: customElement
    urls:
        - index.html
        - index.js
    useESM: false

This solution would be non-breaking and backwards compatible and flexible enough to be used in a variety of use cases. For example, in the React use case it would be possible to pre-render components on build time, serve them via this initial HTML and hydrate them afterward the JS got loaded.

Stage 2: Server Side Rendering with data

To not only fix the CLS issue but also fix the issue with SEO, there should eventually be a way to server-side-render client extension custom elements with data in it. One way of achieving this would be to allow a Freemarker instead of an HTML file. But this, in my opinion, would be more like a workaround than a real solution to the problem.

Let me know what you think. I'm open to discuss this further if there are any questions.