서버 렌더링 된 React에서 비동기 API를 다루는 것-JS 튜토리얼-php.cn

Dealing with Asynchronous APIs in Server-rendered React 키 포인트 요약

RECT 코드의 서버 측 렌더링은 로딩 시간을 줄이고 SEO 유연성을 향상시키는 데 도움이되지만 필요한 데이터를 알기 전에 응용 프로그램을 렌더링해야하기 때문에 비동기 API를 처리 할 수 있습니다. JS, Redux Connect 및 React-Frontload와 같은 기존 솔루션은 서버 렌더링 된 React Code에서 비동기 API를 다룰 때 고유 한 장점과 단점이 있습니다.

는 두 가지 서버 측 렌더링을 수행하여 맞춤형 솔루션을 구현할 수 있습니다. 처음으로 API 호출 및 비동기 작업을 처리하고 두 번째로 최종 페이지 렌더링에 획득 데이터를 사용합니다.

사용자 정의 솔루션은 프리 페치, 사후 페치, 사전 렌더 및 백엔드 렌더링을 포함하여 구성 요소의 여러 상태를 신중하게 처리해야합니다. 이는 구성 요소 코드의 진술을 통해 달성 할 수 있습니다.

사용자 정의 솔루션은 또한 페이지 요청의 일부로 프리 페치 된 데이터를 보내려면 index.html 파일을 변경하고 검색 및 교체에 추가해야합니다. 스크립트 태그를 사용하는 경우 Base-64 인코딩이 필요합니다.

기본 React 앱 페이지를 만든 경우 특히 느린 장치에서 SEO 및 성능 문제가 발생할 수 있습니다. 기존 웹 서버 렌더링 (보통 Nodejs 사용)을 추가 할 수 있지만 특히 비동기 API를 다룰 때는 쉬운 프로세스가 아닙니다.

서버 측 렌더링 코드의 두 가지 주요 이점은 다음과 같습니다.

속도를 높이고 로딩 속도 SEO 유연성 향상

Google은 JavaScript가로드 될 때까지 기다릴 것이므로 제목 콘텐츠와 같은 간단한 콘텐츠는 문제없이 변경됩니다. (그래도 다른 검색 엔진에서 어떤 일이 일어나는지 또는 이것이 얼마나 신뢰할 수 있는지 말할 수 없습니다.)

이 기사에서는 서버 렌더링 된 React 코드를 사용할 때 비동기 API에서 데이터를 얻는 방법에 대해 논의합니다. React Code에는 JavaScript에 내장 된 전체 애플리케이션 구조가 있습니다. 즉, 컨트롤러가있는 기존 MVC 모드와 달리 애플리케이션이 렌더링되기 전에 필요한 데이터를 알 수 없습니다. React App 만들기와 같은 프레임 워크를 사용하면 고품질 작업 애플리케이션을 신속하게 만들 수 있지만 클라이언트 측에서만 렌더링을 처리해야합니다. 여기에는 SEO/데이터 문제뿐만 아니라 필요에 따라 헤더를 변경할 수있는 SEO/데이터 문제가 있습니다.

질문

반응은 주로 렌더링을 동기화하므로 데이터가없는 경우로드 화면이 렌더링되고 데이터가 도착하기를 기다립니다. 렌더링하기 전에 필요한 것이 무엇인지 알지 못하거나 필요한 것을 알고 있기 때문에 서버 측에서는 잘 작동하지 않지만 렌더링했습니다.

이 표준 렌더링 방법을보기 :

질문 :

이것은 루트 요소를 찾는 DOM 렌더링입니다. 이것은 내 서버에 존재하지 않으므로 분리해야합니다.

우리는 기본 루트 요소 외부의 어떤 것에도 액세스 할 수 없습니다. Facebook 태그, 제목, 설명, 다양한 SEO 태그를 설정할 수 없으며 요소 외부의 나머지 DOM을 제어 할 수 없습니다.

우리는 일부 상태를 제공하지만 서버와 클라이언트는 다른 상태를 가지고 있습니다. 이 상태를 다루는 방법을 고려해야합니다 (이 경우 Redux).

그래서 나는 여기에 두 개의 라이브러리를 사용했는데 매우 인기가 있기 때문에 사용하는 다른 라이브러리에 적용될 수 있기를 바랍니다.

redux : 스토리지 서버 및 클라이언트 동기화 상태는 악몽 문제입니다. 매우 비싸고 종종 복잡한 오류로 이어집니다. 서버 측에서 이상적으로는 일을 작동시키고 올바르게 렌더링하기에 충분하다는 점을 제외하고는 Redux로 아무것도하고 싶지 않습니다. (평소와 같이 사용할 수 있습니다. 클라이언트처럼 보이기에 충분한 상태를 설정하십시오.) 시도하려면 다양한 분산 시스템 가이드를 시작점으로 확인하십시오.

