다음 단계에서 SSR을 비활성화하는 방법을 알아봅니다.js 를 사용하여 Create React 응용 프로그램이나 사용자 정의 도구를 대체합니다.
다음.js는 내가 가장 좋아하는 React 응용 프로그램을 개발하는 도구이다.그것은 당신에게 일류의 개발자 체험을 제공합니다.또한 생산성을 높이고 애플리케이션 생산성을 최적화하는 데 유용한 기능도 많이 있습니다.

정적 및 서버 렌더링

유형 스크립트는

지원

다중 입구점

단 분열과 나무 흔들기

그러나 과거에는 모든 React 애플리케이션에서 사용하고 싶지 않았습니다.다음.기본적으로 서버 쪽 렌더링 (SSR) 이 없으면 js가 작동하지 않습니다.내 응용 프로그램이 SSR을 필요로 하지 않을 때 나는 비SSR 솔루션, 예를 들어Create React App을 사용하는 것을 더 좋아한다. 왜냐하면 SSR은 나에게 너무 많은 불필요한 문제를 가져왔기 때문이다.
그러던 어느 날 리액트 큐리의 저자 태너 린슬리(Tanner Linsley)가 트위터에 그가 쓰고 있다는 다음 소식을 올렸다.js는 Create React 애플리케이션을 SSR로 대체하지 않습니다.

탄나 린슬리⚛️

