Next.js: 최소한의 아폴로 예

몇 가지 관찰 사항: 이 접근 방식은 발생하는 모든 graphql 쿼리를 로드하기 위해 구성 요소에 깊이 들어가지 않습니다(반응 아폴로로 서버 측을 활성화할 수 있는 것).

나는 이것이 next.js에서 약간 문제가 있다고 생각합니다. 클라이언트와 서버 측 모두에서 발생하기를 원한다면 구성 요소 계층 구조에서 데이터를 깊숙이 로드할 의도가 아닙니다. 데이터를 로드할 지점은 루트 구성 요소의 getInitialProps에 하나만 있습니다. 이것이 미래에 바뀔지는 모르겠지만, 그렇지 않다면 우리는 해야 할 것입니다.

1. 처음부터 페이지에 대한 모든 관련 데이터를 로드하도록 앱을 구성하거나
2. 다른 전략을 사용하여 클라이언트에만 있는 데이터의 일부(즉, getInitialProps에서 로드하지 않은 모든 것)

두 경우 모두 위의 접근 방식은 getInitialProps에 로드되는 데이터에 적합해야 합니다.

그리고 일부 핵심 개발자가 이것을 좋아한다면 예제로 풀 리퀘스트를 생성할 수 있습니다.

루트에서만 호출되는 getInitialProps에 대해서는 https://github.com/zeit/next.js/issues/192를 참조하세요. 거기에 당신의 아이디어를 갖고 싶습니다.

@sedubois react-apollo 에 어떤 문제가 있었나요?

@nmaro 귀하의 https://github.com/nmaro/apollo-next-example 이 비어 있습니다.

@amccloud 에 이에 대해 @nmaro 에게 물어보는 것이 좋습니다(나는 여전히 코드로 돌아가야 합니다).

@sedubois 감사합니다. 이제 온라인 상태가 되었습니다(처음에는 push push origin master 을 실행하는 것을 잊지 마십시오).

앗, 제가 엉뚱한 사람을 언급했습니다. @nmaro react-apollo에 어떤 문제가 있었나요?

데이터가 서버에 로드된 다음 클라이언트가 로드를 시작하자마자 페이지가 다시 비어 있었습니다. 그런 다음 @sedubois 의 구현(https://github.com/RelateMind/relate)을 보고 빠른 개념 증명을 위해 이미 상당히 복잡하다고 생각하여 마침내 하위 수준 API로 시도했습니다.

@stubailo apollo를 next.js와 통합하는 것이 왜 그렇게 어려운지 궁금하기 때문에 - 클라이언트와 서버 모두에서 데이터를 가져올 수 있는 유일한 장소는 getInitialProps라는 비동기 함수 내부의 페이지 루트 구성 요소인 것 같습니다. react-apollo를 통합하는 일반적인 방법은 클라이언트 측에서만 유용할 것이라고 생각합니다.

흥미롭습니다. Next.js와 다른 데이터 통합이 있습니까? 내가 본 예제를 기반으로 Redux를 사용하는 것도 꽤 어려운 것 같습니다.

대부분의 최신 데이터 시스템에는 일종의 전역 캐시(Redux, Apollo, Relay)가 있으므로 이를 활성화하려면 Next에 일종의 시설이 필요하다고 생각합니다.

글로벌 캐시(Redux, Apollo, Relay)가 있는 최신 데이터 시스템에서 Next.js가 더 잘 작동하도록 하려면 어떻게 해야 할까요? 이것이 다음 릴리스의 큰 우선 순위가 되어야 한다고 생각합니다. @stubailo @rauchg

전적으로. Wiki에 Redux 예제가 있습니다. 이와 유사한 예제를 더 만들어야 합니다. :)

릴리스 기준으로 해야 하는 것은 아닙니다. btw. 우리는 언제든지 위키 튜토리얼을 작성할 수 있습니다.

Btw @nmaro 그 예제는 정말 깔끔해 보입니다. 기여해 주셔서 감사합니다. 우리는 그것을 기반으로 삼고 확장할 수 있습니다.

