Replies: 2 comments 18 replies
-
|
I am using next.js 13.0.3 and to be honest I don't even know the feature you mentioned, I just simply put _app.ts and _document.ts in pages folder and everything went OK. |
Beta Was this translation helpful? Give feedback.
-
|
@lszomoru As document says, layouts can be set to client component, so we may could add a second level layout which contains those provider components? I'm confused about |
Beta Was this translation helpful? Give feedback.
-
|
Based on this documentation it looks like one can mix client/server components. |
Beta Was this translation helpful? Give feedback.
-
|
@lszomoru So we could: 'use client'
import {
FluentProvider,
GriffelRenderer,
RendererProvider,
renderToStyleElements,
SSRProvider,
webLightTheme,
} from '@fluentui/react-components';
export default function FluentRenderer({
children, renderer
}: {
children: React.ReactNode;
renderer: GriffelRenderer;
}) {
const styles = renderToStyleElements(renderer);
return (
<RendererProvider renderer={renderer}>
<SSRProvider>
<FluentProvider theme={webLightTheme}>{children}</FluentProvider>
</SSRProvider>
</RendererProvider>
);
}Then: import {
createDOMRenderer,
webLightTheme,
} from '@fluentui/react-components';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const renderer = createDOMRenderer();
const styles = renderToStyleElements(renderer);
return (
<html lang='en'>
<head>{styles}</head>
<body>
<FluentRenderer renderer={renderer}>{children}</FluentRenderer>
</body>
</html>
);
} |
Beta Was this translation helpful? Give feedback.
-
|
Yes, I believe that would work. But I have the feeling that something is still missing since it looks like all components that are using any FluentUI components would have to be client-side components. That would contradict the documentation which states that FluentUI v9 fully support server-side rendering. |
Beta Was this translation helpful? Give feedback.
-
|
From Next.js documentation, a Client Component is a component that is rendered on server and hydrated on client (to make it interactable), on the other hands, a Server Component is a component that is rendered on server and will not be hydrated on client. From me that's to say a Client Component is not a component that can only be client-side rendered, and this is so-called "fully support server-side rendering" in previous version of React (since before React 18, all components? will be hydrated on client side). Anyway, I am not familiar with these concepts, so I may have made a mistake on understanding. |
Beta Was this translation helpful? Give feedback.
-
|
I have got the same issue. I'm wondering why nobody from support team replies 😔 |
Beta Was this translation helpful? Give feedback.
-
|
@AkiraVoid, thank you for suggestions. I am wondering if you experience a slow page load in localhost when first start the app (npm run dev) using FluentUI and Next.js (App Router)? |
Beta Was this translation helpful? Give feedback.
-
|
Actually even in page router. But I guess I know why. Fluent UI tries to insert many css styles and variables on loading. In page router, many of styles will be loaded on server side, but in app router, since FluentProvider is currently a client component, those styles may only can be loaded on client side. I think this causes the slow initial render. |
Beta Was this translation helpful? Give feedback.
-
|
@AkiraVoid |
Beta Was this translation helpful? Give feedback.
-
|
@Brouilles If the whole page you write is rendered in client side, you have to wait your browser (or users have to wait their browsers) to execute those JavaScript codes which must be executed before the CSS styles were inserted, such as loading the whole React framework. So, how many seconds you or your users will be stuck at the white screen depends on the performance of your or their machines, and how many codes you wrote or used before the actual rendering happens. This is a known caveat of client side rendering, and server side rendering is what we generally used to solve this issue, so I guess that you may have to move to server side rendering if you don't want this white screen. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you sadly it is not possible because I use nextjs for the UI of a webview, for an app. |
Beta Was this translation helpful? Give feedback.
-
Hey FluentUI community,
Next.js 13 got released yesterday and introduced a new way of routing (inside a new
/appdirectory) which does not have a_app.(js|ts)and_document.(js|ts). Unfortunately the migration guide does not mention how to port over a custom Document they just say: "Include global styles inside the root layout file".So did anyone already try and/or succeed using FluentUI v9 using the new Next.js version? Or maybe can provide some pointers on how to achieve it, unfortunately my experience with SSR CSS during compile time solutions is quite limited :(
Related issue in Griffel.js styling library: microsoft/griffel#266
Beta Was this translation helpful? Give feedback.
All reactions