npm 包 @apollo/react-ssr 使用教程

什么是 @apollo/react-ssr？

@apollo/react-ssr 是一个为了在服务器端使用 React 和 Apollo 客户端库而设计的 npm 包。通常情况下，React 应该只在客户端进行渲染，但服务器端渲染 (server-side rendering, SSR) 可以使得你的应用在第一次加载时更快地呈现，并更好地配合 SEO（搜索引擎优化）。

如何使用 @apollo/react-ssr？

在开始使用 @apollo/react-ssr 之前，需要确保你已经安装了 @apollo/client 和 react-dom 以及 react-router-dom，它们是这个 npm 包的前置依赖。

然后，在你的服务器端代码中，你可以按照下面的方式使用 @apollo/react-ssr 来执行一个查询并渲染出来：

------ - --------------- - ---- --------------------
------ - -------------- - ---- -----------------
------ - -------------- - ---- -------------------
------ - ------------ - ---- -------------------

-- --- ---- ---- -- ------ ---- ------ ------ -------- --- ---- --- ---------
-- ---

------------ ----- ----- ---- -- -
  ----- ------- - ---

  ----- ----------- - -
    --------------- ----------------
      ------------- ------------------ ------------------
        ---- --
      ---------------
    -----------------
  --

  ----- -----------------------------

  ----- ------- - ----------------------------

  -- ---
---

这个例子中，我们使用到了 getDataFromTree 函数，它将会执行我们的数据查询并等待请求的结果。只有等到所有的查询都完成了，才会渲染出我们的应用。这样可以确保我们的服务器端渲染包含了完整的数据。

ApolloProvider 组件将会对我们的应用提供 Apollo 的 client 实例，这将包含我们的 GraphQL API 端点的地址以及一些其他配置项。

StaticRouter 组件则是在服务器端上用来处理路由匹配的一种方式。该组件会接收 location 和 context 两个属性，其中 location 是当前 URL 的路径，而 context 则在渲染期间包含了我们的服务器端信息。

最后，我们使用 renderToString 函数将 React Element 转换成字符串，使得它可以在我们的客户端进行交互。

示例代码

这里我们将举一个例子来说明如何使用 @apollo/react-ssr。在这个例子中，我们使用了 React 和 Apollo 客户端库来从 GraphQL API 获取账户信息和账户余额。我们也将使用 React Router 来实现客户端上的路由。

安装依赖

--- ------- ----- --------- ---------------- -------------- ----------------- -------

创建 Apollo Client

------ - ------------- ------------- - ---- -----------------

------ ----- ------------ - --- --------------
  ---- --------------------------------
  ------ --- ----------------
---

在这里，我们创建了一个 Apollo Client 的实例，指向了我们的 GraphQL API 端点。我们也创建了一个 InMemoryCache 对象，它将会被用来保存我们的 GraphQL 数据。

创建 App

------ ----- ---- --------
------ - ------- ------ ---- - ---- -------------------
------ - -------- - ---- -----------------
------ - --- - ---- --------------

----- ----------- - ----
  ----- ---------- -
    ----
    -------
  -
--

-------- ------ -
  ----- - -------- ------ ---- - - ----------------------

  -- --------- ------ ------------------
  -- ------- ------ -------- -------

  ------ -
    -----
      -------------
      ------- ------- ---- --- ---------------
      ------- ------- ------- ------- --- ------------------
    ------
  --
-

-------- ------- -
  ------ -
    -----
      --------------
      ------- -- --- ----- ---------
    ------
  --
-

------ ------- -------- ----- -
  ------ -
    -----
      -----
        ----
          ----
            ----- ------------------
          -----
          ----
            ----- ------------------------
          -----
        -----
      ------

      --------
        ------ -------- ------
          ----- --
        --------
        ------ --------------
          ------ --
        --------
      ---------
    ------
  --
-

在这里，我们使用了 useQuery 钩子来执行我们的 GraphQL 查询。我们还为我们的应用提供了两个迷你组件，一个是 Home 组件，会渲染我们账户信息和余额，另一个是 About 组件，在这个例子中，它并没有执行任何查询。

创建服务器端代码

------ ------- ---- ----------
------ - -------------- - ---- -------------------
------ - -------------- - ---- -----------------
------ - ------------ - ---- -------------------
------ - --------------- - ---- --------------------
------ --- ---- --------
------ - ------------ - ---- ------------------

----- --- - ----------

--------------------------------

------------ ----- ----- ---- -- -
  ----- ------- - ---

  ----- ----------- - -
    --------------- ----------------------
      ------------- ------------------ ------------------
        ---- --
      ---------------
    -----------------
  --

  ----- -----------------------------

  ----- ------- - ----------------------------

  ----- ---- - -
    ------
      ------
        --------- -----------
      -------
      ------
        ---- -------------------------
        ------- ---------------------------------
      -------
    -------
  --

  ---------------
---

---------------- -- -- -
  ------------------- ------- -- ------------------------
---

我们首先创建了一个 Express 应用。然后，我们使用 getDataFromTree 函数来异步执行我们的查询，这样就可以在服务器端获取到所有的数据了。我们将这些数据提供给我们的 React 组件，这将使得我们的组件在渲染期间具有了完整的数据。

ApolloProvider 和 StaticRouter 组件的作用与上面介绍的是一样的。

最后，我们使用 renderToString 函数将我们的 React Element 转换成字符串，然后将其发送到客户端。我们也在 HTML 中加入了一个 bundle.js 文件，这个文件包含了我们的客户端 JavaScript 代码。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedc27ab5cbfe1ea0612086

阅读全文

