다음 js - 일부 페이지에서 서버 측 렌더링을 비활성화합니다.

다음 js - 일부 페이지에서 서버 측 렌더링을 비활성화합니다.

일부 페이지에서 Next js를 사용하여 sr를 비활성화할 수 있습니까?예를 들어 SEO에 sr를 사용하는 제품 설명이 있는 페이지가 있지만 필터링할 수 있는 항목 또는 제품 목록이 있는 페이지도 있습니다. 이 페이지에 대해서는 이 페이지가 매번 동적으로 생성되므로 sr를 사용하지 않도록 설정하려면 이 페이지에서 어떻게 해야 합니까?

컴포넌트를 천천히 로드하고 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 />

그dynamic()동적 Import 없이 함수를 사용할 수도 있습니다.

// components/NoSsr.jsx

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

이 구성 요소로 둘러싸인 항목은 SSR 원본에 표시되지 않습니다.예를 들어 다음과 같습니다.

// inside the page you want to disable SSR for

import NoSsr from "components/NoSsr";

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

이것을 _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,
});

답변이 늦었지만 누군가 마주칠 경우를 대비해서:

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

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

  <> 
      <YourClientSideComponent />
  </>
);

이것은 「페이지」의 레벨입니다. isServer()서버측에서 아무것도 렌더링 할 수 없습니다.원하는 경우 구성 요소 수준에서 sr를 차단할 수도 있습니다.

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

const Page = () =>(

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

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

다음은 React 문서에서 언급한 내용을 바탕으로 방금 생각해 낸 솔루션입니다.https://reactjs.org/docs/react-dom.html#hydrate

class ClientOnly extends React.Component {
  state = {
    isClient: false,
  };

  componentDidMount() {
    this.setState({
      isClient: true,
    });
  }

  render() {
    const { isClient } = this.state;
    const { children } = this.props;

    return isClient ? children : false;
  }
}

그런 다음 구성요소/블록을 줄바꿈하면 서버에서 렌더링되지 않습니다.

<ClientOnly>You're logged in as {name}</ClientOnly>

이로 인해 React.hydrate 경고 "경고: 에 일치하는 서버 HTML이 있어야 합니다."도 방지됩니다.

@refactor 응답에서는react-no-ssr는, 일부의 타이프 스크립트의 문제에서는 동작하지 않습니다.

저는 다음과 같이 매우 간단한 NoSSR 컴포넌트를 작성했습니다.

import { ReactNode, useEffect, useLayoutEffect, useState } from 'react'

const DefaultOnSSR: React.FC = () => null

export const NoSSR: React.FC<{ children: ReactNode; onSSR?: ReactNode }> = ({ children, onSSR = <DefaultOnSSR /> }) => {
  const [onBrowser, setOnBrowser] = useState(false)
  useLayoutEffect(() => {
    setOnBrowser(true)
  }, [])
  return <>{onBrowser ? children : onSSR}</>
}

다음과 같이 SSR을 사용하지 않으려면 어디서든 사용할 수 있습니다.

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

Erik Hofer의 답변을 바탕으로 페이지 또는 기타 컴포넌트를 정리하는 HOC를 작성할 수 있습니다.

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

const withNoSSR = (Component: React.FunctionComponent) => dynamic(
    () => Promise.resolve(Component),
    { ssr: false },
);

export default withNoSSR;

다음으로 다음과 같이 사용합니다.

import React from 'react';
import withNoSSR from './withNoSSR';

function SomePage() {
    return (
        <div>Only renders in the browser</div>
    );
}

// wrap with HOC on export
export default withNoSSR(SomePage);

또 하나의 간단한 해결책은 그냥 사용하는 것이라고 생각합니다.process.browser이는 클라이언트 측에서 실행되는 경우에만 해당됩니다.

<div>
  {
    process.browser && <Hidden />
  }
</div>

언급URL : https://stackoverflow.com/questions/53139884/next-js-disable-server-side-rendering-on-some-pages