使用 Next.js + GraphQL 实现客户端渲染教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在 Web 开发中，客户端渲染和服务端渲染是两种常见的渲染方式。客户端渲染可以提高用户体验，但是对 SEO 不友好；服务端渲染对 SEO 友好，但是可能会影响用户体验。Next.js 是一个支持服务端渲染和客户端渲染的 React 框架，而 GraphQL 是一个数据查询语言和运行时，可以让我们更方便地获取数据。本文将介绍如何使用 Next.js 和 GraphQL 实现客户端渲染。

准备工作

在开始之前，需要确保已经安装了 Node.js 和 npm。在终端输入以下命令，检查是否已安装：

node -v
npm -v

如果输出版本号，则说明已安装。否则需要先安装 Node.js 和 npm。

接下来，我们需要创建一个 Next.js 项目。在终端中输入以下命令：

npx create-next-app my-app
cd my-app
npm run dev

这样就可以创建一个名为 my-app 的 Next.js 项目，并启动开发服务器。

使用 GraphQL

安装依赖

使用 GraphQL 需要安装一些依赖。在终端中输入以下命令：

npm install graphql apollo-boost react-apollo

这里我们使用了 apollo-boost 和 react-apollo，它们是 Apollo 客户端的一部分，可以帮助我们更方便地使用 GraphQL。

编写 GraphQL 查询

在 Next.js 中，我们可以在页面中使用 getInitialProps 方法来获取数据。在这里，我们将使用 GraphQL 来获取数据。首先，我们需要编写一个 GraphQL 查询。在 pages 目录下创建一个名为 index.graphql 的文件，内容如下：

query {
  posts {
    id
    title
    content
  }
}

这个查询将获取所有文章的 id、标题和内容。

创建 Apollo 客户端

接下来，我们需要创建一个 Apollo 客户端。在 pages 目录下创建一个名为 apollo.js 的文件，内容如下：

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
});

export default client;

这个文件将创建一个 Apollo 客户端，并指定 GraphQL 服务器的地址。

在页面中使用 GraphQL

现在，我们可以在页面中使用 GraphQL 了。在 pages 目录下创建一个名为 index.js 的文件，内容如下：

// javascriptcn.com 代码示例
import React from 'react';
import { gql } from 'apollo-boost';
import { Query } from 'react-apollo';
import client from './apollo';

const GET_POSTS = gql`
  query {
    posts {
      id
      title
      content
    }
  }
`;

const Index = () => (
  <Query query={GET_POSTS} client={client}>
    {({ loading, error, data }) => {
      if (loading) return <div>Loading...</div>;
      if (error) return <div>Error</div>;

      return (
        <ul>
          {data.posts.map(post => (
            <li key={post.id}>
              <h2>{post.title}</h2>
              <p>{post.content}</p>
            </li>
          ))}
        </ul>
      );
    }}
  </Query>
);

export default Index;

这个文件将在页面中使用 GraphQL 查询获取数据，并渲染文章列表。

使用 Next.js

安装依赖

使用 Next.js 需要安装一些依赖。在终端中输入以下命令：

npm install next react react-dom

创建页面

在 pages 目录下创建一个名为 index.js 的文件，内容如下：

// javascriptcn.com 代码示例
import React from 'react';
import { gql } from 'apollo-boost';
import { Query } from 'react-apollo';
import client from './apollo';

const GET_POSTS = gql`
  query {
    posts {
      id
      title
      content
    }
  }
`;

const Index = ({ posts }) => (
  <ul>
    {posts.map(post => (
      <li key={post.id}>
        <h2>{post.title}</h2>
        <p>{post.content}</p>
      </li>
    ))}
  </ul>
);

Index.getInitialProps = async () => {
  const { data } = await client.query({ query: GET_POSTS });
  return { posts: data.posts };
};

export default Index;

这个文件将在页面中使用 getInitialProps 方法获取数据，并渲染文章列表。

启动服务器

在终端中输入以下命令启动服务器：

npm run dev

这样就可以启动 Next.js 服务器，并访问 http://localhost:3000/ 查看效果。

总结

本文介绍了如何使用 Next.js 和 GraphQL 实现客户端渲染。首先，我们安装了必要的依赖，然后编写了 GraphQL 查询和 Apollo 客户端。接着，我们在页面中使用 GraphQL 查询获取数据，并渲染文章列表。最后，我们使用 Next.js 的 getInitialProps 方法获取数据，并渲染文章列表。希望本文对大家学习和使用 Next.js 和 GraphQL 有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657d4178d2f5e1655d80f0ce