サーバーレスRedisでのレンダリングの使用

次に、アプリケーションに単純なビューカウンターを実装しましょう。 pages/index.jsを開きます まず、前にインストールしたSDKをインポートします。ファイルの先頭は次のようになります：

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { Redis } from "@upstash/redis";
const redis = Redis.fromEnv();

ファイルの下部で、getServerSidePropsを利用しましょう。 サーバー側のUpstashデータベースにリクエストを送信できるようにします。

export async function getServerSideProps(ctx) {
  // get current path
  const key = ctx.req.url;
  // get current views
  const views = await redis.get(key);
  // increment views by one
  await redis.incr(key);
  return {
    props: {
      views: views ? parseInt(views) : 0,
    },
  };
}

すごい！誰かがページをリクエストするたびに、そのページのページビューが1つ増えます。この実装は動的ページでも再利用できます（例：[slug].js ）。しかし、これをWebページにどのように反映しますか？

ページ上部のインポートのすぐ下に、次のコード行が表示されます。

export  default  function  Home() {

この行を次のように変更します：

export  default  function  Home({ views }) {

viewsを返します getServerSidePropsを介して小道具を介して 、およびviewsを参照するだけで、これをWebサイトで使用できます。 変数。この例では、見出しの下の説明を削除し、次のように変更しました。

<p className={styles.description}>This page has {views} views</p>

これで、ページをリロードするたびに、ビューが1つ増えるはずです！

GitHubにプッシュ

次のステップでRenderに簡単にデプロイできるように、コードをGitHubにプッシュしましょう。 GitHubで新しいリポジトリを作成し、これらのコマンドを実行して続行します。

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/your_username/repo_you_just_made.git
git push origin main

上記のコマンドは、作成したGitHubリポジトリにコードをプッシュします。これが私のものです。