SSR / Next.js Support

[andrewhawk1ns]

• what edition are you using - community
• version for @inovua/reactdatagrid-communityor @inovua/reactdatagrid-enterprise - 4.1.24

Relevant code or config

https://github.com/andrewhawk1ns/react-data-grid-nextjs

What you did:

I installed a basic Next.js example and added the reactdatagrid getting started example - https://reactdatagrid.io/docs/getting-started.

What happened:

If I try to use next/link or load the data grid client side only i.e:

const DataTable = dynamic(() => import('@inovua/reactdatagrid-community'), {
  ssr: false
});

The app times out and crashes when using next/link (clicking a link).

If I try to load the data grid with SSR, it doesn't load data and I get the following warnings:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at ActiveRowIndicator (node_modules\@inovua\reactdatagrid-community\ActiveRowIndicator\index.js:37:39)
    at div
    at div

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at node_modules\@inovua\reactdatagrid-community\factory.js:202:41
    at node_modules\@inovua\reactdatagrid-community\factory.js:202:41

Reproduction repository: https://github.com/andrewhawk1ns/react-data-grid-nextjs

Problem description:

The data grid doesn't load data server side in Next.js and I can't load it in client side without the app timing out and crashing when using next/link.

Suggested solution:

Could I please get some guidance on how to implement this in Next.js without it crashing the application / breaking or whether this is something that is in the scope of the package and should be fixed? :)

[index01d]

Could I please get some guidance on how to implement this in Next.js without it crashing the application / breaking or whether this is something that is in the scope of the package and should be fixed? :)

You can create a special wrapper, which will render a component on the client-side only, like this:

import { useEffect, useState } from 'react';

export default function ClientOnly({ children, ...delegated }) {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  if (!hasMounted) {
    return null;
  }

  return <div {...delegated}>{children}</div>;
}

and then use it to prevent server-side rendering:

<ClientOnly>
  <ReactDataGrid
      idProperty='id'
      columns={columns}
      dataSource={dataSource}
      style={gridStyle}
    />
</ClientOnly>

[erasmuswill]

Also doesn't work on latest https://github.com/remix-run/remix even when adding a bail-out on server

[dukesx]

Same case here, React Data Grid applies display none to its rows, although data is being fetched. Layout effect errors are persistent