RedisキャッシュであなたのSSRサイト42 x

REDISは主にデータベースとして使用されるメモリストアです.あなたはredisを聞いたことがありますどのように涼しいが、それのための実際のユースケースを持っていない聞いた.このチュートリアルでは、サーバー側のレンダリング( SSR ) Webアプリケーションを高速化するためにREDISを活用する方法を紹介します.あなたがRedisに新しいならば、それが働く方法のより良い考えを得るために、Installing Redisとcreating key value pairsの上で私のガイドをチェックしてください.
この記事では、ノードの調整方法を見ていきます.JS Expressのアプリケーションを使用して雷で高速キャッシュを構築する.
この結果はかなり劇的だった.ページロード時間を平均95 %で高速化できました.

問題の背景

On Fjolt、私はExpressを使用して、サーバー上のWebページをレンダリングし、ユーザーに送信します.時間が経つにつれて、私はより多くの機能を追加しました、サーバーのレンダリングは複雑さの増加している-例えば、私は最近、コード例に行番号を追加し、これは比較的話して、サーバー上の余分な処理のかなりのビットを必要としました.サーバーはまだ非常に高速ですが、より複雑さが追加されると、サーバーの計算が長くかかるとのチャンスがあります.
最終的には、遅いページの負荷時間を意味します.私は、私は誰もが高速にコンテンツを読むことを楽しむだけでなく、ページの速度が主要なSEOの意味を持っているので、しばらくの間、これは私のレーダーでこれを持っている.
Fjoltのページがロードされると、次のような急行ルートを実行します.

import express from 'express';

