快捷導航

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

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

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

什么是 ISR

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

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

ISR 一般適用于符合 SSG 場景，但是卻對頁面的時限性有一定要求時。

如何實現(xiàn)

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

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

修改構(gòu)建腳本

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

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

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;

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

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

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 需要在請求時做是否構(gòu)建的判定，所以原先的靜態(tài)服務(wù)器方案無法繼續(xù)使用，我們換成 express 來實現(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');
});

我們增加一個 express 的中間件，讓其來判定文件是否過期，這里以十分鐘為例，實際場景可按需定義過期判定。這里過期后就會調(diào)用 build 文件來重新構(gòu)建該文件。要注意此處先返回再構(gòu)建，所以用戶不會等待構(gòu)建，并且此次訪問依舊是舊的內(nèi)容，構(gòu)建完成后訪問的才是新的內(nèi)容。