前言
目前,前端技术日新月异,前端框架多种多样,但使用 SSR (服务器端渲染) 目的却都是一致的:提高应用的性能、SEO 等。因此,本文将介绍如何使用 Apollo GraphQL 进行服务器端渲染,并尝试深入探究其学习意义与指导意义。
什么是 Apollo GraphQL?
GraphQL 是一种由 Facebook 开源的数据查询语言和运行时。它将客户端和服务器之间的数据通信更加简洁、高效,并允许客户端精确地请求需要的数据,从而提高应用性能。
Apollo GraphQL 则是基于 GraphQL 的平台服务,提供了适用于客户端和服务器端的各种工具、库和架构来简化和优化 GraphQL 应用程序的开发过程。它包括 Apollo Client、Apollo Server、Apollo Link、Apollo Engine 等模块,可帮助开发者更快地构建高效、可维护的 GraphQL 应用。
为什么要使用 Apollo GraphQL 进行 SSR?
在 SSR 中,服务器会渲染出整个 HTML 文档,并将其发送给浏览器,这样可以快速展示首屏内容,即使用户网络缓慢或移动设备带宽有限也能提供良好的用户体验。
使用 Apollo GraphQL 进行 SSR 的主要原因在于它具有以下优势:
- 减少请求次数:使用 GraphQL 引擎视图有选择地请求数据,根据需求灵活请求想要的数据,减少不必要的网络请求次数,从而提高应用性能;
- 提高稳定性:通过 Apollo GraphQL 支持的缓存和查询范围控制,让复杂查询的处理更加稳定。
- 数据统一:使用 Apollo GraphQL 可以让应用掌握整个应用的数据流,在客户端也可以统一维护数据的获取,提高应用的维护性。
如何使用 Apollo GraphQL 进行 SSR?
下面介绍使用 Apollo GraphQL 进行 SSR 的主要步骤:
1. 安装 Apollo GraphQL 的相关依赖
首先需要安装以下依赖:
yarn add apollo-server-express graphql express-isomorphic graphql-tag graphql-tools
apollo-server-express
,是 Apollo GraphQL 服务器开发所需的 Node.js 框架;graphql
,是 GraphQL 查询语言和运行时;express-isomorphic
,是一个 Node.js 框架,用于创建可编译并运行于服务器和客户端的应用;graphql-tag
,是用于编写 GraphQL 查询、变异和订阅等操作的模板字面量标签;graphql-tools
,是一个基于 GraphQL 所构建的运行时,用于实现 GraphQL Schema。
2. 创建 Apollo GraphQL 服务器
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ - ------------ - ---- ------------------------ ------ - -------------------- - ---- ------------------------ ------ - ----- - ---- ---------- ----- --- - ---------- ----- -------- - - ---- ----- - ------ ------ - -- ----- --------- - - ------ - ------ -- -- ------ ------- - -- ----- ------ - ---------------------- --------- --------- --- ----- ------------ - --- -------------- ------- -------- ----- -- --- -- -- - ------ - -------- ------------ -- -- --- ------------------- ----- ---- -- - ---------------------------- ----- ---------- ------- ----- --- ---------------- -- -- - --------------- ------ ----- -- -------------------------------- ---
这个服务器的 query 部分将返回字符串“Hello World!”。
在这里,我们使用了 @graphql-tools/schema
的 makeExecutableSchema
方法来构建 GraphQL schema。
apollo-server-express
的 ApolloServer
类处理了其他 GraphQL 服务细节,其中 context 是 GraphQL 中最重要的内容之一,它包含所有数据库连接、缓存等信息。
最后,我们使用 express
中用于路由操作的 .use()
方法将 GraphQL 处理程序与 /graphql 路径绑定,并监听 3000 端口。
3. 对 Apollo GraphQL 实例进行传递
上一步中,我们已经将服务器构建成了一个 Apollo GraphQL 服务器,为了在 SSR 中使用,我们需要将 apollo 服务实例传递到渲染函数中。
-- -------------------- ---- ------- -- ----------- ------ ------- ---- ---------- ------ - ------------ - ---- ------------------------ ------ - -------------------- - ---- ------------------------ ------ - ----- - ---- ---------- ----- --- - ---------- ----- -------- - - ---- ----- - ------ ------ - -- ----- --------- - - ------ - ------ -- -- ------ ------- - -- ----- ------ - ---------------------- --------- --------- --- ----- ------------ - --- -------------- ------- -------- ----- -- --- -- -- - ------ - -------- ------------ -- -- --- ------------------- ----- ---- -- - ---------------------------- ----- ---------- ------- ----- --- ---------------- -- -- - --------------- ------ ----- -- -------------------------------- --- -- ------------------ ------ ----- ---- -------- ------ - -------------- - ---- ------------------- ------ - --------------- --- - ---- ----------------- ------ - --------------- ------------ - ---- ---------------------- ------ - ------------- - ---- ----------------------- ------ - --------------- - ---- --------------------------- ------ --- ---- -------- ----- ------------ - ------------- ------- -- - --- ------ - --------------- --------------- ---------------- ---- ---------------- -- ----------------- -- ----- ------------ - ----------------- ----- ----------- - ---------------------------------------- ------ - ---------- ----- ------ ------ ----------- ----------- -------- ----------------------- - ----------------- --------- ------- ------ ---- ------------------------ ------- ------------------------ ------- --------- ------ ------- -- ----- -------------- - ----- ----- ---- -- - ----- ---- - ---------------- ---- -------------------------------- -------- - ------- ------------------- -- --- ----- ----- - --- ---------------- ----- ------ - --- -------------- ----- ------ -------- ----- --- ----- ----------- - - ------ ---- - ----- - -- -- ----- -------------------- ---------------- --- - ------ --- ---------------------------------- --------- -- ------ ------- ---------------
这里的代码中,我们将构建一个服务器和一个客户端,通过 Apollo GraphQL 的 ApolloServer
和客户端包来创建它们。传递到服务器的实例必须与客户端实例一致,以确保使用相同的 GraphQL schema 和分析。
通过创建 ApolloClient
对象并将其传递到渲染函数中,使用 getDataFromTree
将保证所有数据都已经加载以进行 SSR。
现在,我们就已经实现了对 Apollo GraphQL 进行 SSR 的设置,客户端和服务器端完全使用相同的操作。
总结
本文首先介绍了 Apollo GraphQL 的概念与优势,详细介绍了如何使用它进行服务器端渲染,在此过程中介绍了前置的安装、服务器端的构建以及对 Apollo GraphQL 实例的传递等步骤。由此可见,使用 Apollo GraphQL 进行 SSR 是一种基于最新数据通信技术的前沿开发方式,值得前端开发者深入学习和探究。
示例代码
- 服务端:
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ - ------------ - ---- ------------------------ ------ - -------------------- - ---- ------------------------ ------ - ----- - ---- ---------- ----- --- - ---------- ----- -------- - - ---- ----- - ------ ------ - -- ----- --------- - - ------ - ------ -- -- ------ ------- - -- ----- ------ - ---------------------- --------- --------- --- ----- ------------ - --- -------------- ------- -------- ----- -- --- -- -- - ------ - -------- ------------ -- -- --- ------------------- ----- ---- -- - ---------------------------- ----- ---------- ------- ----- --- ---------------- -- -- - --------------- ------ ----- -- -------------------------------- ---
- 客户端渲染:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - ------------- -------------- --------------- - ---- ----------------- ------ - -------------- - ---- ---------------------- ------ - --- - ---- ----------------- ------ --- ---- ------------ ----- ---- - ---------------- ---- -------------------------------- --- ----- ------ - --- -------------- ----- ------ --- ---------------- --- ----- ------ - -- -- - ---------------- --------------- ---------------- ---- -- ------------------ -------------------------------- -- --------- -- --- ------ ----------- --- -- ------------ - ------------------------------ -- -- - --------- --- -
- 服务端渲染:
-- -------------------- ---- ------- -- ------------------ ------ ----- ---- -------- ------ - -------------- - ---- ------------------- ------ - --------------- --- - ---- ----------------- ------ - --------------- ------------ - ---- ---------------------- ------ - ------------- - ---- ----------------------- ------ - --------------- - ---- --------------------------- ------ --- ---- -------- ----- ------------ - ------------- ------- -- - --- ------ - --------------- --------------- ---------------- ---- ---------------- -- ----------------- -- ----- ------------ - ----------------- ----- ----------- - ---------------------------------------- ------ - ---------- ----- ------ ------ ----------- ----------- -------- ----------------------- - ----------------- --------- ------- ------ ---- ------------------------ ------- ------------------------ ------- --------- ------ ------- -- ----- -------------- - ----- ----- ---- -- - ----- ---- - ---------------- ---- -------------------------------- -------- - ------- ------------------- -- --- ----- ----- - --- ---------------- ----- ------ - --- -------------- ----- ------ -------- ----- --- ----- ----------- - - ------ ---- - ----- - -- -- ----- -------------------- ---------------- --- - ------ --- ---------------------------------- --------- -- ------ ------- --------------- -- ------------- ------ ----- ---- -------- ------ - --------- --- - ---- ----------------- ----- --------- - ---- ----- - ----- --- ----- --- - -- -- - ----- - ---- - - -------------------- ------ - ----- ---------------------- ------ -- -- ------ ------- ----
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/645f7db9968c7c53b0181ae2