Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

NextJS with 'use client', StaticSiteGeneration and output: export #2250

Open
SebastianGode opened this issue Jan 8, 2024 · 3 comments
Open

NextJS with 'use client', StaticSiteGeneration and output: export #2250

SebastianGode opened this issue Jan 8, 2024 · 3 comments
Labels
support Asking for help

Comments

@SebastianGode
Copy link

SebastianGode commented Jan 8, 2024 •
edited
Loading

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: vercel/next.js#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.
@SebastianGode SebastianGode added the support Asking for help label Jan 8, 2024
@felix-ico
Copy link
Collaborator

Hi @SebastianGode, we had a similar issue #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?

@amir-ba
Copy link
Collaborator

amir-ba commented Oct 29, 2024

@SebastianGode were you able to test what Felix-ico suggested?

@SebastianGode
Copy link
Author

@amir-ba Yes, but sadly this is still rendering the actual CSS theme on the client-side.
I found no way to prerender it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
support Asking for help
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@amir-ba @SebastianGode @felix-ico