猜你喜欢

  • npm 包 @stylelint/postcss-css-in-js 使用教程

    在前端开发中，样式表是不可或缺的一部分，它们决定了我们的网页、应用程序等外观和交互方式。然而，在实际开发中，CSS处理起来并不容易，因为它有许多复杂的规则。这导致开发者的代码难以维护和扩展。

    4 年前
  • npm 包 @stylelint/postcss-markdown 使用教程

    在前端开发中，样式的一致性非常重要。为了确保代码的质量和可维护性，我们通常使用 linters 来规范我们的代码。而其中一个比较好的 lint 工具是 stylelint，它可以帮助我们保证样式表的一...

    4 年前
  • npm 包 prettier-plugin-packagejson 使用教程

    在前端开发中，我们经常使用 JSON 格式的配置文件。这些配置文件可以是 package.json、.babelrc、.eslintrc 等等。但是，我们有时会因为格式不统一，或者是因为书写方式不一致...

    4 年前
  • npm 包 @stylelint/prettier-config 使用教程

    前言 在前端的开发过程中，代码风格的统一是非常重要的，它能保证代码的易读性和一致性。而在代码风格的统一中，stylelint 和 prettier 是最常用的工具。

    4 年前
  • npm 包 @stylelint/remark-preset 使用教程

    在前端开发中，代码规范是非常重要的。代码规范的好坏，不仅可以决定代码的易读性、维护性，还会影响到开发效率，因此很多公司和团队都制定了自己的代码规范，并在开发中按照规范进行统一化管理。

    4 年前
  • npm 包 @types/global-modules 使用教程

    什么是 @types/global-modules？ 在使用 Node.js 进行开发时，我们常常需要使用一些全局安装的 npm 包，如 npm、yarn、vue-cli 等等。

    4 年前
  • npm 包 @types/globjoin 使用教程

    在前端开发中，很多时候我们需要对文件进行操作，比如查找，读取，修改等等。而 glob 是一个强大的文件查找工具，可以用来匹配符合模式的文件路径。而 @types/globjoin 就是一个 TypeS...

    4 年前
  • npm 包 github-contributors-list 使用教程

    引言 在开发各种前端应用程序时，我们往往会使用一些开源组件或者库。而这些组件和库常常都托管在 Github 上，在使用它们的过程中，了解这些组件和库的开发历程和贡献者也是非常重要的。

    4 年前
  • NPM包babel-preset-current-node-syntax使用教程

    前言 随着Node.js的迅速发展，许多开发者都开始使用Node.js构建Web应用程序。然而，不同版本的Node.js在语言语法上会存在差异，而babel-preset-current-node-s...

    4 年前
  • npm 包 mdast-util-heading-style 使用教程

    在前端领域中，Markdown 已成为一种广泛使用的文本格式语言。在 Markdown 编写中，经常使用的就是标题。但是在一些不同的 Markdown 编辑器或渲染器中，对于标题的样式有不同的规定。

    4 年前
  • npm 包 @types/hast 使用教程

    前言 在前端开发中，我们经常需要处理 HTML 文档。而解析 HTML 文档是一项复杂且容易出错的任务。因此，为了提高开发效率和代码的可靠性，我们通常使用一些工具来帮助我们解析 HTML 文档。

    4 年前
  • npm 包 spooks 使用教程

    前言 在前端开发中，我们经常会用到各种第三方库和框架来提高开发效率。而 npm 是 Node.js 的包管理器，也是前端开发中最流行的包管理工具之一。在 npm 中，可以找到大量优秀的工具和模块，方便...

    4 年前
  • npm 包 @debitoor/eslint-config-debitoor 使用教程

    在前端开发中，代码规范是非常重要的，它能够提升代码的可维护性、可读性以及降低出错的概率。而 eslint 工具就是为了解决这个问题而生的，它能够检查代码，发现潜在的问题，并根据配置文件进行提示或者自动...

    4 年前
  • NPM 包 @webpack-utilities/test 使用教程

    前言 在前端开发过程中，我们经常需要使用一些工具来方便我们的开发，提高开发效率，其中大名鼎鼎的 Webpack 就是前端开发中最重要的工具之一。@webpack-utilities/test 是一个 ...

    4 年前
  • NPM包@verdaccio/commons-api使用教程

    介绍 @verdaccio/commons-api是一个通用的API库，提供了一些用于编写简单NPM插件的API。包括插件编写、插件验证、插件错误处理以及插件命令行工具的处理等。

    4 年前
  • npm 包 cordova-app-hello-world 使用教程

    介绍 cordova-app-hello-world 是一个基于 Cordova 开发的 HTML5 移动应用程序开发框架，它提供了可靠的原生设备感应和用户界面元素集成。

    4 年前
  • npm 包 @cordova/eslint-config 使用教程

    如果你是前端开发者，那么你一定知道 ESLint 这个工具。它是一个静态代码分析工具，可以帮助开发者避免一些常见的错误，并规范团队中代码风格的一致性。而本文要介绍的是一个名为 @cordova/esl...

    4 年前
  • npm 包 `encode-utf8` 使用教程

    encode-utf8 是一款基于 JavaScript 的 npm 包，用于将字符串编码为 UTF-8 格式，同时支持对一个 UTF-8 格式的字符串进行解码。它可以满足前端开发人员在处理 Unic...

    4 年前
  • npm 包 selenium-mock 使用教程

    简述 selenium-mock 是一个 npm 包，用于模拟 Selenium WebDriver 的行为，灵活地控制浏览器的行为和响应。通过将 selenium-mock 引入到项目中，可以极大地...

    4 年前
  • npm 包 @wdio/repl 使用教程

    在开发前端网页的过程中，我们常常需要调试和测试代码。为了让这个过程更加高效和方便，我们可以使用 npm 包 @wdio/repl。本文将介绍这个包的使用教程，包括安装、配置、基础使用和高级用法。

    4 年前

相关推荐

    暂无文章