1. 简单的介绍一下

nextjs是react进行服务端渲染的一个工具,默认以根目录下的pages为渲染路由

比如我在pages目录下创建一个index.js文件,然后export default一个组件,就会在页面上呈现出来这个组件

这个特性作为他最知名的优点,所以被人认为是一个很很好的后端渲染工具

多用一段时间,会踩到一些坑,功能都不是白用的,想用那么牛逼的东西,要是知道的太肤浅,驾驭不了也很难受。

所以我们不得不深入了解一下

2. webpack config

用脚趾头想一下,要让react代码在服务端跑,还不是得用webpack编译嘛

所以nextjs内部肯定偷偷的封装了一层webpack的编译工具

next怎么去配置webpack呢

方法1

在更目录下的next.config.js里写配置

方法2

写个自定义的server 然后执行

比如第一种张这个样子

  1. const path = require('path')
  2. const webpack = require('webpack')
  3. const withTs = require('@zeit/next-typescript')
  4. const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
  5.  
  6. module.exports = withTs({
  7. webpack(config) {
  8. config.resolve.alias = {
  9. 'styled-components': path.resolve('node_modules', 'styled-components')
  10. }
  11.  
  12. if (process.env.ANALYZE) {
  13. config.plugins.push(
  14. new BundleAnalyzerPlugin({
  15. analyzerMode: 'server',
  16. openAnalyzer: true
  17. })
  18. )
  19. }
  20.  
  21. config.plugins.push(new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/))
  22.  
  23. config.plugins.push(new webpack.EnvironmentPlugin(['ENV']))
  24.  
  25. return config
  26. }
  27. })

第二种样子会特别一点,只需要注意中间let conf的那一段代码就好了

  1. const { createServer } = require('http');
  2. const { parse } = require('url');
  3. const next = require('next');
  4. const withScss = require('@zeit/next-sass');
  5. const withTs = require('@zeit/next-typescript')
  6. const dev = process.env.NODE_ENV !== 'production'
  7.  
  8. let conf = {
  9. pageExtensions: ['jsx', 'js', 'mdsx'],
  10. webpack(config) {
  11. config.module.rules.push(
  12. {
  13. test: /\.(mdsx)$/,
  14. use: ['next-babel-loader', 'zeus-md-next-loader', 'zeus-md-loader']
  15. }
  16. );
  17. return config;
  18. }
  19. }
  20. conf = withScss(conf)
  21. conf = withTs(conf)
  22. const app = next({ dev, conf })
  23. const handle = app.getRequestHandler()
  24.  
  25. app.prepare().then(() => {
  26. createServer((req, res) => {
  27. const parsedUrl = parse(req.url, true)
  28. const { pathname, query } = parsedUrl
  29.  
  30. if (pathname === '/') {
  31. app.render(req, res, '/home', query)
  32. } else {
  33. handle(req, res, parsedUrl)
  34. }
  35. }).listen(, err => {
  36. if (err) throw err
  37. console.log('> Ready on http://localhost:8082')
  38. })
  39. })

当然并不是要用自定义服务器就不能抽离next.config.js了

是可以的,next有一个server,所以我们才会有next build, next dev, next start的命令。

这个server和我们自定义的server差不多,他会在执行next()这个方法的时候去找option.conf,如果找不到就会去找next.config.js里的了,那找到了就不管next.config.js了

对了,他也有自己默认的配置,所以我们写的配置是拿过去和原有的config合并的,不是代替原来的,因此这些config的写法和webpack里的是有点点区别的,多会去使用push,assign之类的

总而言之next的webpack的自定义能力还是比较强的,不需要担心配置webpack

3. 热更新

使用热更新是一件让开发很爽的事情,对于前端来说,代码和展示是同步的好么,对了我说的不是那种刷新浏览器的热更新,是不刷新的那种热更新

nextjs的热更新的同步很快的,快到让开发觉得觉得从此写前端是一件很嗨皮的事情了。我觉得一个后端如果发现了这个秘密,都会每天偷偷的撸几个前端页面嗨皮一下了

盲目的沉迷是就是误入歧途,所以我决定做一个理性的追随者

实现的原理比较简(fu)单(za)

Nodejs 热更新 原理及代码   来自某个网友的回答

1. 监视文件被改动的时候

2. 将缓冲区中已加载的对应模块清除

3. 此时缓冲区中就不保留有该文件模块的代码

