Hard reload after any file change #198

oe-bayram · 2023-10-10T13:16:15Z

I'm using tss-react with MUI in Next.js 13.4.7 with the pages router and I have configured it this way:

// _app.tsx

import { CssBaseline } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import { Amplify } from "aws-amplify";
import awsExports from "aws-exports";
import { useUserActivityTracker } from "hooks/useUserActivityTracker";
import type { AppProps } from "next/app";
import theme from "theme";
import { createEmotionSsrAdvancedApproach } from "tss-react/next";
import AuthContextProvider from "context/auth-context";
import { MessagesProvider } from "components";
import { Layout } from "layout/Layout";
import { StateContainer } from "layout/StateContainer";
import "../styles/calendar.css";
import "../styles/globals.css";

Amplify.configure(awsExports);

const { augmentDocumentWithEmotionCache, withAppEmotionCache } =
  createEmotionSsrAdvancedApproach({ key: "css" });

export { augmentDocumentWithEmotionCache };

function MyApp({ Component, pageProps }: AppProps) {
  useUserActivityTracker();

  return (
    <ThemeProvider theme={theme}>
      <AuthContextProvider>
        <CssBaseline />
        <MessagesProvider>
          <StateContainer>
            <Layout>
              <Component {...pageProps} />
            </Layout>
          </StateContainer>
        </MessagesProvider>
      </AuthContextProvider>
    </ThemeProvider>
  );
}

export default withAppEmotionCache(MyApp);

// _document.tsx

import Document, { Html, Main, NextScript } from "next/document";
import { augmentDocumentWithEmotionCache } from "./_app";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <body>
          <noscript>
            <iframe
              src="https://www.googletagmanager.com/ns.html?id=XXXXXXX"
              height="0"
              width="0"
              style={{ display: "none", visibility: "hidden" }}
            ></iframe>
          </noscript>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

augmentDocumentWithEmotionCache(MyDocument);

export default MyDocument;

I do not know why, with this configuration, the entire page is hard-reloaded after every change, and this even occurs shortly after the DOM has been updated.

garronej · 2023-10-10T13:24:17Z

Hello @oe-bayram,

What do you refer to by hard-reload after every change?
Are you talking about the dev experience?
Maybe you could provide a https://www.replay.io/ and a reproduction repo ?

Best

garronej · 2023-10-10T13:24:30Z

(Sorry closed by mistake)

garronej closed this as completed Oct 10, 2023

garronej reopened this Oct 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hard reload after any file change #198

Hard reload after any file change #198

oe-bayram commented Oct 10, 2023 •

edited by garronej

garronej commented Oct 10, 2023

garronej commented Oct 10, 2023

Hard reload after any file change #198

Hard reload after any file change #198

Comments

oe-bayram commented Oct 10, 2023 • edited by garronej

garronej commented Oct 10, 2023

garronej commented Oct 10, 2023

oe-bayram commented Oct 10, 2023 •

edited by garronej