🧹 Tech Debt
As part of #2943 all the React components are marked as 'use client'; to signify they require client side apis in React (i.e. the web component apis). However, libraries like Next.js will attempt to server-side render the components for initial render.
We should consider documentation or library changes for users of next.js and look more thoroughly at the alternatives.
Some options:
-
Use a pattern to prevent SSR is to rely on next.js-specific dynamic import patterns like the following:
'use client'
import dynamic from 'next/dynamic'
export const NimbleButton = dynamic(() => import('@ni/nimble-react/button').then(mod => mod.NimbleButton), { ssr: false,});
export const NimbleThemeProvider = dynamic(() => import('@ni/nimble-react/theme-provider').then(mod => mod.NimbleThemeProvider), { ssr: false,});See example: https://stackblitz.com/edit/nextjs-nimble-nossrimport?file=app%2Fpage.tsx&file=app%2Fnimble.ts
-
Users of next.js can leverage the web components directly instead of the nimble-react wrappers.
related links:
🧹 Tech Debt
As part of #2943 all the React components are marked as
'use client';to signify they require client side apis in React (i.e. the web component apis). However, libraries like Next.js will attempt to server-side render the components for initial render.We should consider documentation or library changes for users of next.js and look more thoroughly at the alternatives.
Some options:
Use a pattern to prevent SSR is to rely on next.js-specific dynamic import patterns like the following:
See example: https://stackblitz.com/edit/nextjs-nimble-nossrimport?file=app%2Fpage.tsx&file=app%2Fnimble.ts
Users of next.js can leverage the web components directly instead of the nimble-react wrappers.
related links: