Javascript 浏览器没有'；无法识别使用节点文件系统编写的html文件

我正在使用Apollo 2构建一个应用程序，并试图编写一个脚本来生成用于服务器端渲染的静态html文件

我目前正在使用此逻辑在服务器上呈现React组件，它工作正常：

export default (Page) => (req, res) => {
    const App = (
        <ApolloProvider client={client(fetch)}>
            <Main>
                <Page />
            </Main>
        </ApolloProvider>
    );

    getDataFromTree(App).then(() => {
        const data = {
            html: ReactDOMServer.renderToString(App),
            seo: { title: "Home", description: "" }
        };
        res.render("index", { data });
    });
}

该文件已成功写入，但如果我打开我的页面源代码，则由compile方法添加的部分将变灰，并且似乎被忽略：

我还尝试读取文件并使用

.replace

替换字符串，然后插入一个伪

div

，但结果总是一样的

// using compile
const template = ejs.compile(fs.readFileSync(path.join(__dirname, 'landing_template.ejs'), 'utf-8'));
const html = template({ component });

const template = ejs.compile(fs.readFileSync(path.join(__dirname, 'landing_template.ejs'), 'utf-8'));
const html = template({ component: "<div>teste</div>" });

// using readFile
const template = fs.readFileSync(path.join(__dirname, 'landing_template.ejs'), 'utf-8');
const html = template.replace("<%- component %>", component);

const template = fs.readFileSync(path.join(__dirname, 'landing_template.ejs'), 'utf-8');
const html = template.replace("<%- component %>", "<div>teste</div>");

// maybe this is the problem?
fs.writeFile(
    path.join(__dirname, "../views/landing.ejs"),
    html,
    { encoding: "utf8" },
    err => {
        if(err) console.log(err);
        else console.log("done.");
});

//使用compile
const template=ejs.compile（fs.readFileSync（path.join（uu dirname，'landing_template.ejs'），'utf-8'）；
const html=模板（{component}）；
const template=ejs.compile（fs.readFileSync（path.join（uu dirname，'landing_template.ejs'），'utf-8'）；
consthtml=template（{component:“teste”}）；
//使用readFile
const template=fs.readFileSync（path.join（uu dirname，'landing_template.ejs'），'utf-8'）；
const html=template.replace（“，组件）；
const template=fs.readFileSync（path.join（uu dirname，'landing_template.ejs'），'utf-8'）；
const html=template.replace（“，“teste”）；
//也许这就是问题所在？
fs.writeFile(
join（uu dirname，“../views/landing.ejs”），
html，
{编码：“utf8”}，
错误=>{
if（err）console.log（err）；
else console.log（“完成”）；
});

我猜浏览器没有将这个新文本识别为HTML，并且无法解析它。有人知道我能做这件事的方法吗

---

谢谢

多么酷的主意！这可能是因为，正如您所提到的，浏览器无法识别您发送html的事实。在调用render之前，请尝试将

内容类型

标题显式设置为

文本/html

：

export default (Page) => (req, res) => {
    const App = (
        <ApolloProvider client={client(fetch)}>
            <Main>
                <Page />
            </Main>
        </ApolloProvider>
    );

    getDataFromTree(App).then(() => {
        const data = {
            html: ReactDOMServer.renderToString(App),
            seo: { title: "Home", description: "" }
        };
        res.setHeader("Content-Type", "text/html");
        res.render("index", { data });
    });
}

导出默认值（页面）=>（请求、恢复）=>{
常量应用=(
);
getDataFromTree（应用程序）。然后（（）=>{
常数数据={
html:ReactDOMServer.renderToString（应用程序），
搜索引擎优化：{标题：“主页”，描述：}
};
res.setHeader（“内容类型”、“文本/html”）；
res.render（“索引”{data}）；
});
}

编辑：

啊，我现在看到了！不幸的是，您无法在HTML中自动关闭

标记，这会使浏览器出错。关闭标题中的脚本标记，如下所示：

<script async src="/build/app.bundle.js" type="text/javascript"></script>

这应该可以解决问题。

是错误的。您必须使用以下选项：

<script src="URL"></script>

我认为HTML代码的问题在于标记没有关闭。请参阅复制的bug:和修复：脚本标记不是自动关闭标记。即使在

之间没有任何东西，也不能直接使用

我试过了，但没有成功。：/已在浏览器中选中，内容类型为text/html，但仍然无法解析。@ThiagoLoddi啊，我现在看到问题了！更新了我的答案。：）

<script src="URL"></script>