webpack实现ssr

最新推荐文章于 2024-05-06 09:25:36 发布

信海利世

最新推荐文章于 2024-05-06 09:25:36 发布

阅读量213

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/liixnhai/article/details/110347301

版权

webpack 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

1、SSR 代码实现思路
服务端
·使⽤ react-dom/server 的 renderToString ⽅法将
React 组件渲染成字符串
服务端路由返回对应的模板

客户端
打包出针对服务端的组件

const fs = require('fs');
const path = require('path');
const express = require('express');
const { renderToString } = require('react-dom/server');
const SSR = require('../dist/search-server');
const template = fs.readFileSync(path.join(__dirname, '../dist/search.html'), 'utf-8');
const data = require('./data.json');

const server = (port) => {
const app = express();

app.use(express.static('dist'));
app.get('/search', (req, res) => {
const html = renderMarkup(renderToString(SSR));
res.status(200).send(html);
});

app.listen(port, () => {
console.log('Server is running on port:' + port);
});
};

server(process.env.PORT || 3000);

const renderMarkup = (str) => {
const dataStr = JSON.stringify(data);
return template.replace('', str)
.replace('', `<script>window.__initial_data=${dataStr}</script>`);
}

2、webpack ssr 打包存在的问题
浏览器的全局变量 (Node.js 中没有 document, window)
·组件适配：将不兼容的组件根据打包环境进⾏适配
·请求适配：将 fetch 或者 ajax 发送请求的写法改成 isomorphic-fetch 或者 axios

if (typeof window === 'undefined') {
global.window = {};
}

样式问题 (Node.js ⽆法解析 css) ·⽅案⼀：服务端打包通过 ignore-loader 忽略掉 CSS 的解析
·⽅案⼆：将 style-loader 替换成 isomorphic-style-loader
3、如何解决样式不显示的问题？
使⽤打包出来的浏览器端 html 为模板
设置占位符，动态插⼊组件

4、⾸屏数据如何处理
服务端获取数据
替换占位符
<body>
<div id="root"></div>

</body>

信海利世

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack实现ssr

1、SSR 代码实现思路服务端·使⽤ react-dom/server 的 renderToString ⽅法将React 组件渲染成字符串服务端路由返回对应的模板客户端打包出针对服务端的组件const fs = require('fs');const path = require('path');const express = require('express');const { renderToString } = require('react-dom/server');const
复制链接

扫一扫