使用Node搭建reactSSR服务端渲染架构

2024-04-07 11:09:58

如题；本文所讲架构主要用到技术栈有：Node, Express, React, Mobx, webpack4, ES6, ES7, axios, ejs, log4js, scss，echarts，ant desige

使用Express初始化Node服务

开始本项目首先你的电脑要安装有node，npm这个没什么好说的。其次本次Node服务用的框架是express；所以要安装：express-generator

然后使用express your-project初始化你的express项目

npm install express-generator -g //执行这条命令全局安装express-generator，如果你不想全局安装把-g去掉即可

初始化express项目之后我们开始把react，webpack整合到这个node服务上。

初始化React项目并整合webpack

这里整合webpack使用的是webpack4的版本，如果你熟悉vue-cli(vue-cli3之前的版本)的话你应该会知道webpack配置有多少个文件，这里参考了vue-cli生成的webpack配置。

添加src文件夹

src文件夹下的内容都是整个react的一些核心配置，如请求处理，css样式，公共组件，路由，页面，stores全局状态数据。

配置.babelrc

因为用到ES6，ES7语法所以要配置.babelrc文件。这个文件东西不多下面直接贴出代码

1 {
2   "presets": [["es2015", { "modules": false }], "react", "stage-0"],
3   "plugins": [
4     "transform-decorators-legacy",
5     ["import", { "libraryName": "antd", "style": "css" }],
6     "transform-runtime"
7   ]
8 }

修改Node服务app.js

其实主要是加上这句：app.use('/', reactSSR); 其就是为了项目启动的时候开启热更新并渲染views中reactSSR.ejs这个模板引擎文件从而达到服务端渲染的目的。

项目结构

这里把项目主要的文件夹结构放到最后。

项目GitHub地址：https://github.com/Uwah/node-react

后期部署上服务器之后会找个时间更新博客，主要是用到pm2

转载于:https://www.cnblogs.com/leungUwah/p/9557738.html

使用Node搭建reactSSR服务端渲染架构相关推荐

nuxtjs+express+vue2+vuex搭建的服务端渲染（SSR）个人网站项目 1
5se7en.com nuxtjs+express+vue2.0+vuex搭建的服务端渲染个人网站项目. github项目地址: https://github.com/se7en-1992... 项目 ...
node+ejs实现服务端渲染SSR
一.服务端渲染SSR 1.什么是客户端渲染和服务端渲染? 客户端渲染:客户端向服务端请求HTML页面,后端不返回完整的 HTML页面,浏览器解析HTML页面过程中如果遇到ajax数据请求,会向服务端请 ...
基于webpack4搭建Vue服务端渲染（SSR）
前言了解服务端渲染是偶然间一位朋友问了我Nuxt.js的问题,孤陋寡闻的我竟然不知道服务端渲染是什么!赶紧利用空余时间充电,了解大概后觉得正好能解决我当前正遇到的问题,随着我项目的功能逐步扩展首屏加 ...
实现一个简单的SSR，了解服务端渲染
在前面的文章中,我已经对服务端渲染有了充分介绍,并且实现了最简单的服务端渲染. 在这篇文章中,就基于React,一步一步来搭建一个服务端渲染的项目. 这里是github地址 react-ssr,欢迎s ...
用 TypeScript 编写一个 React 服务端渲染库（1）
前言代码都甩在 Github 上面了,欢迎随手 star ? 踩坑的过程大概都在 TypeScript + Webpack + Koa 搭建 React 服务端渲染这篇文章里面踩坑的 DEMO ...
Vue.js 服务端渲染
服务端渲染 SSR 完全指南在 2.3 发布后我们发布了一份完整的构建 Vue 服务端渲染应用的指南.这份指南非常深入,适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读. ...
vue服务端渲染ssr
vue服务端渲染ssr 一.SSR概念传统web渲染技术 SPA SSR 二.webpack+vue2的实现方式 1.创建工程 2.安装依赖 3.编写一个简单的SSR 4.完整的ssr 5.代码链接 ...
17 SSR：使用 React.js 开发 Serverless 服务端渲染应用
今天我想和你聊一聊怎么用 Serverless 开发一个服务端渲染(SSR)应用. 对前端工程师来说,Serverless 最大的应用场景之一就是开发服务端渲染(SSR)应用.因为传统的服务端渲染应用 ...
nuxt2，服务端渲染应用框架, 从创建开发到部署上线
文章目录前言一.创建一个nuxt项目二.目录解读三.新建页面,路由跳转四.组件的使用五.插件的使用六.异步数据和代理,nuxt中使用axios和proxy代理七.nuxt Seo优化 ...

最新文章

热门文章