Next js - désactiver le rendu côté serveur sur certaines pages

Question

Est-il possible de désactiver ssr sur certaines pages en utilisant Next js? Par exemple, j'ai une page avec une description de produit sur laquelle j'utilise ssr pour le référencement mais j'ai aussi une page avec une liste d'articles ou de produits que je peux filtrer et pour cette page, je ne veux pas utiliser ssr car cela page génère dynamiquement à chaque fois, comment puis-je désactiver ssr sur cette page?

Answer 1

Lazy charger le composant et désactiver SSR: https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

 import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(() => import('../components/List'), {
  ssr: false
})

export default () => <DynamicComponentWithNoSSR />

Answer 2

La fonction dynamic() peut également être utilisée sans import dynamique:

 import dynamic from 'next/dynamic'
import React from 'react'

const NoSsr = props => (
  <React.Fragment>{props.children}</React.Fragment>
)

export default dynamic(() => Promise.resolve(NoSsr), {
  ssr: false
})

Tout ce qui est encapsulé dans ce composant ne sera pas visible dans la source SSR.

 Contact me at <NoSsr>email@example.com</NoSsr>

Answer 3

Mettez ceci sur votre _app.tsx

 import type { AppProps } from "next/app";
import dynamic from "next/dynamic";
import React from "react";

const App = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />;
};

export default dynamic(() => Promise.resolve(App), {
  ssr: false,
});

Answer 4

Nous pouvons également utiliser le composant React react-no-ssr.

Disons que Commentaires est notre composant uniquement client. Maintenant, nous devons le rendre uniquement sur le client. Voici comment nous procédons.

 import React from 'react';
import NoSSR from 'react-no-ssr';
import Comments from './comments.jsx';

const MyPage = () => (
  <div>
    <h2>My Blog Post</h2>
    <hr />
    <NoSSR>
      <Comments />
    </NoSSR>
  </div>
);