快捷導(dǎo)航

詳解React?ISR如何實(shí)現(xiàn)Demo

更新時(shí)間：2023年07月07日 09:58:57 作者：嘿嘿不務(wù)正業(yè)

這篇文章主要為大家介紹了React?ISR如何實(shí)現(xiàn)Demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

什么是 ISR

之前寫了兩個(gè) demo 講解了如何實(shí)現(xiàn) SSR 和 SSG，今天再寫個(gè) demo 說(shuō)在 ISR 如何實(shí)現(xiàn)。

ISR 即 Incremental Static Regeneration 增量靜態(tài)再生，是指在 SSG 的前提下，可以在收到請(qǐng)求時(shí)判定頁(yè)面是否需要刷新，如果需要?jiǎng)t重新構(gòu)建該頁(yè)面，這樣既擁有了靜態(tài)頁(yè)面的優(yōu)勢(shì)又可以避免頁(yè)面長(zhǎng)時(shí)間未更新導(dǎo)致信息過(guò)時(shí)。且由于在頁(yè)面維度驗(yàn)證，所以每次可以只構(gòu)建特定的頁(yè)面。

ISR 一般適用于符合 SSG 場(chǎng)景，但是卻對(duì)頁(yè)面的時(shí)限性有一定要求時(shí)。

如何實(shí)現(xiàn)

簡(jiǎn)單的 ISR 實(shí)現(xiàn)也很簡(jiǎn)單，只需要在收到頁(yè)面請(qǐng)求時(shí)按照更新策略判斷是否需要需要重新生成頁(yè)面，如果需要觸發(fā)頁(yè)面的構(gòu)建更新。需要注意一般情況下生成頁(yè)面不會(huì)影響頁(yè)面的響應(yīng)，而是后臺(tái)去做構(gòu)建。

現(xiàn)在就基于之前寫的 SSG demo，做一下改造讓其支持 ISR。

修改構(gòu)建腳本

由于 ISR 構(gòu)建會(huì)同時(shí)在構(gòu)建腳本和服務(wù)器中觸發(fā)，所以需要對(duì)之前的代碼做一些小小的改動(dòng)。

首先抽離出一個(gè)通用的構(gòu)建函數(shù)（由于服務(wù)器會(huì)使用到盡量避免同步代碼）：

import fs from 'fs/promises';
import { renderToString } from 'react-dom/server';
import React from 'react';
import Post from './ui/Post';
import List from './ui/List';
async function build(type: 'list'): Promise<void>;
async function build(type: 'post', name: string): Promise<void>;
async function build(type: 'list' | 'post', name?: string) {
    if (type === 'list') {
        const posts = await fs.readdir('posts');
        await fs.writeFile(
            'dist/index.html',
            `<div id="root">${renderToString(
                <List
                    list={posts.map(post => {
                        delete require.cache['posts/' + post];
                        return { ...require('./posts/' + post), key: post.replace('.json', '') };
                    })}
                />
            )}</div>`
        );
    } else {
        delete require.cache['posts/' + name];
        const postInfo = require('./posts/' + name);
        const fileName = `dist/posts/${name}.html`;
        await fs.writeFile(fileName, `<div id="root">${renderToString(<Post data={postInfo} />)}</div>`);
    }
}
export default build;

這樣就可以通過(guò) build 函數(shù)來(lái)構(gòu)建指定的 post 或者 list 頁(yè)面。

然后再將原先的構(gòu)建腳本做一下簡(jiǎn)單的修改：

import fs from 'fs';
import build from './build-util';
// make sure the dir exists
if (!fs.existsSync('dist')) {
    fs.mkdirSync('dist');
}
if (!fs.existsSync('dist/posts')) {
    fs.mkdirSync('dist/posts');
}
// get all the files in posts
const posts = fs.readdirSync('posts');
(async () => {
    for await (const post of posts) {
        await build('post', post.replace('.json', ''));
    }
    await build('list');
})();

服務(wù)器

由于 ISR 需要在請(qǐng)求時(shí)做是否構(gòu)建的判定，所以原先的靜態(tài)服務(wù)器方案無(wú)法繼續(xù)使用，我們換成 express 來(lái)實(shí)現(xiàn)：

import express from 'express';
import path from 'path';
import fs from 'fs';
import build from '../build-util';
const app = express();
const expiresTime = 1000 * 60 * 10;
app.use(function (req, res, next) {
    setTimeout(() => {
        const filename = req.path.indexOf('.html') >= 0 ? req.path : req.path + 'index.html';
        // get the file's create timestamps
        fs.stat(path.join('./dist', filename), function (err, stats) {
            if (err) {
                console.error(err);
                return;
            }
            if (Date.now() - +stats.mtime > expiresTime) {
                console.log(filename, 'files expired, rebuilding...');
                if (filename === '/index.html') {
                    build('list');
                } else {
                    build('post', path.basename(filename).replace('.html', ''));
                }
            }
        });
    });
    next();
});
app.use(express.static('dist'));
app.listen(4000, () => {
    console.log('Listening on port 4000');
});

我們?cè)黾右粋€(gè) express 的中間件，讓其來(lái)判定文件是否過(guò)期，這里以十分鐘為例，實(shí)際場(chǎng)景可按需定義過(guò)期判定。這里過(guò)期后就會(huì)調(diào)用 build 文件來(lái)重新構(gòu)建該文件。要注意此處先返回再構(gòu)建，所以用戶不會(huì)等待構(gòu)建，并且此次訪問(wèn)依舊是舊的內(nèi)容，構(gòu)建完成后訪問(wèn)的才是新的內(nèi)容。