오, 이상합니다. 관련된 문제를 깨닫지 못했습니다. @nmaro 상황을 어렵게 만드는 react-apollo는 무엇입니까? redux 예제를 거의 정확하게 따를 수 있어야 하지만 createStore 를 사용하는 new ApolloClient 를 수행하고 Provider ApolloProvider 를 사용할 수 있어야 합니다.

누군가와 함께 최소한의 예를 만들고 싶습니다. 이것은 React에 대한 "hello world" 예입니다. Next.js에 대한 포트가 있으면 좋을 것입니다. https://github.com/apollostack/frontpage-react-app

@stubailo 최소한의 예제로 당신과 함께 일하고 싶습니다. 저는 몇 가지 프로젝트를 위해 범용 apollo 마이크로프레임워크인 Saturn을 사용해 왔으며 궁극적으로 이를 Next.js + Apollo로 이식하고 싶습니다. :)

좋아요 - 예, create-react-app 대신 next.js에서 실행되도록 프론트페이지 앱을 최소한으로 수정하는 것이 제 취향입니다. 그러면 저희 홈페이지에도 등록할 수 있습니다!

@스투바일로

작은 문제는 데이터가 서버에서 로드 및 렌더링되었지만 클라이언트에서 로드할 때 아무것도 교체되지 않는다는 것입니다. apollo-client를 직접 사용하면 이 문제가 발생하지 않았습니다.

서버 렌더링에서 더 까다로운 것은 계층 구조에 더 깊은 쿼리가 있는 경우입니다. React에는 비동기식으로 렌더링하는 방법이 없습니다. 즉, 렌더링하기 전에 각 구성 요소가 준비될 때까지 기다립니다. 이는 ssr 프레임워크가 다음 중 하나를 수행해야 함을 의미합니다.

1. 전체 구성 요소 트리를 두 번, 한 번은 데이터를 로드하고 한 번은 렌더링합니다.
2. 루트에 비동기 진입점 제공 - 이것은 getInitialProps를 사용한 next.js 접근 방식입니다.

이제 문제는 apollo가 구성 요소 트리를 렌더링하는 데 필요한 모든 데이터 호출을 감지하고 getInitialProps에 제공할 수 있는 하나의 함수 호출에서 이 모든 작업을 수행하는 방법이 있는지 여부입니다.

@stubailo 이것에 대한 해결책이 있습니까? ^^

@nmaro @ads1018 getDataFromTree 보셨나요? 내 예에서 사용된 것처럼: https://github.com/RelateMind/relate/blob/master/hocs/apollo.js

BTW 이제 https://github.com/zeit/next.js/pull/301 이 병합되어 일이 간소화될 수 있는지 궁금합니다. 아직 그것에 대해 조사하지 않았습니다.

