scale
scale copied to clipboard
telekom
NextJS with 'use client', StaticSiteGeneration and output: export
Scale Version ^3.0.0-beta.139
Framework and version ^14.0.5-canary.43
Code Reproduction This will error out due to this issue: https://github.com/vercel/next.js/issues/54393
'use client';
import Footer from '/components/Footer';
import Header from '/components/Header';
import '/styles/general.css'
import { defineCustomElements, applyPolyfills } from '@telekom/scale-components/loader';
import '@telekom/scale-components/dist/scale-components/scale-components.css';
import { useLayoutEffect } from 'react'
import { i18n } from '/lib/i18n_config'
export default function RootLayout({ children, params }) {
// This whole hook is needed for Scale, I can't remove it
useLayoutEffect(() => {
applyPolyfills().then(() => {
defineCustomElements(window)
})
}, [])
return (
<html lang={params.lang}>
<head>
<link rel="icon" href="/favicon.ico" sizes="any" />
</head>
<body>
<Header></Header>
{children}
<Footer></Footer>
</body>
</html>
)
}
// Function to generate static pages
export async function generateStaticParams() {
return i18n.locales.map((locale) => ({ lang: locale }))
}
The code also can be found in the i18n branch here: https://github.com/opentelekomcloud-infra/circle-partner-navigator-frontend/blob/i18n/app/%5Blang%5D/layout.js Is there any way to prerender Scale without doing this on the Client-Side using React's useLayoutEffect Hook? This would also be faster as the client doesn't need to fetch the complete JS files form Scale first and just after that start rendering.
Hi @SebastianGode, we had a similar issue https://github.com/telekom/scale/issues/1773 a while back and I found this nextjs/stencil example there https://github.com/vercel/next.js/blob/canary/examples/with-stencil/packages/web-app/pages/_app.js .. It seems like they also suggest using useLayouEffect although, as you say, there may be better performing solutions.
I found this https://css-tricks.com/using-web-components-with-next-or-any-ssr-framework/#aa-custom-bundling-web-component-code, and quickly tested it by replacing the contents of their shoelace-bundle.js file with our defineCustomElements - it seems to work, do you think this would be appropriate for your use case?
