Question

最好的愿望是，当我使用本地瑜伽服务器和本地docker容器作为数据库时，由于数据在瞬间加载，因此...（如果有人登录）了数据的名称，一切运行得非常顺利。亲自签名的人也立即出现在客户端和服务器端。

现在，我在远程服务器上部署了前端，后端和数据库，现在需要花费一些时间来加载数据。因此，即使我们已经登录，Sign In按钮也会停留3-4秒。并且前端很晚才意识到我们已经登录，然后显示了我们的名字。

之所以发生这种情况，是因为我们仅在获取数据后才渲染数据。但是，当数据迟到时，服务器端代码将变得过时。客户端更新较晚使Web应用程序感觉很滞后。

我正在使用Next.js

withData.js

import withApollo from 'next-with-apollo'
import ApolloClient from 'apollo-boost'

function createClient({ headers }) {

  return new ApolloClient({
    uri: `${process.env.ENDPOINT}/graphql`,
    request: operation => {
      operation.setContext({
        fetchOptions: {
          credentials: 'include',
        },
        headers
      })
    }
  })

}

export default withApollo(createClient);

User.js

import { Query } from 'react-apollo'
import gql from 'graphql-tag'
import PropTypes from 'prop-types'
import { client } from '../lib/withData'

export const CURRENT_USER_QUERY = gql`
  query {
    me {
      id
      name
      fname
      lname
      email
      phone
      bio
      previledge
      gender
      username
      birthday
      profilePicture
      signUpMethod
    }
  }
`

const User = props => (
  <Query {...props} query={CURRENT_USER_QUERY}>
    {payload => {
      return props.children(payload)
    }}
  </Query>
)

export default User

SignInButton.js

<User>
        {({data: {me}}) => (    

         { me ? <ProfileButton me={me} /> : <li style={{backgroundColor: '#ffffff', color: '#000000', borderRadius: '5px', padding: '5px 10px', zoom: '80%'}}><a href={`${meta.domain}/signin?intent=${this.props.router.asPath}`} style={{color: '#000000'}}>⚡️ {this.signInText}</a></li> }

        )}
</User>

pages/_app.js

import App, { Container } from 'next/app'
import { ApolloProvider } from 'react-apollo'

import withData from '../src/lib/withData'
import Page from '../src/components/Page'

class Wrapper extends App {

    static getInitialProps({Component, ctx}){

        let pageProps = {}
        if(Component.getInitialProps){
            pageProps = Component.getInitialProps(ctx)
        }

        // This exposes query to the user
        pageProps.query = ctx.query
        return { pageProps }

    }

    render() {
        const { Component, apollo, pageProps } = this.props
        return (
            <Container>
                <ApolloProvider client={apollo}>
                    <Page>
                        <div className="super_container"><Component {...pageProps} /></div>
                    </Page>
                </ApolloProvider>
            </Container>
        )
    }

}


export default withData(Wrapper)

如何从服务器端的react-apollo渲染数据？

找到了这些资源，但是很难用我使用的堆栈来实现。

https://bessey.dev/blog/2019/01/02/apollo-graphql-hypernova/

https://github.com/i18next/react-i18next/issues/593

https://shaleenjain.com/blog/nextjs-apollo-prefetch/

Answer 1

如果要通过查询进行SSR，以便可以直接在serverSide中填充head和其他内容，则需要直接在其中进行查询您需要像这样在GetInitialProps函数内部创建查询：

Page.getInitialProps = async ({
  apolloClient, query, children, router, href
}) => {
  const { data, error, loading } = await apolloClient.query({ query: LIVRE_QUERY, variables: { slug: query.titre } })
  if (error) {
    return <div>Erreur</div>
  }
  return { data, error, loading }
}

使用react-apollo进行服务器端渲染

找到了这些资源，但是很难用我使用的堆栈来实现。

1 个答案: