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

如题;本文所讲架构主要用到技术栈有: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

时间: 2024-10-27 10:46:59

使用Node搭建reactSSR服务端渲染架构的相关文章

如何搭建一个基于 Egg + Webpack + Vue 的服务端渲染工程项目呢?

如何搭建一个基于 Egg + Webpack + Vue 的服务端渲染工程项目呢? 项目你可以通过 easywebpack-cli 直接初始化即可完成或者clone egg-vue-webpack-boilerplate.下面说明一下从零如何搭建一个Egg + Webpack + Vue 的服务端渲染工程项目. 通过 egg-init 初始化 egg 项目 egg-init egg-vue-ssr // choose Simple egg app 安装 easywebpack-vue 和 egg

网页开发方式-从静态页面到服务端渲染

前言 网页的最初形式就是一个个静态页面,例如我们写了一个 html 文件,放在服务器上就可以供用户访问了. 而后网站变得需要展示更多的内容,让内容更加动态,因此需要接入数据库,配合数据库的内容做展示,于是诞生了 html 模板引擎,用于把动态的数据插入到 html 中,叫做动态页面,后面我会叫它为传统的动态页面,例如 java 的 Jsp,php 的 Smarty 和 node 的 Jade 等. 再后来伴随浏览器的发展,网页交互变得越来越复杂等一系列原因,前端技术突飞猛进,诞生了前后端分离的单

React服务端渲染总结

欢迎吐槽 : ) 本demo地址( 前端库React+mobx+ReactRouter ):https://github.com/Penggggg/react-ssr.本文为笔者自学总结,有错误的地方恳请各位指出 O(∩_∩)O          序:前言.原因与思路.注意事项与问题.详解.       一.前言 为什么需要服务端渲染?什么情况下进行服务端渲染?笔者认为,当我们要求渲染时间尽量快.页面响应速度快时(优点),才会采用服务器渲染,并且应该“按需”对页面进行渲染 ——“首次加载/首屏”

使用 PHP 来做 Vue.js 的 SSR 服务端渲染

对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/server-side-rendering 和 spatie/laravel-server-side-rendering适配 laravel 应用. 让我们一起来仔细研究一些服务端渲染的概念,权衡优缺点,然后遵循第一法则用 PHP 建立一个服务端渲染. 什么是服务端渲染 一个单页应用(通常也叫做 SPA

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║实战二:初探SSR服务端渲染(个人博客二)

缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大家增加点儿学习的动力,每天提醒下,完全没有提纲或者安排说明什么的,就是按照我自己学的方向走,正好发现了一个规律就是:每一个系列正好是 1 个引子 + 12 篇正文,不知道大家对这个有没有感觉,大家可能看到我的头像就知道了,哈哈,其实我是一个红迷,正好这里机缘巧合,两个系列都形成了这样的,我自私的给自

Vue服务端渲染和Vue浏览器端渲染的性能对比

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D

实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. 话不多说,我们分别来看两个Demo:(欢迎star 欢迎pull request) 1.浏

使用 Vue 2.0 实现服务端渲染的 HackerNews

Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.vue-hackernews-2.0 是 Vue 作者在GitHub上面放的 Vue 2.0 的一个示例项目,结合 Express.vue-router & vuex 来构建,是很好的学习案例. Features Server Side Rendering Vue + vue-router + vue

Server-Side Rendering(服务端渲染)的优点与缺点

优点 1. SEO 客户端渲染,页面中只有初始的几个html容器,js生成内容填充到容器中,爬虫只能识别到初始的html容器,js生成的内容一般不会被识别,而服务端渲染直接给出html,爬虫可以识别到所有内容 2. 首屏渲染性能 第一次加载过慢,很多客户端渲染的js有一定体积,得等到js加载解析完成才能显示首屏内容,影响体验 缺点 服务端渲染会对服务端造成一定的并发压力 如果使用nodejs进行渲染,需要增加额外的node节点维护成本,node调用其他服务,会产生额外的性能损耗