25 votes

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

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?

43voto

giggi__ Points 448

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 />
 

23voto

Erik Hofer Points 441

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>
 

1voto

Semur Nabiev Points 118

C'est une réponse tardive, mais au cas où quelqu'un se heurterait à ceci:

 const isServer = () => typeof window === `undefined`;

const Page = () => isServer() ? null : (

  <> 
      <YourClientSideComponent />
  </>
);
 

C'est au niveau "page". isServer() empêche le rendu de quoi que ce soit du côté serveur. Vous pouvez, si vous le souhaitez, empêcher SSR au niveau des composants également:

 const isServer = () => typeof window === `undefined`;

const Page = () =>(

  <> 
      { !isServer() && <YourClientSideComponent /> }
  </>
);
 

1voto

refactor Points 2473

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>
);
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X