const articleRouter = express.Router();
// Get Singular Article
articleRouter.get(['/article/:articleName/', async function(req, res, next) {
    // Process article
    // A variable to store all of our processed HTML
    let finalHtml = '';
    // A lot more Javascript goes here
    // ...
    // Finally, send the Html file to the user
    res.send(finalHtml);
});

たびに誰かがページを読み込み、記事は地面から処理されます-そしてすべてが一度に処理されます.これは、いくつかの異なるデータベースコール、いくつかのfs.readFile関数、およびコードリンギングを作成するいくつかの全く計算複雑なDOM操作を意味します.それは心配して複雑ではありませんが、サーバーは、複数のページに複数のユーザーを処理するために、常に多くの仕事をしていることを意味します.
いずれにせよ、物事の規模として、これはサイズの増加の問題になります.幸いにも、我々はRedisをキャッシュページに使用することができますし、すぐにユーザーにそれらを表示します.

なぜウェブページをキャッシュするのにRedisを使うのか

Redisとキャスティングは、ゆっくりとした不気味なBehemothから、あなたのSSRのウェブサイトをオフにすることができます、驚くほど速い、敏感なアプリケーションに.サーバー側で物をレンダリングするとき、私たちは最終的に多くのパッケージングをします、しかし、最終製品は同じです- 1つの完全なHTMLページ、ユーザーに届けられます:

SSRウェブサイトは、ユーザーに内容を提供する方法

より速く、私たちはパッケージを作成して、レスポンスを処理することができます.プロセス負荷が高いページを持っている場合は、最後に提供されるページを作成するために多くの処理が必要となります.

プロセスを削除し、コードを最適化します.これは引き出されたプロセスであるかもしれませんが、サーバー側でより速い処理をもたらします.

REDISを使用するので、Webページはバックグラウンドでこれまで処理され、キャッシュされたバージョンは常にユーザーに表示されます.

すべての正直では、おそらく両方を行う必要があります-しかし、Redis最適化する最も速い方法を提供します.それも、現実がそこにあるとき、あなたがする多くの最適化が残されるisntであるのを助けます;.

あなたの急行へのREDISの追加

まず最初に、Redisをインストールする必要があります.Redisがサーバーまたはコンピュータにインストールされていない場合.ここでRedisをインストールする方法を見つけることができます.
次に、それをノードにインストールします.JSプロジェクトは次のコマンドを実行します.

npm i redis

私たちが今走っているので、我々は急行を変えることができます.このように見える前に私たちのルートを覚えていますか?

import express from 'express';

const articleRouter = express.Router();
// Get Singular Article
articleRouter.get(['/article/:articleName/', async function(req, res, next) {
    // Process article
    // A variable to store all of our processed HTML
    let finalHtml = '';
    // A lot more Javascript goes here
    // ...
    // Finally, send the Html file to the user
    res.send(finalHtml);
});

レイスに加えましょう:

import express from 'express';
import { createClient } from 'redis';

const articleRouter = express.Router();
// Get Singular Article
articleRouter.get(['/article/:articleName/', async function(req, res, next) {

    // Connect to Redis    
    const client = createClient();
    client.on('error', (err) => console.log('Redis Client Error', err));
    await client.connect();
    const articleCache = await client.get(req.originalUrl);
    const articleExpire = await client.get(`${req.originalUrl}-expire`);

    // We use redis to cache all articles to speed up content delivery to user
    // Parsed documents are stored in redis, and sent to the user immediately
    // if they exist
    if(articleCache !== null) {
        res.send(articleCache);
    }

    if(articleCache == null && articleExpire == null || articleExpire < new Date().getTime()) {

        // A variable to store all of our processed HTML
        let finalHtml = '';
        // A lot more Javascript goes here
        // ...
        // Finally, send the Html file to the user

        if(articleCache == null) {
            res.send(mainFile);
        }

        // We update every 10 seconds.. so content always remains roughly in sync.
        // So this not only increases speed to user, but also decreases server load
        await client.set(req.originalUrl, mainFile);
        await client.set(`${req.originalUrl}-expire`, new Date().getTime() + (10 * 1000));
    }
});

我々がここで作った変化はあまり複雑ではない.このコードでは、ページのキャッシュされたHTMLコンテンツを格納する2つのRedisキーを設定する必要があります.

コード概要

もう少し詳しく説明しましょう.

最初に、Redisをインポートするので、createClientを使用することができます.

ユーザーが我々の記事終点に行くときはいつでも、構文解析をして、記事を表示するのをジャンプする代わりに、我々はRedisをロードします.

REDISデータベースの2つのキーをチェックします.つのキーはreqです.CurrentURL例えば、このページはawait client.get('key-name')であるかもしれません.もう一方は、/article/redis-caching-ssr-site-nodejs、すなわち${req.currentUrl}-expireに格納された有効期限である

私たちの記事のキャッシュされたバージョンが存在するならば、我々はすぐにそれをユーザーに送ります.
誰かがこのページを訪問した最初の場合、または期限切れが期限切れになった場合、私たちは長い間、記事を解析しなければなりません.

は、ページが10秒ごとに長い間ロードされなければならないということを意味しているかもしれません-しかし、本当でないならば、ユーザーは常にキャッシュされたバージョンをそれが存在するならば、送られます、しかし、我々は最新の内容が利用できるように、10秒ごとにキャッシュを更新します.この更新プログラムはユーザーの負荷時間に影響しません.
したがって、スローロードが発生する唯一の時間は、このページが以前にアクセスされていない場合です.
我々がデータを保存するためにURLを使用しているので、我々はユニークなルートが我々のRedisデータベースで彼らに対して保存されるユニークなデータを持つと確信することがありえます.最終的に、これは私のウェブサイトのためにトップでイメージに示されるように、95 %の最初のバイト(TTFB)への時間の改善につながりました.

警告と結論

私のルートが複雑になってきたので、ここでの保存時間は実に大きかった.あなたのルートがスーパー複雑でないならば、あなたの時間節約はより少ないかもしれません.しかし、それを言って、あなたはまだこのメソッドを使用してかなり重要な速度の向上を得る可能性があります.
この例では、単純な変更がどのようにSSRサイトに大きなパフォーマンス影響を与えることができるかを証明し、Redisのための大きなユースケースです.私はあなたがこれを見つけて、あなた自身のサイトやアプリケーションでそれを使用する方法を見つける願っています.