在现代 web 应用开发中，客户端渲染已经成为了主流。这种方式简单明了，但是存在着诸多问题，比如 SEO 不佳、性能慢、页面内容不利于搜索引擎收录等。而服务端渲染（Server-Side Rendering，简称 SSR）则可以解决这些问题。本文将介绍如何使用 Headless CMS 构建 SSR 应用。
什么是 Headless CMS？
Headless CMS 是一种内容管理系统，与传统的内容管理系统不同，Headless CMS 只关心内容的管理和存储，而不涉及到内容的展示。这个管理页面就可以作为提供数据的 API 服务。客户端可以通过这个服务获取数据并展示，也可以通过在服务端进行数据的获取和模板的渲染来完成 SSR。
如何使用 Headless CMS？
在本文的示例中，我们使用 Strapi 作为 Headless CMS，使用 Next.js 作为 SSR 应用的框架。首先，在 Strapi 中创建一个名为 blog 的内容类型，包含 title、content、cover 等字段。接下来，在 Strapi 中创建一些博客文章。
在 Next.js 项目中，安装依赖：
npm install --save next react react-dom isomorphic-fetch
然后创建一个 pages 目录，在其中创建一个名为 index.js 的文件。在这个文件中，我们进行数据的获取和模板的渲染。具体代码如下：
-- -------------------- ---- -------
------ ----- ---- -------
------ ----- ---- ------------------
----- ---- ------- --------------- -
------ ----- ----------------- -
----- --- - ----- ------------------------------------
----- ---- - ----- ----------
------ - ------ ---- -
-
-------- -
------ -
-----
-------------------------- -- -
---- --------------
---------------------
---- -------------------- ---------------- --
---- -------------------------- ------- ------------ -- --
------
---
------
-
-
-
------ ------- ----上面的代码中，我们通过 fetch 获取了 http://localhost:1337/posts 的数据，在 render 方法中将这些数据渲染到页面中。同时我们通过 dangerouslySetInnerHTML 属性将文章的内容渲染出来。
以上代码仅仅说明了如何将数据渲染到页面中，这还远远不够。因为现在我们得到的是一个纯客户端渲染的页面，我们需要将这个页面转换成服务端渲染的页面。
为了达到这个目的，我们需要创建一个 server.js 文件，代码如下：
-- -------------------- ---- -------
----- ------- - ------------------
----- ---- - ---------------
----- ----- - ---------------------------
----- --- - -------------------- --- ------------
----- --- - ------ --- --
----- ------ - -----------------------
--------------------- -- -
----- ------ - ---------
------------------------ ----- ----- ---- -- -
----- -------- - ----- ------------------------------------
----- ----- - ----- ---------------
---------------
--
--------------- ----- ---- -- -
------ ----------- ----
--
------------------- --- -- -
-- ----- ----- ---
-------------- ----- -- -----------------------
--
--上面的代码中，我们创建了一个 express 服务，所有的请求都会被转发到 Next.js 应用中的 getRequestHandler 方法中处理。我们也创建了一个 /api/posts 接口，用于获取文章的数据。
接下来，我们需要对 index.js 中的代码进行修改，以使用服务端渲染。修改代码如下：
-- -------------------- ---- -------
------ ----- ---- -------
------ ----- ---- ------------------
----- ---- ------- --------------- -
------ ----- ----------------- --- -- -
----- --- - ---
- ---------------------------------
- -----------------------------
----- --- - ----- ----------
----- ---- - ----- ----------
------ - ------ ---- -
-
-------- -
------ -
-----
-------------------------- -- -
---- --------------
---------------------
---- -------------------- ---------------- --
---- -------------------------- ------- ------------ -- --
------
---
------
-
-
-
------ ------- ----我们修改了 getInitialProps 方法，查询文章的数据不再直接从 Strapi 中获取，而是从我们刚刚创建的 /api/posts 接口获取。这个接口可以在服务器上调用，也可以在客户端上调用。这样我们就可以在服务器上进行 SSR 了。
最后，运行 npm run dev，打开浏览器，访问 http://localhost:3000 ，便可以看到 SSR 后的列表页面。
总结
Headless CMS 让数据的获取和管理变得简单，而服务端渲染避免了客户端渲染的许多问题。在本文中，我们使用了 Strapi 和 Next.js，构建了一个服务端渲染的博客列表页面。希望这个示例能给大家带来一些启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6454daeb968c7c53b08988f8