@seduboi 확인했습니다 공유해주셔서 감사합니다! 네, react-apollo를 사용하는 예제는 방금 Master에 병합된 새로운 프로그래밍 방식 API(#301)를 사용하여 단순화할 수 있다고 생각합니다. 따라서 모든 페이지 구성 요소를 고유한 HOC로 래핑할 필요가 없습니다. 이에 대해 진전이 있으면 알려주세요! apollo 홈페이지에서 next.js 예제를 얻을 수 있으면 좋겠습니다 :)

NB @ads1018 https://github.com/zeit/next.js/pull/301 은 Programmatic API가 아닌 CommonsChunkPlugin으로 공통 코드를 추출하는 것입니다. 그러나 예, 프로그래밍 방식 API도 분명히 도움이 될 것이며 출시되기를 고대하고 있습니다.

새로운 2.0.0-beta.2 릴리스와 함께 react-apollo를 사용하는 행운을 얻은 사람이 있습니까?

@sedubois @stubailo 보고 싶으시다면 next + react-apollo에 대한 시도를 미뤘습니다. 여기에서 찾을 수 있습니다: https://github.com/ads1018/frontpage-next-app

내가 지금 직면하고 있는 한 가지 문제는 구성 요소가 서버 측이 아닌 클라이언트 측에서만 렌더링된다는 것입니다. 아마도 server.js 내에서 react-apollo의 getDataFromTree 메소드를 사용할 수 있을까요? 아니면 우리 고유의 <document> 내부에 있습니까? 모든 제안/풀 리퀘스트를 환영합니다!

궁극적으로 이 hello world 예제를 Next examples 폴더와 Apollo 홈 페이지에 포함하고 싶습니다.

데이터를 서버에서 렌더링하기 위한 유일한 전제 조건은 재정의할 필요 없이 getInitialProps 의 개체로 반환된다는 것입니다.

잡았다. @nmaro 가 지적했듯이 반응 아폴로에서는 이것이 약간 어렵다고 생각합니다.

문제는 apollo가 구성 요소 트리를 렌더링하는 데 필요한 모든 데이터 호출을 감지하고 getInitialProps에 제공할 수 있는 하나의 함수 호출에서 이 모든 작업을 수행하는 방법이 있는지 여부입니다.

갓차

@ads1018 조금 파고들면 최상위 구성 요소 가 getInitialProps에 노출된 경우 Apollo 도우미 를 사용하여 문자열로 렌더링할 수 있습니다.

그러면 _document는 다음과 같을 것입니다.

export default class MyDocument extends Document {
  static async getInitialProps ({ app }) {
    const wrapped = React.createElement(ApolloProvider, { client }, app)
    const rendered = await renderToStringWithData(wrapped)
    return { html: rendered, initialState: client.store.getState() }
  }

  render () {

    return (
      <html>
        <Head>
          <title>My page</title>
        </Head>
        <body>
          <ApolloProvider client={client}>
            <Main />
          </ApolloProvider>
          <NextScript />
        </body>
      </html>
    )
  }
}

@rauchg renderPage 외에 app 를 노출하는 간단한 변경인 것 같지만 제가 간과하는 것이 있습니까?

@bs1180 아 대박. 내가 찾던 바로 그거야. app 를 노출하는 간단한 변경이 되었으면 합니다. 그것은 즉시 Next를 graphql 클라이언트 친화적 프레임워크로 만들 것입니다.

@bs1180 renderPage 반환 객체 내부에 app 를 노출했습니다. 이것은 당신이 생각한 것과 일치합니까?

@ads1018 정확 하지 않음 - 귀하의 버전에서 render 가 계속 호출되고 있습니다 renderToStringWithData 가 수동으로 호출될 경우 불필요한 중복이 될 것입니다.

나는 이것에 대해 더 많은 작업을 수행했고 최종 결과는 내가 처음 상상했던 것만큼 예쁘지 않습니다. 주로 기본 앱이 <Main /> 구성 요소의 자식으로 렌더링되기 때문입니다(__next div로). 모든 컨텍스트가 위에서 애플리케이션으로 전달되는 것을 방지합니다. 따라서 Apollo 컨텍스트를 다시 추가하려면 여전히 HOC가 필요합니다.

@bs1180 알겠습니다 . <Main /> 를 ApolloProvider 의 자식으로 렌더링하여 컨텍스트를 전달할 수 있습니까?

무슨 말씀인지 모르겠지만 방향이 잘못된 것 같아요. 완벽한 SSR은 HOC만으로 달성할 수 있습니다. 여기에서 시작점으로 자갈이 결합된 버전이 있습니다.

export default (options = {}) => Component => class ApolloHOC extends React.Component {
  static async getInitialProps (ctx) {
    const user = process.browser ? getUserFromLocalStorage() : getUserFromCookie(ctx.req)
    const jwt = process.browser ? null : getJwtFromCookie(ctx.req)

    if (options.secure && !user) {
      return null // skip graphql queries completely if auth will fail
    }

    const client = initClient(jwt)
    const store = initStore(client)

   // This inserts the context so our queries will work properly during the getDataFromTree call,
   //  as well as ensuring that any components which are expecting the url work properly 
    const app = React.createElement(ApolloProvider, { client, store },
      React.createElement(Component, { url: { query: ctx.query }}))

 // this is the most important bit :)
    await getDataFromTree(app)

    const initialState = {[client.reduxRootKey]: {
      data: client.store.getState()[client.reduxRootKey].data
    }}

    return { initialState, user }
  }

  constructor (props) {
    super(props)
    this.client = initClient()
    this.store = initStore(this.client, this.props.initialState)
  }

  render () {
    return (
      <ApolloProvider client={this.client} store={this.store}>
          <Component url={this.props.url} />
      </ApolloProvider>
    ) 
  }
}

initClient 및 initStore 는 redux 예제에서 모델링되었습니다. 모든 페이지는 다음과 같습니다.

import ApolloHOC from '../hoc'
import { graphql } from 'react-apollo'

export default ApolloHOC({ secure: false })(() => <b>Hello world</b>)

유용하기를 바랍니다. 조사할 다른 방법이 있는지, 아니면 제가 간과하고 있는 부분이 있는지 알고 싶습니다.

@bs1180 멋지네요 , 공유해주셔서 정말 유용합니다.

_document.js 내부에 graphql 데이터가 있는 페이지를 렌더링하기 위해 할 수 있는 다른 것이 있습니까? 처음에 제안한 것처럼 HOC를 모두 우회할 수 있다면 좋을 것입니다.

나는 그렇게 생각하지 않습니다 - 내가 볼 수 있는 바에 따르면 클라이언트 측 렌더 는 사용자 정의 _document.js 에서 컨텍스트(Apollo 클라이언트, 표준 Redux 스토어, 테마 등)에 전달되는 모든 것을 제거합니다. Apollo SSR 로직의 일부를 그곳으로 이동할 수 있지만, 컨텍스트에 필요한 객체를 다시 추가하려면 일종의 HOC/래퍼 구성요소가 여전히 필요합니다.
next.js 내부에 대한 더 나은 지식을 가진 사람이 더 나은 아이디어를 가질 수 있습니다.

작업 예제를 얻을 수 있다면 확인하고 싶습니다. 나는 아직도 이것을 작동시키기 위해 싸우고 있다.

React Apollo와 Next의 실제 예제가 있습니다 😄 🚀 많은 분들이 유용하게 사용하셨으면 합니다. 여기에서 확인할 수 있습니다: https://github.com/ads1018/next-apollo-example (나도 Now를 사용하여 데모를 배포했습니다.)

나는 ApolloProvider 로 페이지를 감싸는 withData() 라는 내 페이지 내부의 HOC를 사용하게 되었습니다. 나는 처음에 단일 파일 내에서 한 번이 아니라 페이지당 기반으로 공급자를 사용하여 해제되었지만 가독성과 확장성 면에서 더 낫다는 정말 똑똑한 사람들에 의해 확신했습니다. 나는 실제로 withData(MyComponent) 가 꽤 보기 좋고 독자에게 특정 페이지가 데이터를 가져오는 좋은 컨텍스트를 제공한다고 생각합니다(말장난이 아님).

저를 올바른 방향으로 안내해 주신 @bs1180 과 @rauchg 에게 감사드립니다. with-apollo 예제를 리포지토리에 추가하려면 저에게 알려주시면 pull 요청을 생성할 수 있습니다.

@ads1018 님 감사합니다 😊 제 예제 https://Relate.now.sh 와 비교하여 이 예제는 깊이 중첩된 구성 요소에서 Apollo를 사용하는 문제를 해결합니까(getInitialProps의 캐스케이드 방지)? 아마도 예제는 이것이 주요 문제점이므로 이를 보여주어야 합니다. 그리고 이것을 examples 폴더에 추가하면 매우 감사할 것이라고 확신합니다.

@sedubois #192에서 언급한 오류를 재현할 수 없습니다. 나는 아무 문제없이 중첩 구성 요소 내부에서 Apollo를 사용하고 있습니다. 내 예를 풀고 재현할 수 있다면 알려주시겠습니까?

@ads1018님 , 감사합니다. https://github.com/ads1018/next-apollo-example/issues/2 🎉의 수정 사항으로 문제가 해결되었습니다. 내 예제도 업데이트했습니다. https://github.com/RelateNow/relate

수고했어요, @ads1018 @sedubois! 나는 이것과 #192를 따라 다녔고 Apollo와 바닐라 React를 사용하여 프리페칭/비동기 보기도 조사 했습니다.

각 페이지가 표시되기 전에 getDataFromTree 를 실행할 때 성능 문제를 발견했거나 예상합니까? 기술적으로 이 메서드는 전체 트리를 재귀적 으로 렌더링한 다음 getInitialProps 가 반환되면 React가 트리를 다시 렌더링하므로(캐시에서 가져온 데이터가 있음에도 불구하고)

정말 멋진 솔루션 👍 두 번 렌더링하는 것이 모든 하위 데이터가 캐시되도록 하는 유일한 옵션이라고 생각합니다. 성능에 대해 어떻게 생각하시는지 궁금합니다.

안녕하세요 @estrattonbailey - 성능 문제를 눈치채지 못했으며 예상하지도 않습니다. 실제로, 그것은 매우 촉박합니다! getDataFromTree 실행에 관해서는, 우리가 서버에 있는지 확인하는 조건부 안에 해당 메소드 호출을 래핑하여 사용자가 앱을 처음 로드할 때만 호출되고 이후의 모든 경로 변경에서 무시됩니다. . 성능을 확인하려면 데모 를 가지고 놀 수 있습니다. 피드백이 있으면 알려주세요!

@ads1018 귀하의 예에 대한 몇 가지 아이디어:

• 이와 같이 initialState 를 단순화하십시오.
• 다음과 같은 파일에 미들웨어, 저장소 및 감속기를 분리 하십시오.
• isServer를 typeof window !== 'undefined' 로 단순화하고 !!ctx.req를 삭제합니다.
• IS_SERVER const를 lib로 추출하고 param으로 전달할 필요가 없습니다.

@ad1018 반갑 습니다! 좋은 작은 데모.

내가 묻고 싶은 것은 이 규모가 얼마나 될까요? 아직 Next를 사용하지 않았지만 이해하는 한 Next는 페이지 구성 요소(예: pages/page.js )에서 사용할 수 있는 경우 각 경로 전환에서 getInitialProps 를 호출합니다. 수백 개의 노드와 많은 데이터가 들어오는 전체 규모의 앱/웹사이트에서 각 경로에서 두 번 렌더링하면 약간의 대기 시간이 발생할 수 있다고 생각합니다.

내가 작업하고 있는 프로젝트는 대규모 편집 사이트이므로 귀하를 포함하여 다양한 접근 방식을 벤치마킹할 수 있기를 바랍니다. 원한다면 트위터 에서 더 많은 논의를 하고 싶습니다. 작업해주셔서 감사합니다!

@estrattonbailey 갓차 . 나는 그것이 아주 잘 확장될 것이라고 상상한다. 초기 페이지 로드의 경우 getInitialProps 는 서버에서만 실행됩니다. getInitialProps 가 클라이언트에서 다시 실행되지만 getDataFromTree 가 우리가 서버에 있는지 여부를 확인하는 조건부 안에 래핑되기 때문에 데이터가 두 번 요청되지 않는다는 것은 맞습니다.

참고 사항 - 페이지에서 요청되는 많은 구성 요소와 데이터로 인해 초기 페이지 로드 시간이 걱정되는 경우 항상 apollo에게 SSR 동안 의도적으로 특정 쿼리를 건너뛰고 ssr: false 를 전달하여 클라이언트에 오프로드하도록 지시할 수 있습니다.

더 자세한 논의를 원하시면 트위터 로 연락 드리겠습니다 :)

