详解React+Koa实现服务端渲染(SSR)

什么是服务端渲染(SSR)

服务端渲染是指在服务端生成页面的 HTML 内容，然后将其发送给浏览器进行展示，相较于传统 SPA 的客户端渲染，服务端渲染具有一些优势：

更好的 SEO 表现，搜索引擎能够抓取到页面内容。
更快的首屏加载速度，因为生成的 HTML 会比客户端渲染快很多。
更好的用户体验，因为用户看到的是完整的页面，而不是一开始的空白，然后再一点一点地展示内容。

React+Koa实现服务端渲染的流程

安装相关依赖

npm install react koa koa-static koa-router koa-views react-dom react-router-dom react-helmet

创建 React 组件

import React from "react";

function App() {
  return (
    <div>
      <h1>Hello SSR</h1>
      <p>This is an example page.</p>
    </div>
  );
}

export default App;

创建 Koa 服务

const Koa = require("koa");
const app = new Koa();
const router = require("./router");
const views = require("koa-views");
const path = require("path");

app.use(views(path.resolve(__dirname, "../views"), { extension: "ejs" }));
app.use(router.routes());

app.listen(3000, () => {
  console.log("Server is running at http://localhost:3000");
});

创建路由

const Router = require("koa-router");
const router = new Router();
const path = require("path");
const reactRender = require("./render");
const { Helmet } = require("react-helmet");

const App = require(path.resolve(__dirname, "../src/App.js")).default;

router.get("/", async (ctx) => {
  const reactDom = await reactRender(App, {}, ctx);
  const helmet = Helmet.renderStatic();

  await ctx.render("index", {
    reactDom,
    helmet,
  });
});

module.exports = router;

创建 React 渲染函数

const React = require("react");
const ReactDOMServer = require("react-dom/server");
const { StaticRouter } = require("react-router-dom");

async function reactRender(App, context, ctx) {
  const locals = { title: "SSR Demo" };
  const jsx = (
    <StaticRouter location={ctx.url} context={context}>
      <App />
    </StaticRouter>
  );

  return `<!DOCTYPE html>${ReactDOMServer.renderToString(jsx)}`;
}

module.exports = reactRender;

创建 HTML 模板

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title><%= title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <%= helmet.title.toString() %>
    <%= helmet.meta.toString() %>
    <%= helmet.link.toString() %>
  </head>
  <body>
    <div id="root"><%- reactDom %></div>
  </body>
</html>

启动服务

node server.js

现在在浏览器中访问 http://localhost:3000 就应该看到我们的 React 页面了。

示例1：添加路由

添加一个新的页面 /about，并且在页面中展示一些内容。

import React from "react";

function About() {
  return (
    <div>
      <h1>About SSR</h1>
      <p>This is the about page.</p>
    </div>
  );
}

export default About;

在我们的路由中添加一个新的路由规则：

router.get("/about", async (ctx) => {
  const reactDom = await reactRender(About, {}, ctx);
  const helmet = Helmet.renderStatic();

  await ctx.render("index", {
    reactDom,
    helmet,
  });
});

现在在浏览器中访问 http://localhost:3000/about，就能看到我们的新页面了。

示例2：添加数据获取

修改我们的首页，展示一些从 API 中获取的数据：

import React, { useState, useEffect } from "react";

function Home() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("/api/data")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      <h1>Hello SSR</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>
            <a href={item.url} target="_blank" rel="noreferrer">
              {item.title}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Home;

我们需要添加一个 API 路由：

router.get("/api/data", async (ctx) => {
  ctx.body = [
    { id: 1, title: "Item 1", url: "https://example.com/item1" },
    { id: 2, title: "Item 2", url: "https://example.com/item2" },
    { id: 3, title: "Item 3", url: "https://example.com/item3" },
    { id: 4, title: "Item 4", url: "https://example.com/item4" },
    { id: 5, title: "Item 5", url: "https://example.com/item5" },
  ];
});

这样我们刷新浏览器就能看到我们从 API 获取到的数据了。

总结

通过以上的演示，我们可以看到如何使用 React 和 Koa 实现服务端渲染(SSR)，同时也演示了如何添加路由和获取服务端数据，这些都是实际应用中必不可少的功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解React+Koa实现服务端渲染(SSR) - Python技术站

详解React+Koa实现服务端渲染(SSR)

详解React+Koa实现服务端渲染(SSR)

什么是服务端渲染(SSR)

React+Koa实现服务端渲染的流程

示例1：添加路由

示例2：添加数据获取

总结

相关文章