4. 直至下一个请求该文件模块到来时,才会去重新加载一遍对应的模块,而正是改动之后的文件模块。

  • 如何更新模块代码

  • 如何使用新模块处理请求

  • 如何释放老模块的资源

nextjs服务端渲染原理的更多相关文章

  1. nextjs 服务端渲染请求参数

    Post.getInitialProps = async function (context) { const { id } = context.query const res = await fet ...

  2. 如何使用Vue2做服务端渲染

    花费了一个月时间,终于在新养车之家项目中成功部署了vue2服务端渲染(SSR),并且使用上了Vuex 负责状态管理,首屏加载时间从之前4G网络下的1000ms,提升到了现在500-700ms之间,SS ...

  3. 详解react/redux的服务端渲染:页面性能与SEO

        亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染)   react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...

  4. Egg + Vue 服务端渲染工程化实现

    在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...

  5. Angular开发实践(六):服务端渲染

    Angular Universal Angular在服务端渲染方面提供一套前后端同构解决方案,它就是 Angular Universal(统一平台),一项在服务端运行 Angular 应用的技术. 标 ...

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

    缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...

  7. Vue(服务端渲染)

    一.前言 1.服务端渲染图解                                                 2.简介服务端渲染                             ...

  8. 实现ssr服务端渲染

    前言 前段时间寻思做个个人网站,然后就立马行动了.  个人网站如何实现选择什么技术方案,自己可以自由决定.  刚好之前有大致想过服务端渲染,加载速度快,还有 SEO 挺适合个人网站的.  所以就自己造 ...

  9. 【redux】详解react/redux的服务端渲染:页面性能与SEO

        亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染)   react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...

随机推荐

  1. 牛客多校第六场 B Shorten IPv6 Address 模拟

    题意: 给你一个二进制表示的IPv6地址,让你把它转换成8组4位的16进制,用冒号分组的表示法.单组的前导0可以省略,连续多组为0的可以用两个冒号替换,但是只允许替换一次.把这个地址通过这几种省略方式 ...

  2. HTML <body>的常用属性

    bgColor : 网页背景色  如 <body bgColor="red"> Background : 网页背景图片的地址 如 <body background ...

  3. vue引入外部css和js

    <template> <div id="app" > </div> </template> <script src=" ...

  4. vuex的使用入门-官方用例

    store/index.js import Vue from 'vue' import Vuex from 'vuex'; // 使用vuex Vue.use(Vuex) const store = ...

  5. <转>http协议 文件下载原理详解

    最近研究了一下关于文件下载的相关内容,觉得还是写些东西记下来比较好.起初只是想研究研究,但后来发现写个可重用性比较高的模块还是很有必要的,我想这也是大多数开发人员的习惯吧. 对于HTTP协议,向服务器 ...

  6. C++ 系列:typedef 和 #define 的区别

    总结一下typedef和#define的区别 1.概念 #define 它在编译预处理时进行简单的替换,不作正确性检查.它是预处理指令. typedef 它在自己的作用域内给一个已经存在的类型一个别名 ...

  7. Jmeter教程 简单的压力测试【转】

    Jmeter教程 简单的压力测试[转] Jmeter是一个非常好用的压力测试工具.  Jmeter用来做轻量级的压力测试,非常合适,只需要十几分钟,就能把压力测试需要的脚本写好. 阅读目录 什么是压力 ...

  8. LUOGU P1291 [SHOI2002]百事世界杯之旅 (期望dp)

    传送门 解题思路 期望$dp$.因为这个是期望步数,所以要倒着推.那么这道题就变得一脸可做了,设$f[i]$表示还有$i$张牌没有收集的期望,那么考虑再抽一张,有$(n-i)/n$的概率抽到抽过的牌, ...

  9. Docker系列(十二):Kubernetes的分布式网络实践

    tip:本节课的学习视频没有找到,所以有的地方可能不是很清晰. 可选的几种网络方案 openvswitch 是一种主流的虚拟化大二层技术 灵活 对现有物理网络没要求 业界主流 软件封装导致性能低 复杂 ...

  10. Nginx是什么

    Nginx很强大,通常作为反向代理服务器,什么是反向代理服务器?就是客户端发送请求给Nginx ,Nginx收到请求后将请求转发给真正的服务器,然后接受服务器处理的结果,最后发送给客户端.客户端以为N ...