web-dev-qa-db-ja.com

次のjs-一部のページでサーバー側のレンダリングを無効にする

Next jsを使用して一部のページでssrを無効にすることは可能ですか？たとえば、SEOにssrを使用している製品の説明が記載されたページがありますが、フィルター可能なアイテムまたは製品のリストが記載されたページもあり、そのページではssrを使用したくありません。ページは毎回動的に生成されますが、このページでssrを無効にするにはどうすればよいですか？

reactjsnext.jsserver-side-rendering
20
gigs

コンポーネントを遅延読み込みし、SSRを無効にします。
https://github.com/zeit/next.js#3-with-no-ssr

import dynamic from 'next/dynamic'

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

export default () => (
  <div>
    <DynamicComponentWithNoSSR />
  </div>
)
2
gg_

SSRを無効にすることはできません。 続きを読む...

クライアント側でのみ何かを開始したい場合は、 componentDidMount lifeCycle関数を使用できます。一方、サーバー側から開始したい場合は、 getInitialProps 関数を使用できます。

1
Darryl R. Norbert

react-no-ssr Reactコンポーネントを使用することもできます。

コメントがクライアントのみのコンポーネントであるとしましょう。次に、クライアント上でのみレンダリングする必要があります。以下がその方法です。

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