React-Router : fyi, 이것은 V4 버전이며, 기본 설치 버전이지만 기존 프로젝트를 구식으로 사용하는 경우 매우 다릅니다. 서버 측 및 클라이언트 측에서 라우팅을 처리하고 V4를 사용해야합니다. 이와 관련하여 우수합니다.

결국 데이터베이스 호출을해야한다면 어떻게해야합니까? 이것은 비동기식이며 구성 요소 내부에 있기 때문에 갑자기 큰 문제가됩니다. 물론 이것은 새로운 질문이 아닙니다. 공식 React 저장소에서보기.

필요한 의존성을 결정하기 위해 렌더링해야합니다 (런타임시 의존성을 결정해야하며 클라이언트에게 제공되기 전에 이러한 종속성을 얻으려면

기존 솔루션

아래에서 이 문제에 대한 현재 제공된 솔루션을 검토하겠습니다.

~~next.js~~

우리가 시작하기 전에, 다음 .js는 제작 환경에 서버 측 렌더링 된 React 코드 또는 범용 애플리케이션을 원한다면 귀하에게 이상적입니다. 효과적이고 간결하며 Zeit 지원이 있습니다.

그러나 그러나, 그것은 의견이 있습니다. 툴체인을 사용해야하며 비동기 데이터 로딩을 처리하는 방식이 반드시 유연한 것은 아닙니다.

다음 컨텐츠 의이 직접 사본보기 다음 .js 리포지토리 문서 :

는 열쇠이며, 소품으로 채워진 물체로 해결하고 페이지에만 약속을 반환합니다. 무엇보다도, 이것은 툴체인에 단지 내장되어 있습니다. 어떤 일도하지 않고 작업에 추가하십시오!

그렇다면 데이터베이스 데이터를 얻는 방법은 무엇입니까? 당신은 API 호출을합니다. 당신은 원하지 않습니까? 좋아, 끔찍 해요. (좋아요, 사용자 정의 콘텐츠를 추가 할 수는 있지만 직접 구현해야합니다.) 그러나 생각하면 매우 합리적이고 일반적으로 좋은 관행입니다. 그렇지 않으면 클라이언트가 여전히 동일한 API 전화가 만들어지기 때문입니다. 서버의 대기 시간은 거의 무시할 수 있습니다.

액세스 할 수있는 것은 제한되어 있습니다 - 거의 요청 객체에 불과합니다. 이는 서버와 클라이언트에서 본질적으로 다른 상태에 액세스 할 수 없기 때문에 좋은 관행입니다. 아, 그리고 이전에 눈치 채지 못했다면, 그것은 최상위 페이지 구성 요소에서만 작동합니다.

redux connect

Redux Connect는 좋은 아이디어를 가진 매우 의견이 많은 서버 측 렌더러이지만 설명하는 모든 도구를 사용하지 않는 경우에는 해당되지 않을 수 있습니다. 이 패키지에는 많은 콘텐츠가 있지만 매우 복잡하고 Router V4에 반응하여 업그레이드되지 않았습니다. 많은 설정이 있지만 몇 가지 교훈을 배우기 위해 가장 중요한 부분을 살펴 보겠습니다.

데코레이터는 JavaScript에서 표준이 아닙니다. 글을 쓰는 시점에서는 2 단계에 있으므로주의해서 사용하십시오. 이것은 고차 컴포넌트를 추가하는 또 다른 방법 일뿐입니다. 아이디어는 간단합니다. 핵심은 소품으로 전달되는 것입니다. 그런 다음 구문 분석하고 전달할 일련의 약속이 있습니다. 이것은 좋아 보인다. 아마도 또 다른 옵션은 다음과 같습니다.

이것은 너무 많은 문제없이 JavaScript로 수행 할 수 있습니다.

반응-프론트로드 RECT-FRONTLOAD 저장소에는 문서 나 설명이 많지 않지만, 내가 얻을 수있는 최상의 이해는 테스트 (예 :이 것과 같은)와 소스 코드를 읽음에서 비롯 될 수 있습니다. 무언가가 장착되면 약속 대기열에 추가되며 대기열이 구문 분석되면 제공됩니다. 잘 문서화, 유지 관리 또는 사용되지 않는 것을 추천하기는 어렵지만 매우 좋습니다.

ReactDOM.render(
  <provider> store={store}></provider>
    <browserrouter></browserrouter>
      <app></app>
    >
  >
, document.getElementById('root')
)

로그인 후 복사

더 나은 솔루션을 찾고있는

<<> 위의 솔루션 중 어느 것도 라이브러리의 유연성과 단순성에 대한 나의 기대에 실제로 맞지 않으므로 이제 내 자신의 구현을 소개 할 것입니다. 목표는 패키지를 작성하는 것이 아니라 유스 케이스를 기반으로 자신의 패키지를 작성하는 방법에 대한 아이디어를 제공하는 것입니다.

이 예제 솔루션의 저장소는 여기에 있습니다.

import React from 'react'
export default class extends React.Component {
  static async getInitialProps ({ req }) {
    return req
      ? { userAgent: req.headers['user-agent'] }
      : { userAgent: navigator.userAgent }
  }
  render () {
    return <div>
      Hello World {this.props.userAgent}
    </div>
  }
}

로그인 후 복사

이론 <🎜 🎜> 그 뒤에있는 아이디어는 비교적 간단하지만 결국 많은 코드를 생성 할 것입니다. 이것은 우리가 논의하고있는 아이디어를 설명하는 것입니다.

> 서버는 반응 코드를 두 번 렌더링해야하며,

만 사용합니다. 첫 번째 렌더링과 두 번째 렌더링 사이의 상황을 유지하고 싶습니다. 첫 번째 렌더링에서 우리는 API 호출, 약속 및 비동기 작업을 제거하려고 노력했습니다. 두 번째 렌더링에서 우리는 우리가 얻는 모든 데이터를 가져 와서 컨텍스트로 다시 넣고 작업 페이지를 배포하기 위해 렌더링하려고합니다. 이는 또한 애플리케이션 코드가 서버 나 브라우저에 있는지 여부 및 데이터가 가져 오는지 여부와 같은 컨텍스트 (또는 작업을 수행하지 않음)를 기반으로 작업을 수행해야 함을 의미합니다.

또한 필요에 따라 사용자 정의 할 수 있습니다. 이 경우 컨텍스트에 따라 상태 코드 및 헤더를 변경합니다.

첫 번째 렌더링

<,> 코드에서 서버에서 작업 중인지 또는 브라우저에서 작업 중인지 알아야합니다. 이상적으로는 복잡한 제어를 원합니다. React 라우터를 사용하면 정적 컨텍스트 소품을 얻을 수 있습니다. 현재 우리는 Data Object를 추가하고 데이터를 요청하고 있습니다. API는 서버와 클라이언트마다 다르므로 클라이언트 API와 유사한 인터페이스를 갖는 것이 더 나은 서버 API를 제공해야합니다.

두 번째 렌더 <🎜 🎜> 첫 번째 렌더링 후, 우리는 계류중인 약속을 받고 이러한 약속이 완료 될 때까지 기다렸다가 다시 렌더링하고 컨텍스트를 업데이트합니다.

ReactDOM.render(
  <provider> store={store}></provider>
    <browserrouter></browserrouter>
      <app></app>
    >
  >
, document.getElementById('root')
)

로그인 후 복사

앱 <🎜 🎜> 서버에서 애플리케이션 코드로 빠르게 이동 : 라우터 연결이있는 구성 요소에서는 지금 얻을 수 있습니다.

와우, 복잡한 코드가 많이 있습니다. 이 단계에서는 데이터 페치 코드를 다른 구성 요소로 분리하는보다 릴레이 된 접근 방식을 취할 수 있습니다.

이 구성 요소는 렌더링 단계와 <🎜 🎜> 단계에 익숙 할 수있는 구성 요소로 구성됩니다. 4 단계 인 경우 진술이 다른 상태 (예약, 사후 렌더 및 백엔드 렌더링을 처리합니다. 또한로드 된 후 헤더에 데이터를 추가합니다.

마지막으로 데이터를 얻기위한 또 다른 단계가 있습니다. 이상적으로는 API와 데이터베이스가 동일한 API를 가지므로 실행이 동일합니다. 당신은 이것들을 펑크 나 사가 (Saga)의 행동에 넣어 더욱 확장 가능하게 만들고 싶을 수도 있습니다.

< "> 더 많은 정보를 위해"서버 반응 렌더링 "및 저장소 반응 서버 렌더링 기사를 봅니다. 데이터가로드되지 않은 상태를 여전히 처리해야합니다! 첫 번째로드시 서버 측 렌더링 만 수행하므로 후속 페이지에로드 화면이 표시됩니다.

import React from 'react'
export default class extends React.Component {
  static async getInitialProps ({ req }) {
    return req
      ? { userAgent: req.headers['user-agent'] }
      : { userAgent: navigator.userAgent }
  }
  render () {
    return <div>
      Hello World {this.props.userAgent}
    </div>
  }
}

로그인 후 복사

index.html을 변경하여 데이터를 추가하여 <🎜

를 추가하십시오 페이지 요청의 일부로 프리 페치 된 데이터를 보내야하므로 스크립트 태그를 추가합니다.

서비스 <🎜 🎜> 그런 다음 검색 및 교체에 추가해야합니다. 그러나 HTML은 매우 기본적인 스크립트 태그 파인더를 사용하므로 스크립트 태그가있는 경우 64를 인코딩해야합니다. 또한 헤드 레이블을 잊지 마십시오!

// 1. 连接您的数据，类似于 react-redux @connect
@asyncConnect([{
  key: 'lunch',
  promise: ({ params, helpers }) => Promise.resolve({ id: 1, name: 'Borsch' })
}])
class App extends React.Component {
  render() {
    // 2. 将数据作为 props 访问
    const lunch = this.props.lunch
    return (
      <div>{lunch.name}</div>
    )
  }
}

로그인 후 복사

우리는 또한 상태 코드 변경을 처리합니다 - 예를 들어 404의 경우 - 404 페이지가 있으면 다음을 수행 할 수 있습니다.

요약

당신이 무엇을하고 있는지 잘 모르면 다음에 사용하십시오. 서버 측 렌더링 및 범용 응용 프로그램을 위해 설계되었거나 모든 것을 수동으로 수행 할 수있는 유연성을 원한다면 원하는 방식으로 수행 할 수 있습니다. 예를 들어 페이지 수준이 아닌 아동 구성 요소에서 데이터 가져 오기를 수행하는 것이 포함될 수 있습니다. componentWillMount

이 기사가 당신이 시작하는 데 도움이되기를 바랍니다! 실행 가능한 구현을 위해 Github 저장소를 확인하는 것을 잊지 마십시오.

비동기 API 및 서버 측 렌더링 반응에 대한 FAQS (FAQS)

RECT의 서버 측 렌더링과 클라이언트 측 렌더링의 차이점은 무엇입니까?

SSR (Server-Side Rendering) 및 클라이언트 측 렌더링 (CSR)은 웹 페이지를 렌더링하는 두 가지 방법입니다. SSR에서 서버는 요청에 응답하여 페이지의 전체 HTML을 생성 한 다음 클라이언트로 보냅니다. 이로 인해 초기 페이지로드 시간이 빠르며 SEO에 유리합니다. 그러나 전체 페이지가 각 요청에 따라 렌더링되어야하므로 페이지 변환이 느려질 수 있습니다. 반면에 CSR은 JavaScript를 사용하여 브라우저에서 렌더링이 수행됨을 의미합니다. 이로 인해 초기 페이지로드 시간이 느려 지지만 필요한 구성 요소 만 재 렌더링해야하므로 페이지 변환이 더 빠릅니다.

클라이언트가 렌더링 한 RECT 응용 프로그램에서 서버 측 요청을하는 방법은 무엇입니까?

클라이언트 측 렌더링 된 RECT 응용 프로그램에서 서버 측 요청을 만들려면 Fetch API 또는 Axios와 같은 라이브러리를 사용할 수 있습니다. 함수 구성 요소를 사용할 때

라이프 사이클 방법 또는

후크에서 요청을 할 수 있습니다. 그런 다음 응답을 상태로 설정하고 구성 요소에 사용할 수 있습니다.

내 글로벌 변수가 반응에서 두 번 실행되는 이유는 무엇입니까?

이것은 반응 배치 상태 업데이트 방식 때문일 수 있습니다. React 구성 요소 내에서 글로벌 변수를 업데이트하면 componentDidMount의 비동기 특성으로 인해 두 번 업데이트 될 수 있습니다. 이를 피하기 위해 useEffect의 함수 양식을 사용할 수 있으며, 이는 상태 업데이트가 현재 상태가 아닌 이전 상태를 기반으로합니다.

서버 측 렌더링 된 React에서 비동기 API를 사용하는 방법은 무엇입니까?

서버 측 렌더링 된 React에서 비동기 API를 사용하려면 서버 측 코드에서

구문을 사용할 수 있습니다. 이를 통해 페이지를 렌더링하기 전에 API 응답을 기다릴 수 있습니다. Axios와 같은 라이브러리를 사용하여 API 요청을 할 수 있습니다.

RECT에서 서버 측 렌더링의 이점은 무엇입니까? setState 서버 측 렌더링은 React에 많은 이점이 있습니다. 초기 페이지로드 시간을 향상시켜 사용자 경험이 향상 될 수 있습니다. 또한 검색 엔진 크롤러가 서버 측 렌더링 컨텐츠를보다 쉽게 색인 할 수 있기 때문에 SEO를 향상시킵니다. 또한 동일한 코드가 서버와 클라이언트 모두에서 실행되므로보다 일관된 초기 상태를 허용합니다. setState 서버 렌더링 된 React에서 비동기 API를 사용할 때 오류를 처리하는 방법은 무엇입니까?

블록을 사용하여 비동기 기능에서 오류를 처리 할 수 있습니다. 이를 통해 API 요청을 작성할 때 발생하는 오류를 캡처하고 오류 메시지 렌더링과 같이 적절하게 처리 할 수 있습니다.