在前段时间折腾过搭建react服务器端项目架构,点击这里了解下,正好最近有个重构PC网站的需求,考虑SEO等因素。在做技术选型的时候决定采用nextjs。项目开发过程中,nextjs的体验非常棒,个人觉得比create-react-app开发体验还要好,特别是HMR功能,虽然都有这个功能,但是nextjs做的更好一些。CRA里面修改了代码,格式化了文档,会导致整个页面刷新,这对于SPA项目的开发体验就很不好了。我在使用nextjs的开发过程中,如果不是自己主动去刷新浏览器,几乎就没有刷新过整个页面,所有的修改都是在不刷新页面的前提下就反映到了页面上,这个体验真的很棒。

入门体验

nextjs的文档个人觉得写的不算特别详细,好在github的examples目录下有很多示例可以参考,比如我没有使用now来做部署,而是使用了express。很容易就找到参考的示例。开发过程编译,打包等速度都很快,开发体验一直非常愉悦。

项目中的几个设置

1. 里面用的三个依赖的左右:

① nextjs配置多个插件时使用next-compose-plugins很容易解决,要不然,写起会有点麻烦

② 把图片当成模块一样引入需要使用next-images

③ 样式支持less需要next-less

2. BuildId我这里就直接固定一个,如果以后开发新版改成v2(或其也行)

3. 打包目录distDir修改为build(默认为.next)

部署时遇到的问题

1. 设置context来访问的问题

部署时,我需要配置一个context,因为一个域名下有多个项目。本地开放时都是根路径,没啥问题,但是现在需要设置一个context(访问格式:域名/context)。修改入口文件app.js(或者server.js,项目通过node app.js来启动),在得到如下结果之前,我还是折腾了1天多,最终通过查看一些源码,多方调试才成功。

修改下next.config.js

2. windows下开发部署到linux上的路径中的’\\’问题

两个办法一个是手动替换pages-manifest.json文件里面所有路径下的’\\’,替换为’/’

另外一个办法:(推荐)

在linux上面去打包,这样一劳永逸,最省事。所以开发环境还是mac好啊

小结

推荐使用nextjs来做基于React的服务器端渲染,虽然个人造轮子也重要,但是实际开发使用一个开源的,受欢迎的框架来提高开发效率,降低风险更明智。

作者:张雪飞
出处:https://zhangxuefei.site/p/2195
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

React服务器端渲染框架next.js项目实战及部署上下文context问题解决办法的更多相关文章

  1. React服务器端渲染值Next.js

    昨天leader给分配了新任务,让熟悉一下ssr,刚开始有点懵,啥玩意?百度了一下,不就是服务器端渲染(server side render,简称: ssr). ssr简介 服务端渲染一个很常见的场景 ...

  2. react基础学习和react服务端渲染框架next.js踩坑

    说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...

  3. next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序

    前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如v ...

  4. 基于React服务器端渲染的博客系统

    系统目录及源码由此进入 目录 1. 开发前准备 1.1 技术选型1.2 整体设计1.3 构建开发 2. 技术点 2.1 react2.2 redux, react-router2.3 server-r ...

  5. 玩转 React 服务器端渲染

    React 提供了两个方法 renderToString 和 renderToStaticMarkup 用来将组件(Virtual DOM)输出成 HTML 字符串,这是 React 服务器端渲染的基 ...

  6. React 服务器端渲染流程

    其实我们在访问客户端渲染的页面时,请求到的只是一个 html 空壳,里面引入了一个 js 文件,所有的内容都是通过 js 进行插入的,正是因为页面是由 js 渲染出来的,所以会带来如下几个问题: 1. ...

  7. 苹果ios用js的Date()出现NaN问题解决办法

    原文:苹果ios用js的Date()出现NaN问题解决办法 ios使用如下方法获得NaN,安卓手机则是正常计算,解决方法是换个这个时间的格式 new Date("2017-04-28 23: ...

  8. Docker实战 | 第三篇:Docker安装Nginx,实现基于vue-element-admin框架构建的项目线上部署

    一. 前言 在上一文中 点击跳转 通过IDEA集成Docker插件实现微服务的一键部署,但 youlai-mall 是前后端分离的项目,除了后端微服务的部署之外,当然还少不了前端工程的部署.所以本篇讲 ...

  9. Nuxt.js项目实战

    感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...

随机推荐

  1. golang数据结构之选择排序

    //SelectSort 选择排序 func SelectSort(arr *[]int) { ; i < len(arr); i++ { tmp := arr[i] index := i ; ...

  2. C#读取匿名对象的属性值的方法总结

    目录 1.通过反射的方式获取属性值 2.新建个扩展方法,将object转成对应的匿名对象 通过new出匿名对象,可以直接调用该匿名对象的属性名,获取属性值. var objUser = new {Na ...

  3. 关于.Net Core 部署在Linux下连接SqlServer数据库超时解决办法

    .Net Core 在 Linux 下连接 SqlServer 需要 SqlServer2008 SP3或以上版本,或SqlServer2012,或SqlServer2014. 如果SqlServer ...

  4. python基础(4):用户交互、if判断、while循环、break和continue

    1. 用户交互 使⽤input()函数,可以让我们和计算机互动起来 语法: 内容 = input(提⽰信息) 这⾥可以直接获取到⽤户输入的内容 content = input("你吃了么?& ...

  5. numpy 和 tensorflow 中的各种乘法(点乘和矩阵乘)

    点乘和矩阵乘的区别: 1)点乘(即" * ") ---- 各个矩阵对应元素做乘法 若 w 为 m*1 的矩阵,x 为 m*n 的矩阵,那么通过点乘结果就会得到一个 m*n 的矩阵. ...

  6. 尉蓝色的P2P金融众筹平台手机模板

    蓝色的p2p金融投资众筹网手机模板html整站下载.实用的众筹app手机模板下载.主要页面有:众筹项目.发布.个人中心.登录.注册.优惠券.回报.项目详情.我要支持.帮助中心等总共37个手机页面. 模 ...

  7. 性能优化之mybatis实现接口的批量查询,减少数据库的查询消耗

    <select id="selectByTime" resultType="com.neo.xnol.api.activity.dto.ActivityMqmsgD ...

  8. MAC TXT文本

    Mac系统下.txt格式的纯文本怎么保存? 作者:佚名 字体:[增加 减小] 来源:互联网 时间:06-02 14:29:23 我要评论 Mac系统下.txt格式的纯文本怎么保存?.txt是个用途广泛 ...

  9. (一)创建新的react native 应用程序

    最近开始学习ReactNative了,首先了解下ReactNative http://wiki.jikexueyuan.com/project/react-native/GettingStarted. ...

  10. [转]国内阿里Maven仓库镜像Maven配置文件Maven仓库速度快

    原文地址:http://www.cnblogs.com/ae6623/p/4416256.html 国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用. ...