CODEWITHSUNDEEP
next.jsserver-side-rendering
tps
tps

Reputation: 135

"Disable" SSR in nextjs

I want to create a Browser-Application without SSR, with React and MUI. So I found a NextJS-Template here:

https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript

I want to disable SSR completely, let's say in the best case starting with _document.tsx, but at least the file _app.tsx and all following as for example _index.tsx should be rendered without SSR.

So, how to disable SSR "completely"?

Upvotes: 4

Views: 10147

Answers (3)

saleh shokouhi
saleh shokouhi

Reputation: 525

For those who struggle with this, if you want to disable SSR (Server-Side Rendering) in your page's router in Next.js, you can dynamically import the layout in _app.jsx or _app.tsx like so:

    // _app.tsx
    import type { AppProps } from 'next/app';
    import dynamic from 'next/dynamic';
    
    // Dynamically import the Layout component with SSR disabled
    const Layout = dynamic(() => import('@/components/app/layouts/default'), { ssr: false });
    
    export default function MyApp({ Component, pageProps }: AppProps) {
      return (
        <Layout>
          <Component {...pageProps} />
        </Layout>
      );
    }

Note: Make sure to replace '@/components/app/layouts/default' with the correct path to your layout component.

Upvotes: 1

Jonathan Dsouza
Jonathan Dsouza

Reputation: 608

Just remove the getStaticProps, getStaticPaths and getServerSideProps from the pages you don't want to SSR and it will act like a normal react page.

Upvotes: -2

Mark G
Mark G

Reputation: 2206

While some might tell you to use plain React, others still use Next.js because of things like file-based routing, sane ESLint and TypeScript defaults, and fast compilation times (because of SWC). If you prefer the developer experience of Next.js over standalone React, but don't want/need SSR, then you have the option to use a static HTML export:

next export allows you to export your Next.js application to static HTML, which can be run standalone without the need of a Node.js server. It is recommended to only use next export if you don't need any of the unsupported features requiring a server.

The example template you linked to shouldn't need any additional code changes (running next export on it worked fine for me, it only threw a warning about a missing ESLint configuration which is easy to set up).

Upvotes: 7

Related Questions