[ssr] SSR rendering in NextJS

[K4CZP3R]

Description

I'm trying to render a lit component via SSR in NextJS, the default behavior is that it fails to import the component because there is no window property at the server-side rendering.

To fix that, I've imported @lit-labs/ssr/lib/install-global-dom-shim.js before importing my lit component.

Unfortunately, some packages relay their SSR-detection on the availability of window property.
And because of the installed shim, packages will fail to detect the valid environment and will be executing client-side code on the server.

The shim installed by @lit-labs/ssr does not contain all of the functions of the real, client-sided, window property.

In my case, the package styled-jsx tries to execute the following line of code:
var node = this._isBrowser && document.querySelector('meta[property="csp-nonce"]');.

This results in an exception because the _isBrowser property is true on the server-side.
Hardcoding this property results in compiling without any problems.

Steps to Reproduce

1. Write this code

element.ts

import "@lit-labs/ssr/lib/install-global-dom-shim.js";
import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  name = 'Somebody';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

index.js

import "element"

export default function Home(){
  return ( <simple-greeting></simple-greeting> )
}

2. npm run build

Expected Results

Use of lit element in NextJS using SSR (which is enabled by default), without adding any new server-side specific functionality to the element itself.

Actual Results

Exception is thrown when builiding:
error - TypeError: document.querySelector is not a function

[mohsenasfiamaersk]

We have exactly the same issue, I've made this codesandbox which replicates the issue (just for the reference it's a modified edition of this):
https://codesandbox.io/s/nextjs-lit-forked-cymhs?file=/components/Button.client.tsx

[mohsenasfiamaersk]

I managed to make an implementation with Next.js and @lit-lab/ssr, you can take a look at my sample repo here, let me know what you think about that: https://github.com/mohsenasfia/nextjs-lit-ssr

[manandkumaar]

@mohsenasfiamaersk Thanks for the creating the sample repo.
Any idea how to bind event to button component?.

[mohsenasfiamaersk]

Hey @manandkumaar, for ease of event binding, my suggestion would be to use @lit-labs/react, it's a wrapper for the usage of the web components in React. You can also consider using the @lit-labs/gen-wrapper-react which would auto-generate the React wrapper out of your packages without too much of boilerplate code, seems promising but I haven't tried that myself yet.

[khanh-le-otsv]

+1 for this, we are also working on a design system using lit and want to use in with SSR.

[martin-dimi]

Any updates on this? We're trying to use a lib component package within our nextjs setup and I'm getting the same issues

[augustjk]

To clarify, the original post of the issue is more akin to issues like #1213 where bringing in the global DOM shim caused breakages. For purely importing Lit components in a Next.js project (without actually server-rendering them) is now possible (without using dynamic imports) without loading the global DOM shim as of lit@2.3.0 with #3156. This allows usage of Lit components in a Next.js project where component definitions are included in the bundle to be client rendered.

Due to the issue title, I believe some of you are looking for actually server-rendering Lit components in a Next.js project as well.

We have a working proof of concept for achieving this by patching React.createElement to look for Lit components and use @lit-labs/ssr to server render them. See adbfceb#diff-c9ffebf7c892cdb0442bf316bbd8a4d4be892cca3cd6d0b1d4d9bdc8a39f4fd6.

Polishing this approach, along with designing and publishing a plugin for adding this patch to createElement is up next in the queue.

[augustjk]

For those that might be subscribed to this issue, we have released @lit-labs/nextjs as a plugin for SSR-ing Lit components in a Next.js project.

Here's a stackblitz example: https://stackblitz.com/edit/nextjs-lit-ssr?file=next.config.js,pages%2Findex.js

Please give it a try and let us know your thoughts with issues, discussions, or at our discord server. Thank you!

[watife]

For those that might be subscribed to this issue, we have released @lit-labs/nextjs as a plugin for SSR-ing Lit components in a Next.js project.

Here's a stackblitz example: https://stackblitz.com/edit/nextjs-lit-ssr?file=next.config.js,pages%2Findex.js

Please give it a try and let us know your thoughts with issues, discussions, or at our discord server. Thank you!

@augustjk, please, how does this work with the @lit-labs/react wrapper?

[augustjk]

@watife We added some more prop coordination with the @lit-labs/react package in this PR #3885. There's also a design doc explaining some of the goals and implementation decisions here https://github.com/lit/lit/blob/main/dev-docs/design/ssr-react.md

[watife]

@

@watife We added some more prop coordination with the @lit-labs/react package in this PR #3885. There's also a design doc explaining some of the goals and implementation decisions here https://github.com/lit/lit/blob/main/dev-docs/design/ssr-react.md

@augustjk, thank you very much. However, I need some clarification about the implementation of this, please. With this, if I render a component with @lit-labs/react in, for example, next.js, does it work out of the box supporting ssr or any particular configuration I need to do?

Thank you once again

[augustjk]

@watife See https://github.com/lit/lit/tree/main/packages/labs/nextjs#readme. There's an example project here https://github.com/lit/lit/tree/main/examples/nextjs. Please open a separate discussion if you're having trouble.

[harshunifi]

@watife See https://github.com/lit/lit/tree/main/packages/labs/nextjs#readme. There's an example project here https://github.com/lit/lit/tree/main/examples/nextjs. Please open a separate discussion if you're having trouble.

In the nextjs example, I cannot import a library created with lit-labs/react like shoelace. To import it, based on above example, we will need the entire source of the lit component/library. That does not seem like a good idea.

[augustjk]

In the nextjs example, I cannot import a library created with lit-labs/react like shoelace. To import it, based on above example, we will need the entire source of the lit component/library. That does not seem like a good idea.

@harshunifi If you're talking about duplication of Lit code, that's a shoelace specific issue as they have been bundling Lit into their component code rather than leaving them as bare specifiers to be deduplicated for users, though it looks like that'll be addressed soon shoelace-style/shoelace#559