wired-elements Crashes react SSR

Wired Elements accesses window object which makes it unsuitable with server-side rendering, which just crash.

Well, I know, but still… :p

May 28 '18 20:05 MonsieurLanza

This applies to all web components not just wired-elements. One need to generate shadow DOM, attach content to the host, declare custom elements, etc. I don't know what other are doing with web components, but I'm sure there are some strategies out there.

Something like puppeteer would definitely work, but may not be easy to use with whatever react rendering people may be doing.

May 28 '18 23:05 pshihn

I was thinking about something more like "if we are on server, passthrough/render as-is and let the client do the job". Full SSR is a no go with such visual components, which do need JS on client-side anyway, and that was not really my point. Just : let's try not to crash the server.

May 29 '18 07:05 MonsieurLanza

@MonsieurLanza I agree. I think there are general issues with server side rendering of web components in default setups. Usually one would need to update the process to make it work. I will have to look more into the React's default SSR.

Related: https://github.com/skatejs/ssr

SSR Web Components (Polymer Summit 2017)

Server-side rendering web components

May 30 '18 20:05 pshihn

For those who want to use the awesome library with NextJS:

make component for dynamic loading wired-elements wiredElements.tsx:

import { useEffect } from 'react';

export default function WiredElements() {
  useEffect(() => {
    import('wired-elements');
  }, []);

  return <></>
}

in main _app.tsx file:

import dynamic from 'next/dynamic';

const WiredElements = dynamic(() => import('../components/wiredElements'));

function CustomApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <WiredElements></WiredElements>
      <Head>
      ...

using:

function Signin() {
  return (
    <div>
      <h1>Signin page</h1>
      <div>
          <wired-card elevation="5">
            <h1>`wired-elements` dynamic loading</h1>
          </wired-card>
          <wired-input placeholder="Enter name"></wired-input>
          <wired-button>Click Me</wired-button>
      </div>
    </div>
  );
}

May 22 '21 08:05 Casedy

wired-elements wired-elements copied to clipboard

Crashes react SSR

wired-elements
wired-elements copied to clipboard