reactjs - Parcel Bundler 和 React 服务器端渲染
问题描述
当我使用 React 服务器端渲染时,我正在尝试使用 Parcel Bundler 作为客户端文件的捆绑器。
我使用了 Parcel 中间件并为其分配了我的客户端入口点的位置。
当我启动我的脚本时,它显示 Parcel 正在捆绑我的文件,但是我的 ReactDOM.hydrate 方法从未被调用,而且似乎捆绑程序根本不使用该文件。
这是我的 server.js 文件:
import Bundler from 'parcel-bundler';
import express from 'express';
import { renderer } from './Helpers';
const app = express();
const bundler = new Bundler(__dirname + '/index.js');
app.use(express.static('public'));
app.use(bundler.middleware());
app.get('*', (req, res) => {
const context = {};
const content = renderer(req, context);
if (context.url) return res.redirect(301, context.url);
if (context.notFound) res.status(404);
res.send(content);
});
const listeningPort = 5000;
app.listen(listeningPort, () => {
console.log(`Server is now live on port ${listeningPort}.`);
这是我的 index.js 文件:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { routes as Routes } from './Routes';
const routes = Routes;
if (process.env.NODE_ENV === 'development')
ReactDOM.render(
<BrowserRouter>
{routes}
</BrowserRouter>,
document.querySelector('#root'));
else
ReactDOM.hydrate(
<BrowserRouter>
{routes}
</BrowserRouter>,
document.querySelector('#root'));
这是我的渲染器文件,它基本上渲染了 html 文件:
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { routes as Routes } from '../Routes';
const routes = Routes;
export default (req, context) => {
const content = renderToString(
<StaticRouter location={req.path} context={context}>
{routes}
</StaticRouter>
);
const lang = "en";
return `
<!DOCTYPE html>
<html lang="${lang}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="./public/plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="./public/plugin/font-awesome/css/fontawesome-all.min.css" rel="stylesheet" />
<link href="./public/plugin/et-line/style.css" rel="stylesheet" />
<link href="./public/plugin/themify-icons/themify-icons.css" rel="stylesheet" />
<link href="./public/plugin/owl-carousel/css/owl.carousel.min.css" rel="stylesheet" />
<link href="./public/plugin/magnific/magnific-popup.css" rel="stylesheet" />
<link href="./public/css/style.css" rel="stylesheet" />
<link href="./public/css/color/default.css" rel="stylesheet" id="color_theme" />
</head>
<body>
<div id="root">${content}</div>
</body>
</html>
`;
};
应用程序在 StaticRouter 中运行并加载内容,但从不执行 Hydrate。
解决方案
我终于使用以下示例项目解决了我的问题。
https://github.com/reactivestack/parcel-react-ssr
基本上解决方案是不使用Bundler 中间件,而是将客户端和服务器端分别与 Parcel 捆绑,然后运行项目。
推荐阅读
- javascript - 仅在 Safari 中出现 CORS Access-Control-Allow-Origin 错误
- angular - 如何测试 Angular MatDialog 和 PositionChanged
- node.js - 无法全局安装 gulp
- javascript - 在数组中查找元素并将其添加到另一个 javascript
- python - PyMuPDF:删除出现在固定位置的所有页面中的重复对象
- python - db 在烧瓶文档中返回 NoneType
- xml - 如何使用 xsl 替换(动态)特定的 xml 元素
- android - 如何修复 Android 恢复购买?
- python - 通过切片训练数据集训练模型(基本上加载少量数据,训练和卸载再次加载另一部分训练并再次卸载重复)
- python - Json2xml python解析器-如何删除空格并添加引号