实现简易 React SSR 框架

实现简易 React SSR 框架

框架依赖

  • express
  • react
  • react-dom

创建一个 node server

使用 express 创建一个 node server

js 复制代码
import express from 'express'
import handlerSsr from './ssr'

const app = express()
const port = process.env.PORT || 3000

app.use(express.static('public'))

app.get('*' , (req, res) => {
  // 处理 SSR 逻辑
  return handlerSsr(req, res)
})

app.listen(port, () => {
  console.log(`Server started on http://localhost:${port}`)
});

创建一个根组件

js 复制代码
// client/App.js
import React from 'react';

function App(props) {
    return <div>Hello World!</div>;
}

export default App;

处理 SSR 逻辑

主要分为以下几个步骤:

  1. 解析请求:确定当前请求的URL和任何查询参数。
  2. 获取数据:对于动态内容,您可能需要从数据库或外部API获取数据。
  3. 渲染React组件树:使用收集到的数据渲染您的React组件树。
  4. 序列化HTML:将渲染后的React组件转换为静态HTML字符串。
  5. 发送响应:将最终的HTML字符串发送回浏览器。
js 复制代码
import App from './App'

export const handlerSsr = (req, res) => {
  // 处理请求
  const url = req.path

  const handleRequest = async () => {
      const data = await getDataPage(url);

      if (!data) {
          res.statusCode = 404;
          res.end('Not Found');
          return;
      }

      const html = renderPage(data);
      res.write(html);
      res.end();
  };

  // 获取数据(在真实场景中,这部分很可能是异步的)
  const getDataPage = async (url) => {
      // 模拟从数据库或API获取数据的行为
      switch (url) {
          case '/':
              return { title: 'Home', message: 'Welcome home!' };
          case '/about':
              return { title: 'About Us' };
          default:
              return null;
      }
  };

  // 渲染React组件树
  const renderPage = (data) => {
      const renderedContent = ReactDOMServer.renderToString(
          <App {...data} /> // 将数据作为props传递给App组件
      );

      return `
        <!doctype html>
        <html>
            <head>
                <meta charset=utf-8/>
                <title>${data.title}</title>
            </head>
            <body>
                <div id="root">${renderedContent}</div>
                <script type="text/javascript" src="index_bundle.js"></script>
            </body>
        </html>
    `;
  };

  handleRequest()
      .catch((err) => {
          console.error(err.stack);
          res.status(500).send('Something broke!');
      });

}
相关推荐
小小小小宇3 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习4 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐5 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121385 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css