Add support for React SSR / Pre-rendering (Next.js / Vite)
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
(Depends on https://github.com/mi6/ic-ui-kit/issues/1623)
### Summary
At the moment, `@ukic/react` components cannot be rendered on the server, and attempting to do so will result in a build error for various reasons.
### 💬 Description
Stencil can now support SSR-compatible React output targets (see: https://stenciljs.com/docs/react#hydratemodule), which I have tested with ICDS and does work (after some effort). There are a few outstanding issues which block the implementation of an SSR output:
- Declarative Shadow DOM (DSD) needs to be enabled (see: https://github.com/mi6/ic-ui-kit/issues/1623)
- Needs `@stencil/react-output-target@^1.0.1`, which has a minimum React peer dependency of v18 (currently ICDS supports React v16.7.0 and above, with the `@ukic/react` dev dependency being pinned to v16.14.0, whilst `@ukic/web-components` has a dev dependency of React ^17.0.0)
- The way `@ukic/react` uses a Barrel file to re-export everything from `components.ts` and add `SlottedSVG` to the exports: https://github.com/mi6/ic-ui-kit/blob/0e0197e19d7fcf61d2e2fb3f78bb97c25a0f8e22/packages/react/src/index.ts#L1
causes ESM issues when trying to build on the server
- The `DEVICE_SIZES` map in `@ukic/web-components` contains browser-dependent code which runs on module import, which throws an error when run on the server: https://github.com/mi6/ic-ui-kit/blob/0e0197e19d7fcf61d2e2fb3f78bb97c25a0f8e22/packages/web-components/src/utils/helpers.ts#L483
We should provide a SSR React output and resolve the above issues to enable SSR to work out of the box for developers.
### 💰 Use value
Modern React is making a push towards more server-side rendering and partial pre-rendering of the React DOM. This has quite a few benefits, such as allowing progressive enhancement, and improving app initial load times / preventing flash of unstyled content. The major React-compatible frameworks (in particular Next.js and Remix / Vite) also put emphasis on SSR. This would also enable static site generation (building static html pages from a React app) and partial pre-rendering of components, each of which have their own developer use cases.
Even when developers don't want to make use of SSR, SSG, or pre-rendering of React components in ICDS, the lack of SSR support causes compatibility issues with frameworks like Remix and Next.js, which require workarounds that introduce complexity to getting started in ICDS.
### 🚨 Urgency (low, medium or high)
Medium (this is a significant pain point for developers starting new React projects with ICDS, or bringing ICDS into existing React-based projects).
Contributor guide
Research direction
Start with the dependency on issue 1623, the React barrel export in packages/react/src/index.ts, and the DEVICE_SIZES code in packages/web-components/src/utils/helpers.ts. Review Stencil's React SSR output target and the listed React peer-version constraints; done means @ukic/react can build and render through server-side React workflows such as Next.js or Vite without browser-import errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript, vite
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100