监听 Markdown 文件并热更新 Next.js 页面

Next.js 提供了 Fast-Refresh 能力，它可以为您对 React 组件所做的编辑提供即时反馈。

但是，当你通过 Markdown 文件提供网站内容时，由于 Markdown 不是 React 组件，热更新将失效。

怎么做

解决该问题可从以下几方面思考：

1. 服务器如何监控文件更新
2. 服务器如何通知浏览器
3. 浏览器如何更新页面
4. 如何拿到最新的 Markdown 内容
5. 如何与 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 组件，负责监听来自服务端的消息，并热实现页面更新。组件满足以下要求：

1. 通过单例模式维护一个与 WebSocekt Server 的连接
2. 监听到服务端消息后，判断当前页面路由是否与变更文件有关，无关则忽略
3. 服务端消息可能会密集发送，需要在加载新版本内容时做防抖处理
4. 加载 Markdown 文件并完成更新
5. 该组件仅在 开发模式 下工作

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 页面的更多相关文章

1. ORACLE清理、截断监听日志文件（listener.log）

   在ORACLE数据库中,如果不对监听日志文件(listener.log)进行截断,那么监听日志文件(listener.log)会变得越来越大,想必不少人听说过关于"LISTENER.LOG日 ...

2. ORACLE 监听日志文件太大停止写监听日志引起数据库连接不上问题

   生产库监听日志文件太大(达到4G多),发现oracle停止写监听日志,检查参数log_file,log_directory,log_status 均正常,数据库运行也正常. 经确认确实为监听日志过大引 ...

3. 文件下载Controller,文件夹内容监听，文件上传，运行程序通过url实现文件下载

   文件下载Controller @RequestMapping("/fileDownLoad") public ResponseEntity<byte[]> fileDo ...

4. Oracle数据库运维：要对监听日志文件（listener.log）进行定期清理，如果不定期清理，会遇到下面一些麻烦

   原文链接: http://www.lookdaima.com/WebForms/WebPages/Blanks/Pm/Docs/DocItemDetail.aspx?EmPreviewTypeV=2& ...

5. 监听Documents文件夹内文件发生改变

   // 当Documents内文件发生改变时,启动计时器,每秒计算一次大小,当大小不发生改变时说明传输完毕,就开始刷新. @property (nonatomic, strong) NSTimer *t ...

6. Xlua文件在热更新中调用方法

   Xlua文件在热更新中调用方法 public class news : MonoBehaviour { LuaEnv luaEnv;//定义Lua初始变量 void Awake() { luaEnv ...

7. Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

   Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

8. Webpack多入口文件、热更新等体验

   Webpack现今流行的前端打包工具,今儿本人也来分享下自己学习体验. 一.html-webpack-plugin 实现html模板文件的解析与生成 在plugins加入HtmlWebpackPlug ...

9. arcgis engine 监听element的添加、更新和删除事件（使用IGraphicsContainerEvents）

   IGraphicsContainerEvents Interface 如何监听 element事件? 如,当我们在Mapcontrol上添加.删除.更新了一个Element后,如何捕捉到这个事件?   ...

10. apache主机（网站）配置，port监听，文件夹訪问权限及分布式权限

    前言 一个网站的两个核心信息为: 主机名称(server名/网站名):ServerName server名 网站位置(网站文件夹路径):DocumentRoot "实际物理路径" ...

随机推荐

1. ORACLE 如何查看索引重建进度情况

   在ORACLE数据库中,如果一个比较大的索引在重建过程中耗费时间比较长,那么怎么查看索引重建耗费的时间,以及完成了多少(比例)了呢,我们可以通过V$SESSION_LONGOPS视图来查看索引重建的时 ...

2. pycharm出现乱码

   1. 'gbk' codec can't encode character u'\xb8' 解决办法 import sys reload(sys)sys.setdefaultencoding('utf ...

3. 快递查询API接口对接方法

   各类接口 快递查询API有即时查询和订阅查询两种,即时是请求即返回数据,订阅则是订阅快递单号到接口,有物流轨迹更新则全量返回数据.目前常用的有快递鸟.快递100.快递网等. 快递鸟即时API可以查询3 ...

4. Apache+Subversion+TortoiseSVN

   Key words: dav_svn, apache, subversion, tortoisesvn # install apache2 sudo apt-get install libapache ...

5. Xeon Phi 《协处理器高性能编程指南》随书代码整理 part 3

   第二章,几个简单的程序 ● 代码,单线程 #include <stdio.h> #include <stdlib.h> #include <string.h> ...

6. MVC Log4Net 配置

   1.引用log4net.dll 2.在项目根目录下增加log4.config文件 <?xml version="1.0"?> <configuration> ...

7. [TF] Architecture - Computational Graphs

   阅读笔记: 仅希望对底层有一定必要的感性认识,包括一些基本核心概念. Here只关注Graph相关,因为对编程有益. TF – Kernels模块部分参见:https://mp.weixin.qq.c ...

8. spring cloud: zuul(三): ribbon负载均衡配置

   zuul的routes配置下path/url组合不支持负载均衡 下面介绍zuul的routes配置下的path/serviceId负载均衡配置 spring-boot-user微服务开启了:7901, ...

9. cocos2d-x学习之路（一）——安装cocos2d-x

   这两天想从pygame和SDL换到cocos2d-x上(主要还是为了跨平台开发),所以这里先来看看如何安装cocos2d-x. 首先到官网去下载cocos2d-x:传送门 点击上方菜单栏的Produc ...

10. C++多线程，互斥，同步

    同步和互斥 当有多个线程的时候,经常需要去同步这些线程以访问同一个数据或资源.例如,假设有一个程序,其中一个线程用于把文件读到内存,而另一个线程用于统计文件中的字符数.当然,在把整个文件调入内存之前, ...