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

[labs/nextjs] A plugin for Next.js to integrate Lit SSR #3589

Closed
1 task done
augustjk opened this issue Jan 18, 2023 · 5 comments · Fixed by #3613
Closed
1 task done

[labs/nextjs] A plugin for Next.js to integrate Lit SSR #3589

augustjk opened this issue Jan 18, 2023 · 5 comments · Fixed by #3613
Assignees
@augustjk

Comments

@augustjk
Copy link
Member

Should this be an RFC?

  • This is not a substantial change

Which package is this a feature request for?

SSR (@lit-labs/ssr)

Description

Part of #2391 and depends on #3588

With @lit-labs/ssr-react package being the core implementation of integrating Lit SSR with React Server DOM, it would be good to have an easy way to configure a Next.js project with a plugin.

We could have a package @lit-labs/nextjs which exports function withLitSsr which can be used to create/wrap the users's next.config.js. This could look like https://github.com/vercel/next.js/blob/canary/packages/next-mdx/index.js

The plugin would add to the webpack config of the Next.js project to add side-effect imports to bundle entrypoints to monkey patch React.createElement and also replace any runtime jsx transforms to use @lit-labs/ssr-react instead.

Alternatives considered:

  • Users could manually configure jsxImportSource or jsxFactory depending on the runtime mode of the project. The problem with this is that it will not work with components made using @lit-labs/react, or other precompiled React components housing Lit components.

Alternatives and Workarounds

N/A
@augustjk
Copy link
Member Author

It would also be nice if we could add the template shadowroot polyfill for non-supported browsers. There may be a way to do this through the webpack config as well. Otherwise, users might need to add it to the bottom of the <body> in their _document.js file.

@justinfagnani
Copy link
Collaborator

I don't think we should automatically include the polyfill, except possibly as some addition to an automatic polyfill injection that Next already has.

@aomarks
Copy link
Member

aomarks commented Jan 18, 2023

My thought was that frameworks like Next tend to make things "just work", and frameworks like react don't require thinking about this problem. To match that experience, maybe automatic polyfill injection is something we should actually consider.

Another thought is that to prevent the FOUC problem, we'll also want some easy-to-use way to block rendering until the polyfill has activated, as shown at https://github.com/lit/lit/tree/main/packages/labs/eleventy-plugin-lit#example-bootup-strategy

@augustjk augustjk self-assigned this Jan 18, 2023
@augustjk
Copy link
Member Author

As it is, we also get React hydration mismatch error if <template> element is still present as a child for browsers that don't support DSD (there might be an option to suppress this warning, though not sure if that's the right thing to do here). If we find a way to do it via webpack config, it could very well be an option for the config generating function whether user wants polyfill added.

@steveworkman steveworkman mentioned this issue Jan 19, 2023
Open
@steveworkman
Copy link
Contributor

My thought was that frameworks like Next tend to make things "just work", and frameworks like react don't require thinking about this problem. To match that experience, maybe automatic polyfill injection is something we should actually consider.

Another thought is that to prevent the FOUC problem, we'll also want some easy-to-use way to block rendering until the polyfill has activated, as shown at https://github.com/lit/lit/tree/main/packages/labs/eleventy-plugin-lit#example-bootup-strategy

FWIW the Nuxt plugin includes the DSD polyfill for browsers that don't support it. https://github.com/prashantpalikhe/nuxt-ssr-lit/blob/main/src/runtime/plugins/shim.client.ts is included as a client-side plugin

This was referenced Jan 26, 2023
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@augustjk augustjk

Labels
None yet
Projects
Lit Project Board
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[labs/nextjs] Add Next.js plugin for Lit SSR lit/lit
4 participants
@aomarks @justinfagnani @steveworkman @augustjk