오늘 나는 (building's SPA를 위한) 여정에 한 걸음 더 나아갔다.🔽 사용자 정의 웹 패키지🔽 React 애플리케이션 작성🔽 정적 반응🔽 React 애플리케이션 작성🔽 CLI 설명✅ 다음.js+ 리셋 + 반응 공유기 v6Turns out 다음 단계는💯/💯, 색인만 필요해도.js!아마존
2020년 9월 9일 오후 22:13
나는 격노했다!약간의 연구를 거쳐 나 자신도 이 점을 할 수 있다.🤯

다음 단계에서 SSR을 비활성화하는 이유는 무엇입니까?js？

경우에 따라 React 애플리케이션의 SSR이 필요합니다.

이 앱의 내용은 검색결과(SEO)에서 상위권에 랭크되어야 한다.

소셜미디어 미리보기(페이스북, 트위터, 슬랙 등)가 필요합니다.

은 사용자에게 추가적인 속도 최적화를 제공해야 합니다.

그러나 SSR을 사용하면 다음과 같은 여러 가지 이점과 과제가 있습니다.

너는 복잡한 위탁 관리 환경이 필요하다.프로그램만 서버나 CDN에 업로드할 수 없습니다.노드가 하나 필요합니다.js 서버가 서버 사이드를 렌더링합니다.이것은 복잡성을 증가시키고 원가도 증가시켰다.

브라우저와 서버 (Node.js) 에서 코드가 유효한지 확인해야 합니다.이것은 디버깅을 더욱 어렵게 합니다. 어떤 경우에는 당신을 제한할 수도 있습니다.예를 들어localStorage를 사용하여 권한 수여 정보를 저장할 수 없지만 이를 쿠키에 전달하고 서버와 브라우저에서 작업하는 쿠키 라이브러리를 사용해야 한다.

A-P Koponen

나는 대략 1-2일의 시간을 들여 Next로 Sentry를 설치하고 디버깅하려고 시도했다.제이스는 지금 Zeit에 있습니다.SSR이 없거나 서버가 없는 경우 < 1시간서버 없음 + 반응 SSR!="즉시 사용 가능"
2020년 2월 20일 오전 11:09

그것은 응용 프로그램 구조에 영향을 줄 것이다.예를 들어, 서버 측 렌더링은 단일 렌더링에서 수행해야 하므로 페이지의 모든 데이터(예: getInitialProps)를 단일 위치에서 가져와야 합니다.이 요구 사항은 Redux나 React Query 등의 라이브러리를 사용하여 데이터를 얻는 것을 복잡하게 하고 코드가 중복되는 경우가 많습니다.

만약 당신이 SSR을 필요로 하지 않는다면, 이러한 균형은 가치가 없다.기본적으로, 로그인 후 모든 사용자 인터페이스에 SSR을 사용하지 않는 것을 고려해야 한다.

Heuristic: If your app is behind a login, you likely should disable SSR.

다음 단계에서 SSR을 비활성화하는 방법js？

SSR을 비활성화하는 다음 단계를 살펴보겠습니다.js 응용 프로그램 (npx create-next-app으로 만들기).

1단계: 모든 요청을 페이지/인덱스로 다시 씁니다.js

다음.js는 adding redirects을 지원합니다.프로젝트의 루트 디렉터리에 next.config.js이라는 파일을 만듭니다.여기에 다음 구성을 추가합니다.

module.exports = {
  target: "serverless",
  async rewrites() {
    return [
      // Rewrite everything to `pages/index`
      {
        source: "/:any*",
        destination: "/",
      },
    ];
  },
};

이런 재정비는 개발 환경에서만 작용한다.생산 과정에서 NGINX와 같은 프록시 서버를 사용하거나 관리 플랫폼의 기능(예를 들어 Netlify's redirects)을 사용하여 이러한 방향을 바꾸어야 합니다.

2단계: 페이지 컨텐트에 대한 SSR 비활성화

페이지 컨텐트에 대한 SSR을 비활성화하려면 다음 코드를 pages/_app.js에 추가해야 합니다.

import '../styles/globals.css'

function SafeHydrate({ children }) {
  return (
    <div suppressHydrationWarning>
      {typeof window === 'undefined' ? null : children}
    </div>
  )
}

function MyApp({ Component, pageProps }) {
  return <SafeHydrate><Component {...pageProps} /></SafeHydrate>
}

export default MyApp

위 코드에서, 우리는 페이지 내용을 SafeHydrate이라는 구성 요소로 포장하는데, 이 구성 요소는 서버에 페이지 내용이 나타나지 않도록 합니다.위 코드에서 무슨 일이 일어났는지 봅시다.
다음.js 당신은 window 대상이 undefined인지 확인하여 서버에 있는지 확인할 수 있습니다.

if(typeof window === 'undefined') {
  // This code will only execute on the server 
  // and not in the browser
}

그러나 우리는 코드를 이 if-문장에 직접 포장할 수 없다.시도해 보면, React가 컨트롤러에 짜증나는 경고를 생성합니다: Warning: Expected server HTML to contain a matching <div> in <div>. 서버 HTML이 브라우저와 다른 내용을 보여주면 이런 상황이 발생합니다.
우리의 예에서 이 경고를 무시하는 것은 안전하다.깔끔하게 유지하기 위해서, 우리는 컨트롤러의 경고를 완전히 숨기기를 바란다.이것은 아이템 suppressHydrationWarning 렌더링 div를 사용하여 실현할 수 있습니다.가독성을 높이기 위해, 우리는 이를 위해 별도의 SafeHydrate 구성 요소를 만들고, 페이지 구성 요소를 포장합니다.

3단계:npm run dev 모든 것이 정상인지 확인

현재 터미널에서 npm run dev을 실행하고 있습니다.서버가 http://localhost:3000/으로 실행되면 모든 URL(예: http://localhost:3000/some/random/path)으로 이동하여 색인 내용을 볼 수 있어야 합니다.저기 있다.

성공!🎉

4단계: 다음 내보내기로 프로덕션 번들 구성

우리는 노드가 없는 상황에서 서비스를 제공할 수 있는 정적 패키지로 프로그램을 배치하기를 희망합니다.js 서버.이것을 위해서, 다음.js에서 명령 next export을 제공합니다.이것은 out 디렉터리에 응용 프로그램의 정적 버전을 만들 것입니다.
이 명령을 사용하려면 package.json의 빌드 스크립트를 다음과 같이 업데이트합니다.

"scripts": {
  ...
  "build": "next build && next export"
  ...
}

현재 npm run build이 운행되고 있습니다.메시지 Export successful을 보았을 때 축하합니다!너는 지금 업무 상태가 하나 생겼다.js 응용 프로그램은 out 디렉터리에 있습니다.🎉
전체 예제 애플리케이션은 this Github repository에서 볼 수 있습니다.

라우팅 및 기타 고급 기능에 대한 설명

경로

다음.실행 서버가 없으면 js는 동적 루트를 지원하지 않습니다.react-router 같은 공유기가 필요합니다.이 설정은 다른 도구(예: Create React App)의 설정과 같습니다.

<title> 및 기타 <head> 태그 업데이트

react-helmet과 같은 내용을 추가하여 head을 업데이트할 필요가 없습니다.js <Head /> 구성 요소가 정상적으로 작동합니다.

여러 개의 독립된 페이지가 있다

만약 네가 원한다면, 너는 여전히 Next를 사용할 수 있다.js 페이지는 여러 개의 다른 페이지를 응용 프로그램의 단독 입구점으로 합니다.이것은 모든 노선의 패키지를 더욱 작게 하고 개발 환경을 가속화시킬 것이다. 왜냐하면 변경할 때 응용 프로그램의 일부분만 생성하기 때문이다.
예를 들어, 페이지 /accounts이 있는 경우 파일 pages/account.js을 생성하고 재작업을 추가할 수 있습니다.

module.exports = {
  target: "serverless",
  async rewrites() {
    return [
      // Rewrite everything under `/account/ to `pages/account`
      {
        source: "/account/:any*",
        destination: "/account",
      },
      // Rewrite everything else to `pages/index`
      {
        source: "/:any*",
        destination: "/",
      },
    ];
  },
};

Next 를 사용하는 것과 다릅니다.js getStaticProps와 GetStaticPath?

getStaticProps 및 getStaticPaths을 사용하여 정적 사이트 생성(SSG)을 수행할 수 있습니다.이것은 .html을 실행할 때 프로그램의 모든 페이지가 하나의 npm run build 파일로 생성된다는 것을 의미한다.
SSG는 매우 훌륭하지만, 매우 큰 제한이 있다. 응용 프로그램의 모든 경로를 미리 알아야 한다.많은 사용자별 경로(예: /my-payments/123121521241)를 가진 응용 프로그램에서는 불가능하다.
본고에서 기술한 방법을 사용하면 동적 공유기(예를 들어 react-router)를Next와 함께 사용할 수 있습니다.js는 React 프로그램이나 전통적인 단일 페이지 프로그램을 만드는 것과 같다.

추가 리소스:

This wonderful gist by @tannerlinsley