mi6 / mi6/ic-ui-kit

Add support for React SSR / Pre-rendering (Next.js / Vite)

Open
#3,669 8 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.