Next.js: кешируем страницы с помощью кастомного сервера и Redis

Привет, друзья!

В одной из предыдущих статей я рассказывал об оптимизации изображений с помощью Imgproxy и их кешировании на клиенте с помощью сервис-воркера. В этой статье я хочу рассказать вам о кешировании разметки, генерируемой Next.js, с помощью кастомного сервера и Redis, а также показать один простой прием, позволяющий существенно ускорить серверный рендеринг определенных страниц.

Репозиторий с исходным кодом проекта.

Если вам это интересно, прошу под кат.

Подготовка и настройка проекта

Обратите внимание: для успешного прохождения туториала на вашей машине должны быть установлены Node.js и Docker.

Создаем шаблон приложения с помощью create-next-app:

# next-redis - название проекта
yarn create next-app next-redis
# or
npx create-next-app next-redis

Переходим в созданную директорию и устанавливаем несколько дополнительных зависимостей:

yarn add cron dotenv express redis

yarn add -D nodemon
# or
npm i ...
npm i -D nodemon

• cron — утилита для выполнения отложенных и периодических задач;
• dotenv — утилита для доступа к переменным среды окружения;
• express — Node.js-фреймворк для разработки веб-серверов;
• redis — библиотека для работы с Redis;
• nodemon — утилита для запуска сервера для разработки.

Создаем в корневой директории файл .env следующего содержания:

# название приложения
APP_NAME=my-app

# дефолтная среда разработки
ENV=development

# версия `Node.js`
NODE_VERSION=16.13.1

# пароль для доступа к `redis`
REDIS_PASSWORD=qwerty

# код подтверждения, который мы будем использовать для очистки кеша, хранящегося в `redis`
VERIFICATION_CODE=super-secret

Настроим Docker-сервис для redis.

Создаем в корневой директории файл docker-compose.yml следующего содержания:

# версия `Compose`
version: '3.9'
# сервисы приложения
services:
  # название сервиса
  redis:
    # файл, содержащий переменные среды окружения
    env_file: .env
    # название контейнера
    container_name: ${APP_NAME}_redis
    # используемый образ
    image: bitnami/redis:latest
    # том для хранения данных
    volumes:
      - ./data_redis:/data
    # порты `хост:контейнер`
    ports:
      - 6379:6379
    # политика перезапуска контейнера
    restart: on-failure

Выполняем команду docker compose up -d для запуска сервиса.

Получаем сообщение от redis о его готовности к работе.

На этом подготовка и настройка проекта завершены.

Переходим к разработке клиентской части приложения.

Клиентская часть приложения

Клиентская часть нашего приложения будет максимально простой:

components - компоненты
  Nav.js - панель навигации
pages - страницы
  _app.js - основной компонент приложения
  about.js
  catalog.js
  index.js
public
  favicon.ico
styles
  global.css

components/Nav.js:

/* eslint-disable */
export default function Nav() {
  return (
    <nav>
      <ul>
        <li>
          <a href='/'>Home</a>
        </li>
        <li>
          <a href='/catalog'>Catalog</a>
        </li>
        <li>
          <a href='/about'>About</a>
        </li>
      </ul>
    </nav>
  )
}

О том, почему в данном случае мы используем тег a, а не компонент Link из пакета next/link, см. ниже.

pages/index.js:

export default function Home() {
  return <h2>Welcome to Home Page</h2>
}

pages/about.js:

export default function Home() {
  return <h2>This is About Page</h2>
}

Эти страницы являются статическими (dumb/глупыми в терминологии React).

pages/catalog.js:

// адрес сервера
const SERVER_URI = process.env.SERVER_URI || 'http://localhost:5000'

// наличие функции `getServerSideProps` указывает на
// серверный рендеринг данной страницы
//
// мы хотим получать от сервера список/массив категорий
export async function getServerSideProps() {
  let categories = []

  try {
    const res = await fetch(`${SERVER_URI}/current-categories`)
    categories = await res.json()
  } catch (err) {
    console.error(err)
  }

  return {
    props: {
       categories
    }
  }
}

export default function Catalog({ categories }) {
  return (
    <>
      <h2>This is Catalog Page</h2>
      {/* рендерим категории, полученные от сервера */}
      <ul>
        {categories.map((category) => (
          <li key={category.id}>{category.title}</li>
        ))}
      </ul>
    </>
  )
}

Эта страница рендерится на сервере при каждом запросе. Что это означает?

На самом высоком уровне это означает следующее:

• при переходе на данную страницу клиент отправляет серверу next запрос на получение разметки в виде строки;
• сервер выполняет код функции getServerSideProps для получения необходимых для формирования разметки данных;
• сервер рендерит страницу (с помощью метода renderToHtml);
• готовая разметка возвращается клиенту в виде строки;
• клиент выполняет гидратацию/гидрацию (hydration), преобразуя строку в "настоящую" разметку.

pages/_app.js:

import '../styles/globals.css'
import Nav from '../components/Nav'

function MyApp({ Component, pageProps }) {
  return (
    <div className='app'>
      <header>
        <h1>Next.js + Redis</h1>
        <Nav />
      </header>
      <main>
        <Component {...pageProps} />
      </main>
      <footer>
        <p>&copy; 2022. Not all rights reserved</p>
      </footer>
    </div>
  )
}

export default MyApp

Без комментариев.

Минимальные глобальные стили (global.css):

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

