nextjs服务端渲染原理
1. 简单的介绍一下
nextjs是react进行服务端渲染的一个工具,默认以根目录下的pages为渲染路由
比如我在pages目录下创建一个index.js文件,然后export default一个组件,就会在页面上呈现出来这个组件
这个特性作为他最知名的优点,所以被人认为是一个很很好的后端渲染工具
多用一段时间,会踩到一些坑,功能都不是白用的,想用那么牛逼的东西,要是知道的太肤浅,驾驭不了也很难受。
所以我们不得不深入了解一下
2. webpack config
用脚趾头想一下,要让react代码在服务端跑,还不是得用webpack编译嘛
所以nextjs内部肯定偷偷的封装了一层webpack的编译工具
next怎么去配置webpack呢
方法1
在更目录下的next.config.js里写配置
方法2
写个自定义的server 然后执行
比如第一种张这个样子
const path = require('path')
const webpack = require('webpack')
const withTs = require('@zeit/next-typescript')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') module.exports = withTs({
webpack(config) {
config.resolve.alias = {
'styled-components': path.resolve('node_modules', 'styled-components')
} if (process.env.ANALYZE) {
config.plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'server',
openAnalyzer: true
})
)
} config.plugins.push(new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/)) config.plugins.push(new webpack.EnvironmentPlugin(['ENV'])) return config
}
})
第二种样子会特别一点,只需要注意中间let conf的那一段代码就好了
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');
const withScss = require('@zeit/next-sass');
const withTs = require('@zeit/next-typescript')
const dev = process.env.NODE_ENV !== 'production' let conf = {
pageExtensions: ['jsx', 'js', 'mdsx'],
webpack(config) {
config.module.rules.push(
{
test: /\.(mdsx)$/,
use: ['next-babel-loader', 'zeus-md-next-loader', 'zeus-md-loader']
}
);
return config;
}
}
conf = withScss(conf)
conf = withTs(conf)
const app = next({ dev, conf })
const handle = app.getRequestHandler() app.prepare().then(() => {
createServer((req, res) => {
const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl if (pathname === '/') {
app.render(req, res, '/home', query)
} else {
handle(req, res, parsedUrl)
}
}).listen(, err => {
if (err) throw err
console.log('> Ready on http://localhost:8082')
})
})
当然并不是要用自定义服务器就不能抽离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服务端渲染原理的更多相关文章
- nextjs 服务端渲染请求参数
Post.getInitialProps = async function (context) { const { id } = context.query const res = await fet ...
- 如何使用Vue2做服务端渲染
花费了一个月时间,终于在新养车之家项目中成功部署了vue2服务端渲染(SSR),并且使用上了Vuex 负责状态管理,首屏加载时间从之前4G网络下的1000ms,提升到了现在500-700ms之间,SS ...
- 详解react/redux的服务端渲染:页面性能与SEO
亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
- Egg + Vue 服务端渲染工程化实现
在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...
- Angular开发实践(六):服务端渲染
Angular Universal Angular在服务端渲染方面提供一套前后端同构解决方案,它就是 Angular Universal(统一平台),一项在服务端运行 Angular 应用的技术. 标 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║初探SSR服务端渲染(个人博客二)
缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...
- Vue(服务端渲染)
一.前言 1.服务端渲染图解 2.简介服务端渲染 ...
- 实现ssr服务端渲染
前言 前段时间寻思做个个人网站,然后就立马行动了. 个人网站如何实现选择什么技术方案,自己可以自由决定. 刚好之前有大致想过服务端渲染,加载速度快,还有 SEO 挺适合个人网站的. 所以就自己造 ...
- 【redux】详解react/redux的服务端渲染:页面性能与SEO
亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
随机推荐
- 20.multi_case01
# 多进程,使用Pool from multiprocessing import Pool def f(x): return x*x if __name__ == '__main__': p = Po ...
- springcloud系列12 config的使用
config组件分为server端和client端 config的原理: 就是当我们将配置文件放置在git上面,那么configserver就会去拉取相关配置文件至本地: 可以看到我本地是拉去了配置文 ...
- 2019-11-7-C#-dotnet-线程不安全的弱引用缓存
title author date CreateTime categories C# dotnet 线程不安全的弱引用缓存 lindexi 2019-11-7 9:45:5 +0800 2019-11 ...
- JS数组 组团(如何创建数组)var mychar = new Array( )
组团,并给团取个名(如何创建数组) 使用数组之前首先要创建,而且需要把数组本身赋至一个变量.好比我们出游,要组团,并给团定个名字"云南之旅". 创建数组语法: var myarra ...
- Node中的模块系统
加载require var 自定义变量名称 = require('模块') 两个作用: 执行被加载模块的代码 得到被加载模块中的exports导出接口对象 导出exports node中是模块作用域, ...
- tbody设置超出固定的高度出现滚动条,没超出不显示。
没有超出时显示样式,不显示滚动条: 超出时显示滚动条: 1.html <table class="table"> <thead> <tr> &l ...
- antidependence and data hazard
See below example. ADDD F6, F0, F8 SUBD F8, F10, F14 Some article would say that “ There’s an ant ...
- 威胁预警|首现新型RDPMiner挖矿蠕虫 受害主机易被添加恶意账户
近日,阿里云安全发现一种新型挖矿蠕虫RDPMiner,通过爆破Windows Server 3389端口RDP服务的方式进行挖矿木马传播,致使用户CPU占用率暴涨,机器卡顿,更被创建名为Default ...
- 对比两个String无规律包含连续4个相同字符返回true的方法
package com.qif.dsa.util; import java.util.ArrayList; import java.util.List; /** * @author * @Title: ...
- safari跨域cookie的问题
最近做了一个项目,是将自己公司的H5页面嵌入到其他公司的pc和移动端,采用的方案是iframe,跨域数据传输用的postMessage,最后在联调过程中发现iPhone的微信中无法打开,在 Setti ...