Pilot: Next.js + KoliBri real SSR

[sdvg]

• https://nextjs.org/docs

Bitte das Samples (Mono-Repo, wenn mehr als 1) in folgendes Repo pushen: https://github.com/public-ui/lab-ssr-stencil

[sdvg]

Meine Erkenntnisse bzw. Notizen bis jetzt:

• Kein Funktionierendes Beispiel mit der aktuellen Next.js-Version zu finden.

Ausgangslage

• React generiert HTML mit Web-Component-Tags, diese müssen mit Stencil hydrated werden bevor das HTML an den Client gesendet wird
  • zum Hydrieren verwenden wir diesen Adapter, existiert bereits: @public-ui/hydrate

Lösungsansätze

• Next Server Wrapper (server.ts, die Next wrappt)
  • In neuester Version nicht mehr offiziell unterstützt (?) (https://github.com/vercel/next.js/issues/54977)
  • Würde voraussichtlich zu mismatch zwischen und Server und Client führen (=errors in console)
  • Wäre in der Art auf Netflify als spezielle MW möglich (https://www.netlify.com/blog/rewrite-html-transform-page-props-in-nextjs/)
• Next Middleware
  • wird zu früh ausgeführt - response HTML kann überschrieben werden, basiert aber nicht auf dem von Next gerenderten HTML
  • Würde voraussichtlich zu mismatch zwischen und Server und Client führen
• Eigene React Wrapper component
  • Nur als Proof of concept mit String-Parameter, kann so noch niht produktiv verwendet werden:
    • Verwendung: <Kolibri>{`<kol-heading _label="KolHeading"></kol-heading>`}</Kolibri>
    • → Funktioniert soweit als Async component:

import React from 'react';
import { renderToString } from '@public-ui/hydrate';

export const Kolibri = async ({children}: {children: string}) => {
    const START_TAG = `<kolibri-canvas>`
    const END_TAG = `</kolibri-canvas>`
    const htmlToRender = `${START_TAG}${children}${END_TAG}`
    const hydratedHtml = (await renderToString(htmlToRender)).html
    const matches = hydratedHtml.match(new RegExp(`${START_TAG}(.*)${END_TAG}`, 's'));
    return <div dangerouslySetInnerHTML={{ __html: matches?.[1] ?? '' }}></div>
}

• Darauf basierend, eigenen Adapter analog zum Stencil React Adapter entwickeln:
  • Native React/JSX Anbindung
  • Functional statt Class-Component für Server Components Support
  • Intern wird die component als HTML gerendert (ReactDOM) und dann hydrated
  • component rendert mit dangerouslySetInnerHTML
  • Mglw. schlechte Performance wegen vieler Hydrate Aufrufe?

Sonstige/allgemeine Probleme:

• Stencil React Adapter generiert class-components, nicht kompatibel mit Next.js (https://nextjs.org/docs/messages/class-component-in-server-component)
  • Custom Tags direkt verwenden: Funktioniert erst mal, TS muss konfiguriert werden: https://dev.to/swyx/how-to-use-web-components-with-next-js-and-typescript-4gg1
  • Keine gute DX, React-Bindings wären schon wünschenswert
• @public-ui/hydrate package.json export mit types funktioniert für Next.js (und Node.js) nicht, muss umgeschrieben werden

Mögliche nächste Schritte:

• Ansatz mit eigenem React Adapter mit eingebauter Hydration weiter verfolgen -> Performance müsste unbedingt getestet und sichergestellt werden
• Ansatz mit Hydration in (custom) Middleware weiter verfolgen. Wird mgwl. wegen DOM mismatches nicht gut funktionieren. Braucht womöglich einen zweiten Server, der als Middleware agiert.

[deleonio]

See https://github.com/ionic-team/stencil/issues/4389

[deleonio]

🎅 @sdvg NTK - https://designsystem.porsche.com/v3/developing/next-js/ssr-support read SSR