* {
  box-sizing: border-box;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: center;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

a {
  text-decoration: none;
}

main {
  flex-grow: 1;
  display: grid;
  place-content: center;
}

На этом разработка клиентской части нашего приложения завершена.

Переходим к серверной части, ради которой мы, собственно, здесь и собрались.

Серверная часть приложения

Серверная часть нашего приложения будет немного сложнее, чем клиентская:

server
  utils - утилиты
    pageController.js - контроллер страниц, посредник/middleware для взаимодействия с `redis`
    renderPage.js - утилита для рендеринга страниц
  index.js - основной файл сервера

Начнем с утилит.

utils/renderPage.js:

async function renderPage(app, req, res) {
  // объединяем параметры и строку запроса из объекта запроса
  const query = { ...req.params, ...req.query }

  try {
    // рендерим страницу
    const html = await app.renderToHTML(req, res, req.path, query)

    // записываем ее в `redis`
    // данный метод добавляется в объект ответа соответствующим посредником
    res.saveHtmlToCache(html)

    // и возвращаем клиенту
    res.send(html)
  } catch (err) {
    console.error(err)

    // рендерим дефолтную страницу ошибки
    await app.renderError(err, req, res, req.path, query)
  }
}

module.exports = renderPage

utils/pageController.js.

Импортируем библиотеку для взаимодействия с redis, получаем доступ к переменным среды окружения, формируем url для доступа к серверу redis и определяем функцию для создания клиента redis

const redis = require('redis')
require('dotenv').config()

const redisConfig = {
  // обратите внимание на символ `:` после `//`
  // без него будет выброшено исключение `invalid user-password pair`
  url: `redis://:${process.env.REDIS_PASSWORD}@${process.env.REDIS_HOST || 'localhost'}:6379`
}

async function createClient() {
  // создаем клиента `redis`
  const client = redis.createClient(redisConfig)

  // регистрируем обработчики
  client.on('error', (err) => {
    console.error('@redis error', err)
  })

  client.on('connect', () => {
    console.log('@redis connect')
  })

  client.on('reconnecting', () => {
    console.log('@redis reconnecting')
  })

  client.on('end', () => {
    console.log('@redis disconnect')
  })

  try {
    // выполняем подключение к серверу `redis`
    await client.connect()
  } catch (err) {
    console.error(err)
  }

  // и возвращаем клиента
  return client
}

Определяем переменную для клиента redis и соответствующего посредника:

let redisClient

async function pageController(req, res, next) {
  // создаем клиента `redis` при отсутствии
  if (!redisClient) {
    try {
      redisClient = await createClient()
    } catch (err) {
      console.error(err)
    }
  }

  console.log('@redis middleware', req.path)

  // ключ для кеша
  const cacheKey = req.path

  try {
    // пытаемся получить разметку из кеша
    const html = await redisClient.get(cacheKey)

    // если получилось
    if (html) {
      console.log('@from cache')

      // возвращаем разметку клиенту
      // на этом обработка запроса завершается,
      // соответствующий обработчик запроса не вызывается
      return res.send(html)
    }

    // расширяем объект ответа функцией для записи разметки в кеш
    res.saveHtmlToCache = (html) => {
      console.log('@to cache')

      redisClient.set(cacheKey, html).catch(console.error)
    }

    // расширяем объект ответа функцией для очистки кеша
    res.clearCache = () => {
      console.log('@clear cache')

      // в данном случае очищается весь кеш, хранящийся в `redis`
      // для удаления определенного кеша по ключу используется метод `redisClient.del(cacheKey)`
      redisClient.flushAll().catch(console.error)
    }

    // передаем управление обработчику запроса
    next()
  } catch (err) {
    console.error(err)
  }
}

module.exports = pageController

Теперь рассмотрим основной файл сервера (index.js).

Импортируем библиотеки и утилиты, определяем список/массив кешируемых страниц, определяем среду разработки, создаем экземпляр сервера next и обработчик запросов:

const next = require('next')
const express = require('express')

const pageController = require('./utils/pageController')
const renderPage = require('./utils/renderPage')

// кешируемые страницы
const CACHED_PAGES = ['/', '/catalog', '/about']

// среда разработки
const dev = process.env.ENV === 'development'

// экземпляр сервера
const app = next({ dev })

// обработчик запросов
const handle = app.getRequestHandler()

Выполняем перехват и обработку запросов:

app.prepare().then(() => {
  // создаем экземпляр приложения `express`
  const server = express()

  // директория со статическими файлами
  server.use(express.static('static'))

  // запросы на получение статики
  server.get('/_next/*', handle)

  server.get('/favicon.ico', handle)

  // все остальные `GET-запросы`
  // проходят через посредника для взаимодействия с `redis`
  server.get('*', pageController, (req, res) => {
    console.log('@route handler', req.path)

    // если поступил запрос на очистку кеша
    if (req.path === '/clear-cache') {
      // проверяем, что в заголовке `x-verification-code` содержится код подтверждения `super-secret`
      // предполагается, что запрос приходит откуда-то извне
      // например, в одном из моих рабочих проектов такой запрос
      // приходит от "полноценного" сервера, реализованного на `Python`
      if (
        req.headers['x-verification-code'] &&
        req.headers['x-verification-code'] !== process.env.VERIFICATION_CODE
      ) {
        // если заголовок отсутствует или его значение не совпадает с `super-secret`
        return res.sendStatus(403)
      }

      // очищаем кеш
      res.clearCache()

      return res.sendStatus(200)
    }

    // если запрашивается кешируемая страница
    if (CACHED_PAGES.includes(req.path)) {
      // вызываем нашу утилиту
      return renderPage(app, req, res)
    }

    // остальные запросы обрабатываются по умолчанию
    return handle(req, res)
  })

  // определяем порт
  const port = process.env.PORT || 5000

  // запускаем сервер
  server.listen(port, (err) => {
    if (err) return console.error(err)

    console.log(`