监听 Markdown 文件并热更新 Next.js 页面
Next.js 提供了 Fast-Refresh 能力,它可以为您对 React 组件所做的编辑提供即时反馈。
但是,当你通过 Markdown 文件提供网站内容时,由于 Markdown 不是 React 组件,热更新将失效。
怎么做
解决该问题可从以下几方面思考:
- 服务器如何监控文件更新
- 服务器如何通知浏览器
- 浏览器如何更新页面
- 如何拿到最新的 Markdown 内容
- 如何与 Next.js 开发服务器一起启动
监控文件更新
约定: markdown 文件存放在 Next.js 项目根目录下的
_contents/
中
通过 node:fs.watch
模块递归的监控 _contents
目录,当文件发生变更,触发 listener 执行。
新建文件 scripts/watch.js
监控 _contents
目录。
const { watch } = require('node:fs');
function main(){
watch(process.cwd() + '/_contents', { recursive: true }, (eventType, filename) => {
console.log(eventType, filename)
});
}
通知浏览器
服务端通过 WebSocket 与浏览器建立连接,当开发服务器发现文件变更后,通过 WS 通知浏览器更新页面。
浏览器需要知道被更新的文件与当前页面所在路由是否有关,因此,服务端发送给浏览器的消息应至少包含当前
更新文件对应的页面路由。
WebSocket
ws
是一个简单易用、速度极快且经过全面测试的 WebSocket 客户端和服务器实现。通过 ws
启动 WebSocket 服务器。
const { watch } = require('node:fs');
const { WebSocketServer } = require('ws')
function main() {
const wss = new WebSocketServer({ port: 80 })
wss.on('connection', (ws, req) => {
watch(process.cwd() + '/_contents', { recursive: true }, (eventType, filename) => {
const path = filename.replace(/\.md/, '/')
ws.send(JSON.stringify({ event: 'markdown-changed', path }))
})
})
}
浏览器连接服务器
新建一个 HotLoad
组件,负责监听来自服务端的消息,并热实现页面更新。组件满足以下要求:
- 通过单例模式维护一个与 WebSocekt Server 的连接
- 监听到服务端消息后,判断当前页面路由是否与变更文件有关,无关则忽略
- 服务端消息可能会密集发送,需要在加载新版本内容时做防抖处理
- 加载 Markdown 文件并完成更新
- 该组件仅在
开发模式
下工作
import { useRouter } from "next/router"
import { useEffect } from "react"
interface Instance {
ws: WebSocket
timer: any
}
let instance: Instance = {
ws: null as any,
timer: null as any
}
function getInstance() {
if (instance.ws === null) {
instance.ws = new WebSocket('ws://localhost')
}
return instance
}
function _HotLoad({ setPost, params }: any) {
const { asPath } = useRouter()
useEffect(() => {
const instance = getInstance()
instance.ws.onmessage = async (res: any) => {
const data = JSON.parse(res.data)
if (data.event === 'markdown-changed') {
if (data.path === asPath) {
const post = await getPreviewData(params)
setPost(post)
}
}
}
return () => {
instance.ws.CONNECTING && instance.ws.close(4001, asPath)
}
}, [])
return null
}
export function getPreviewData(params: {id:string[]}) {
if (instance.timer) {
clearTimeout(instance.timer)
}
return new Promise((resolve) => {
instance.timer = setTimeout(async () => {
const res = await fetch('http://localhost:3000/api/preview/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
})
resolve(res.json())
}, 200)
})
}
let core = ({ setPost, params }: any)=>null
if(process.env.NODE_ENV === 'development'){
console.log('development hot load');
core = _HotLoad
}
export const HotLoad = core
数据预览 API
创建数据预览 API,读取 Markdown 文件内容,并编译为页面渲染使用的格式。这里的结果
应与 [...id].tsx
页面中 getStaticProps()
方法返回的页面数据结构完全一致,相关
逻辑可直接复用。
新建 API 文件 pages/api/preview.ts
,
import type { NextApiRequest, NextApiResponse } from 'next'
import { getPostData } from '../../lib/posts'
type Data = {
name: string
}
export default async function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
if (process.env.NODE_ENV === 'development') {
const params = req.body
const post = await getPostData(['posts', ...params.id])
return res.status(200).json(post)
} else {
return res.status(200)
}
}
更新页面
页面 pages/[...id].tsx
中引入 HotLoad
组件,并传递 setPostData()
及 params
给 HotLoad
组件。
...
import { HotLoad } from '../../components/hot-load'
const Post = ({ params, post, prev, next }: Params) => {
const [postData, setPostData] = useState(post)
useEffect(()=>{
setPostData(post)
},[post])
return (
<Layout>
<Head>
<title>{postData.title} - Gauliang</title>
</Head>
<PostContent post={postData} prev={prev} next={next} />
<BackToTop />
<HotLoad setPost={setPostData} params={params} />
</Layout>
)
}
export async function getStaticProps({ params }: Params) {
return {
props: {
params,
post:await getPostData(['posts', ...params.id])
}
}
}
export async function getStaticPaths() {
const paths = getAllPostIdByType()
return {
paths,
fallback: false
}
}
export default Post
启动脚本
更新 package.json
的 dev
脚本:
"scripts": {
"dev": "node scripts/watch.js & \n next dev"
},
总结
上述内容,整体概述了大致的实现逻辑。具体项目落地时,还需考虑一些细节信息,
如:文件更新时希望能够在命令行提示更的文件名、针对个性化的路由信息调整文件与路由的匹配逻辑等。
Next.js 博客版原文:https://gauliang.github.io/blogs/2022/watch-markdown-files-and-hot-load-the-nextjs-page/
监听 Markdown 文件并热更新 Next.js 页面的更多相关文章
- ORACLE清理、截断监听日志文件(listener.log)
在ORACLE数据库中,如果不对监听日志文件(listener.log)进行截断,那么监听日志文件(listener.log)会变得越来越大,想必不少人听说过关于"LISTENER.LOG日 ...
- ORACLE 监听日志文件太大停止写监听日志引起数据库连接不上问题
生产库监听日志文件太大(达到4G多),发现oracle停止写监听日志,检查参数log_file,log_directory,log_status 均正常,数据库运行也正常. 经确认确实为监听日志过大引 ...
- 文件下载Controller,文件夹内容监听,文件上传,运行程序通过url实现文件下载
文件下载Controller @RequestMapping("/fileDownLoad") public ResponseEntity<byte[]> fileDo ...
- Oracle数据库运维:要对监听日志文件(listener.log)进行定期清理,如果不定期清理,会遇到下面一些麻烦
原文链接: http://www.lookdaima.com/WebForms/WebPages/Blanks/Pm/Docs/DocItemDetail.aspx?EmPreviewTypeV=2& ...
- 监听Documents文件夹内文件发生改变
// 当Documents内文件发生改变时,启动计时器,每秒计算一次大小,当大小不发生改变时说明传输完毕,就开始刷新. @property (nonatomic, strong) NSTimer *t ...
- Xlua文件在热更新中调用方法
Xlua文件在热更新中调用方法 public class news : MonoBehaviour { LuaEnv luaEnv;//定义Lua初始变量 void Awake() { luaEnv ...
- Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- Webpack多入口文件、热更新等体验
Webpack现今流行的前端打包工具,今儿本人也来分享下自己学习体验. 一.html-webpack-plugin 实现html模板文件的解析与生成 在plugins加入HtmlWebpackPlug ...
- arcgis engine 监听element的添加、更新和删除事件(使用IGraphicsContainerEvents)
IGraphicsContainerEvents Interface 如何监听 element事件? 如,当我们在Mapcontrol上添加.删除.更新了一个Element后,如何捕捉到这个事件? ...
随机推荐
- [资源] 桃宝上十几块买的C#教程网盘
我粗略的看了下觉得挺好的,分享给大家 链接:https://pan.baidu.com/s/1iHuLUXde4_L7NB-Zw9JWNg 提取码:1314
- OpenHarmony 3.1 Beta版本关键特性解析——HiStreamer框架大揭秘
(以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点) 陈国栋 数字多媒体技术在过去的数十年里得到了飞速的发展,多媒体终端设备如智能音箱.智能门锁.智能手表广泛应用于人们 ...
- Spring从入门到源码—IOC基本使用(二)
1.spring_helloworld 使用maven的方式来构建项目(Mavaen) 添加对应的pom依赖 pom.xml <dependencies> <!-- https:// ...
- BUUCTF-MISC:二维码
题目 解题过程 1.点击下载附件,发现是一个压缩包,解压后得到一张二维码 2.使用QR research扫描,得到的内容并不是flag 3.使用010editor打开图片分析,发现图片里面含有一个tx ...
- Oracle 数据库表删除重复数据
删除重复数据并保留一条 方法一 1.建立临时表,记录重复的数据 create table 临时表 as select a.字段1,a.字段2,max(a.rowid) as dataid from 原 ...
- [AcWing 28] 在O(1)时间删除链表结点
点击查看代码 /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * L ...
- [AcWing 771] 字符串中最长的连续出现的字符
点击查看代码 #include<iostream> using namespace std; string str; int n; int main() { cin >> n; ...
- 使用Typora + 阿里云OSS + PicGo 打造自己的图床
使用Typora + 阿里云OSS + PicGo 打造自己的图床 为什么要打造图床? 让笔记远走高飞 试问以下场景: 我们要把 markdown 笔记放到某博客上,直接进行复制即可.但因你的图片存储 ...
- 搭建PWN学习环境
环境清单 系统环境 Ubuntu22.04 编写脚本 pwntools ZIO 调试 IDA PRO gdb pwndbg ROP工具 checksec ROPgadget one_gadget Li ...
- Idea使用入门
jeecgboot推荐使用的idea是2019,原使用的2017在自动识别maven项目上有点问题,甚至2019在一些报错下仍然可以直接运行项目 idea的安装结构(卸载细节涉及) 下载文件位 ...