getInitialProps가 클라이언트에서 다시 실행되지만 getDataFromTree가 우리가 서버에 있는지 여부를 확인하는 조건부 안에 래핑되기 때문에 데이터가 두 번 요청되지 않는다는 것은 맞습니다.

getInitialProps 는 초기 로드 이후가 아니라 <Link> 로 전환할 때만 클라이언트 측에서 실행된다는 점을 명심해야 합니다.

@ads1018 @estrattonbailey AFAIK 첫 페이지 로드 시 서버 측 렌더링이 2개 있습니다. getDataFromTree가 실행되고 내부적으로 전체 트리를 렌더링한 다음 HTML 응답을 구성하기 위해 렌더링이 다시 호출됩니다. 그것을 피할 방법이 있는지 생각하지 마십시오. 그러나 SSR이 피하는 네트워크 왕복 덕분에 여전히 성능이 좋은 것 같습니다.

GraphQL 서버가 Next.js 서버와 동일한 시스템에서 호스팅될 때 성능이 최대인 것 같으므로 성능에 관심이 있다면 항상 시도해 볼 수 있습니다. 백엔드, Next.js는 Now/Zeit World와 함께 배포됨).

@sedubois @estrattonbailey 내가 틀렸다면 정정해 주지만 우리는 여전히 한 번만 렌더링하고 있습니다. getDataFromTree 는 트리를 렌더링하지 않고 데이터가 Apollo 클라이언트 저장소에 준비되면 해결되는 약속을 반환합니다. 약속이 해결되는 시점에서 Apollo 클라이언트 저장소가 완전히 초기화되고 HTTP 요청의 응답으로 문자열화된 결과를 전달하려는 경우 선택적 으로 트리를 렌더링할 수 있지만 제 예제에서는 그렇게 하지 않습니다.

