简单实现SSR?

程序员烧烤店

于 2021-12-03 00:53:41 发布

阅读量753

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/qq_36967515/article/details/121689991

这篇博客展示了如何结合React和Express来实现服务器端渲染。通过创建一个简单的`Home`组件，并使用`react-dom/server`库将React组件渲染为字符串，然后在Express服务器上设置路由，将渲染后的HTML发送到客户端。这有助于提高SEO和首屏加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Home文件

import React from 'react';

const Home = () => {
  return <div>这是一个演示地址</div>
}

export default Home;

import express from 'express';
import Home from './containers/Home';
import React from 'react';
import {renderToString} from 'react-dom/server';

const port = 3000;
const app = express();
const content = renderToString( < Home / >
)
app.get('/', (req, res) => {
  res.send(`
    <html>
      <title>SSR</title>
      <body>
        ${content}
      </body>
    </html>
  `);
});

app.listen(port, () => {
  console.log(`访问地址是  http://localhost:${port}`)
});