import { Footer, TableOfContent } from '@sb/components';
import { Meta } from '@storybook/addon-docs/blocks';
import { SsrLimitations } from './SsrLimitations';

<Meta title="Server Side Rendering" />

<TableOfContent />

# Server Side Rendering

We're happy to announce that starting from **v1.17.0**, UI5 Web Components for React is supporting Server Side Rendering Frameworks like [Next.js](https://nextjs.org/) 🎉.

<SsrLimitations />

<br />
<br />

## Next.js

### Create a new project

The best way to start using UI5 Web Components in Next.js is using one of our [templates](?path=/docs/project-templates-examples--docs#templates).
We have templates available for both the pages and the app router.

### Add to existing project

In case you already have an existing Next.js project and want to add UI5 Web Components for React to it, you first need to follow our [general Getting Started Guide](?path=/docs/getting-started--docs#add-ui5webcomponents-react-to-an-existing-app).

For better SSR support (i.a. to prevent flickering), we recommend importing our stylesheet bundle inside the `_app` file or the root layout (depending on whether you are using the pages or the app router) and set the `staticCssInjected` prop on our `ThemeProvider`:

**Note:** Only import the stylesheets of the packages you are actually using.

```tsx
import '@ui5/webcomponents-react/styles.css'; // main package styles
// Required only when using the corresponding package
import '@ui5/webcomponents-react-charts/styles.css'; // chart package styles
import '@ui5/webcomponents-react-compat/styles.css'; // compat package styles


export default function AppOrRootLayout() {
  // ...
  return (
    // ...
    <ThemeProvider staticCssInjected>{/* your app content */}</ThemeProvider>
  );
}
```

### Common Pitfalls

#### Icon and Feature Imports in Server Components

Some UI5 Web Component features rely on the registration of a component during runtime on the client.
The most common of these are icon imports (e.g. `import '@ui5/webcomponents-icons/dist/add.js';`) and asset imports (e.g. `import '@ui5/webcomponents-react/dist/Assets.js';`).

In order to fulfill their purpose in your application, you must ensure that these imports are only used in client components (the file or a parent component must contain the `'use client';` directive).
If they are imported into server components, these imports will do nothing and you'll notice that some features or icons are not available in your application.

## Other frameworks

Your favorite framework is missing here? Feel free to [edit this page](https://github.com/UI5/webcomponents-react/blob/main/docs/knowledge-base/ServerSideRendering.mdx) and submit a pull request to get it added!

<Footer />