Open MonsieurLanza opened 6 years ago
pshihn
commented
6 years ago 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.
MonsieurLanza
commented
6 years ago 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.
pshihn
commented
6 years ago @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
Casedy
commented
3 years ago For those who want to use the awesome library with NextJS:
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 ( <>
<Head>
...- using:function Signin() { return (
); }
Wired Elements accesses
windowobject which makes it unsuitable with server-side rendering, which just crash.Well, I know, but still… :p