react-render-tracker How to integrate with NextJs 13+

I tried adding the script using next/script within layout.tsx

import React from 'react';
import { Providers } from './providers';
import NextTopLoader from 'nextjs-toploader';
import { font } from '@ss/theme/font';
import Script from 'next/script'

export const metadata = {
  title: 'Shadow Shifts - Admin',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={font.className}>
      <Script
        src="https://cdn.jsdelivr.net/npm/react-render-tracker"
      />
      <body>
        <Providers>
          <NextTopLoader />
          {children}
        </Providers>
      </body>
    </html>
  );
}

I tried option #0 I get Waiting for a supported React renderer to be connected...

I tried option #1 I get Connection to rempl publisher – Awaiting...

I can see the script loading correctly

Also worth mentioning that I am using React 18

Dec 22 '23 16:12 srosato

Yeah any updates on this? coming from nextJs 14. This approach doesn't work

Sep 27 '24 11:09 aldrinjenson

I was able to make it work with strategy="beforeInteractive":

<Script
  src="https://cdn.jsdelivr.net/npm/react-render-tracker"
   data-config="inpage:true"
   strategy="beforeInteractive"
/>

But it didn't help that much because it only shows top 20-30 components and does not show anything inside the topmost server component.

Aug 21 '25 16:08 iAdramelk