getDataFromTree는 트리를 렌더링하지 않습니다.

@ads1018 AFAIK 및 Apollo 코드 를 보면 트리를 재귀적으로 렌더링 _하지 않습니다_ (Apollo 데이터 가져오기를 트리거하기 위해). 따라서 첫 페이지 로드 시 서버 측 2가 렌더링됩니다.

하지만 어쨌든, 당신의 데모 덕분에 이제 Apollo와 Next 사이에 사용할 수 있는 통합이 생겼고 Apollo SSR 성능에 대한 나머지 질문은 더 이상 Next.js와 관련이 없다고 생각합니다. 거기에 대해 질문하는 것이 좋습니다.

@sedubois 렌더가 무엇입니까? 나는 걸으면서 나무를 흔드는 것을 부르고 싶습니다. setState 가 억제되고 DOM에 대한 조정이 없어 상당히 최적화된 것 같습니다.

@ads1018 좋은 예! 여기 Wiki에도 추가된 것 같으니 이 문제를 닫을 수 있을까요?

cc @rauchg

Apollo 블로그에서 Apollo + Next.js에 대한 블로그 게시물을 가져와야 합니다!

@stubailo @ads1018 의 예는 훌륭합니다 👏 동일한 Apollo 원칙을 사용하여 더 큰 것을 위해 내 앱을 확인할 수 있습니다: https://github.com/relatenow/relate

@helper님 감사합니다. 나는 그것이 어떻게 나왔는지에 대해 흥분한다. Next.js + Apollo로 앱 개발의 성배를 발견한 것 같습니다. 나는 복음을 전파하기 위한 노력의 일환으로 블로그 포스트로 후속 조치를 취하려고 했지만, 단지 그것에 대해 다루지 못했습니다. @stubailo Apollo 매체 간행물에 대한 작업에 협력하게 되어 기쁩니다. :)

예제와 그의 멋진 앱을 도와준 @sedubois 에게 큰 박수를 보냅니다. 😄

@ads1018 이 블로그에 여러분을 초대하고 싶습니다. 그것에 대해 이야기할 준비가 되면 Apollo Slack에서 저(thea)에게 핑을 보내주세요. :)

@helper 당신이 완전히 옳았습니다. 문제가 종료될 수 있는지 확인하려면 새 문제를 통과해야 합니다. 😄

@stubailo @theadactyl 멋진 아이디어 ❤️

서버 측에서 데이터를 두 번 요청하는 것과 관련하여 볼 문제/PR에 대해 아는 사람이 있습니까? 그냥 궁금하다