Configuration de thèmes dans les applications SSR React

Imaginez visiter un site Web qui s'adapte parfaitement à vos préférences, en basculant sans effort entre les thèmes clairs, sombres et basés sur le système.

Cet article continue ma série sur la RSS avec React. Dans l'article de base, nous avons exploré des configurations prêtes pour la production, tandis que dans les techniques avancées, nous avons relevé des défis tels que les erreurs d'hydratation. Nous allons désormais aller plus loin en mettant en œuvre une prise en charge de thèmes robuste qui s'intègre parfaitement à SSR.

Table des matières

• Thèmes et RSS
• Mise en œuvre
  • Installer les dépendances
  • Ajouter un cookie à la version du serveur
  • Appliquer des thèmes sur le serveur
  • Gérer les thèmes sur le client
• Conclusion

Thèmes et RSS

Le problème principal est le Flash initial de thème incorrect (FOIT).

Essentiellement, les thèmes consistent simplement à modifier les variables CSS. Dans la plupart des cas, vous travaillerez avec trois thèmes :

• Light : L'ensemble par défaut de variables CSS.
• Foncé : appliqué lorsque l'option le tag a la classe sombre.
• Système : bascule automatiquement en fonction des préférences système de l'utilisateur, en utilisant le (prefers-color-scheme : dark) requête multimédia pour déterminer si le thème doit être sombre ou clair.

Par défaut, le serveur rendra le HTML avec le thème clair et l'enverra au navigateur. Si un utilisateur préfère le thème sombre, il verra un changement de thème visible lors du premier chargement de la page, ce qui perturbera l'expérience utilisateur.

Il existe deux manières principales de résoudre ce problème :

• Ajouter un <script> balise dans le HTML sur le serveur et définit la classe dynamiquement sur le client.</script>
• Utilisez un cookie pour stocker les préférences de thème de l'utilisateur et définir la classe sur le serveur.

La première solution est le fonctionnement du package des thèmes suivants (janvier 2025). Dans cet article, vous allez mettre en œuvre l'approche basée sur les cookies pour garantir une gestion transparente des thèmes dans votre application SSR.

Mise en œuvre

Pour mettre en œuvre des thèmes, vous utiliserez deux cookies :

1. serverTheme - Utilisé pour appliquer la classe correcte au étiquette.
2. clientTheme - Utilisé pour gérer les erreurs d'hydratation.

Le client définit toujours les deux cookies, garantissant que le serveur peut restituer correctement le thème approprié lors de la prochaine requête.

Ce guide s'appuie sur les concepts introduits dans l'article précédent, Création d'applications SSR React prêtes pour la production, dont vous pouvez trouver le lien en bas. Pour plus de simplicité, les constantes et types partagés ne sont pas créés ici, mais vous pouvez trouver leur implémentation dans l'exemple de référentiel.

Installer les dépendances

Installez les packages requis pour la gestion des cookies :

pnpm add cookie js-cookie

Types d'installation pour js-cookie :

pnpm add -D @types/js-cookie

Si vous n'utilisez pas React-Router dans votre application, vous pouvez utiliser le package de cookies comme devDependencies.

Ajouter un cookie à la version du serveur

Mettez à jour votre fichier de configuration tsup :

// ./tsup.config.ts
import { defineConfig } from 'tsup'

export default defineConfig({
  entry: ['server'],
  outDir: 'dist/server',
  target: 'node22',
  format: ['cjs'],
  clean: true,
  minify: true,
  external: ['lightningcss', 'esbuild', 'vite'],
  noExternal: [
    'express',
    'sirv',
    'compression',
    'cookie', // Include the cookie in the server build
  ],
})

Appliquer des thèmes sur le serveur

Définir les constantes du thème

// ./server/constants.ts
export const CLIENT_THEME_COOKIE_KEY = 'clientTheme'
export const SERVER_THEME_COOKIE_KEY = 'serverTheme'

export enum Theme {
  Light = 'light',
  Dark = 'dark',
  System = 'system'
}

Appliquer une classe de thème au tag

Créez une fonction utilitaire pour appliquer la classe de thème correcte au balise basée sur le cookie serverTheme :

// ./server/lib/applyServerTheme.ts
import { parse } from 'cookie'
import { Request } from 'express'
import { SERVER_THEME_COOKIE_KEY, Theme } from '../constants'

export function applyServerTheme(req: Request, html: string): string {
  const cookies = parse(req.headers.cookie || '')
  const theme = cookies?.[SERVER_THEME_COOKIE_KEY]

  if (theme === Theme.Dark) {
    return html.replace('', `



<h4>
  
  
  Retrieve the Client Theme Cookie
</h4>

<p>Create a utility function to retrieve the clientTheme cookie<br>
</p>

<pre class="brush:php;toolbar:false">// ./server/getClientTheme.ts
import { parse } from 'cookie'
import { Request } from 'express'
import { CLIENT_THEME_COOKIE_KEY, Theme } from '../constants'

export function getClientTheme(req: Request) {
  const cookies = parse(req.headers.cookie || '')

  return cookies?.[CLIENT_THEME_COOKIE_KEY] as Theme | undefined
}

Mettre à jour les configurations du serveur pour le thème

Configuration de développement :

// ./server/dev.ts
import fs from 'fs'
import path from 'path'
import { Application } from 'express'
import { HTML_KEY } from './constants'
import { applyServerTheme } from './lib/applyServerTheme'
import { getClientTheme } from './lib/getClientTheme'

const HTML_PATH = path.resolve(process.cwd(), 'index.html')
const ENTRY_SERVER_PATH = path.resolve(process.cwd(), 'src/entry-server.tsx')

export async function setupDev(app: Application) {
  const vite = await (
    await import('vite')
  ).createServer({
    root: process.cwd(),
    server: { middlewareMode: true },
    appType: 'custom',
  })

  app.use(vite.middlewares)

  app.get('*', async (req, res, next) => {
    try {
      let html = fs.readFileSync(HTML_PATH, 'utf-8')
      html = await vite.transformIndexHtml(req.originalUrl, html)

      const { render } = await vite.ssrLoadModule(ENTRY_SERVER_PATH)
      // send Client Theme from cookie to render
      const appHtml = await render(getClientTheme(req))

      // Apply Server theme on template html
      html = applyServerTheme(req, html)
      html = html.replace(HTML_KEY, appHtml)

      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
    } catch (e) {
      vite.ssrFixStacktrace(e as Error)
      console.error((e as Error).stack)
      next(e)
    }
  })
}

Configuration de production :

// ./server/prod.ts
import fs from 'fs'
import path from 'path'
import compression from 'compression'
import { Application } from 'express'
import sirv from 'sirv'
import { HTML_KEY } from './constants'
import { applyServerTheme } from './lib/applyServerTheme'
import { getClientTheme } from './lib/getClientTheme'

const CLIENT_PATH = path.resolve(process.cwd(), 'dist/client')
const HTML_PATH = path.resolve(process.cwd(), 'dist/client/index.html')
const ENTRY_SERVER_PATH = path.resolve(process.cwd(), 'dist/ssr/entry-server.js')

export async function setupProd(app: Application) {
  app.use(compression())
  app.use(sirv(CLIENT_PATH, { extensions: [] }))

  app.get('*', async (req, res, next) => {
    try {
      let html = fs.readFileSync(HTML_PATH, 'utf-8')

      const { render } = await import(ENTRY_SERVER_PATH)
      // send Client Theme from cookie to render
      const appHtml = await render(getClientTheme(req))

      // Apply Server theme on template html
      html = applyServerTheme(req, html)
      html = html.replace(HTML_KEY, appHtml)

      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
    } catch (e) {
      console.error((e as Error).stack)
      next(e)
    }
  })
}

Gérer les thèmes sur le client

Définir des constantes

Dupliquez les constantes pour une utilisation client ou déplacez-les vers un dossier partagé

// ./src/constants.ts
export const SSR = import.meta.env.SSR

export const CLIENT_THEME_COOKIE_KEY = 'clientTheme'
export const SERVER_THEME_COOKIE_KEY = 'serverTheme'

export enum Theme {
  Light = 'light',
  Dark = 'dark',
  System = 'system',
}

Créer un contexte de thème

Configurez un contexte React pour gérer l'état du thème et fournissez des méthodes de gestion des thèmes :

// ./src/theme/context.ts
import { createContext, useContext } from 'react'
import { Theme } from '../constants'

export type ThemeContextState = {
  theme: Theme
  setTheme: (theme: Theme) => void
}

export const ThemeContext = createContext<themecontextstate>({
  theme: Theme.System,
  setTheme: () => null,
})

export const useThemeContext = () => useContext(ThemeContext)
</themecontextstate>

Implémenter les utilitaires de thème

// ./src/theme/lib.ts
import Cookies from 'js-cookie'
import { CLIENT_THEME_COOKIE_KEY, SERVER_THEME_COOKIE_KEY, SSR, Theme } from '../constants'

// Resolve the system theme using the `prefers-color-scheme` media query
export function resolveSystemTheme() {
  if (SSR) return Theme.Light
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? Theme.Dark : Theme.Light
}

// Update the theme cookies and set appropriate class to 
export function updateTheme(theme: Theme) {
  if (SSR) return

  const resolvedTheme = theme === Theme.System ? resolveSystemTheme() : theme

  Cookies.set(CLIENT_THEME_COOKIE_KEY, theme)
  Cookies.set(SERVER_THEME_COOKIE_KEY, resolvedTheme)

  window.document.documentElement.classList.toggle('dark', resolvedTheme === Theme.Dark)
}

// Get the default theme from cookies
export function getDefaultTheme(): Theme {
  if (SSR) return Theme.System
  const theme = (Cookies.get(CLIENT_THEME_COOKIE_KEY) as Theme) || Theme.System

  updateTheme(theme)
  return theme
}

Créer un fournisseur de thème

// ./src/theme/Provider.tsx
import { PropsWithChildren, useState } from 'react'
import { Theme } from '../constants'
import { ThemeContext } from './context'
import { getDefaultTheme, updateTheme } from './lib'

type Props = PropsWithChildren & {
  defaultTheme?: Theme // Handle theme for SSR
}

export function ThemeProvider({ children, defaultTheme }: Props) {
  const [theme, setTheme] = useState<theme>(defaultTheme || getDefaultTheme())

  const handleSetTheme = (theme: Theme) => {
    setTheme(theme)
    updateTheme(theme)
  }

  return <themecontext value="{{" theme settheme: handlesettheme>{children}</themecontext>
}
</theme>

// ./src/theme/index.ts
export { ThemeProvider } from './Provider'
export { useThemeContext } from './context'

Utiliser le contexte du thème dans les composants

// ./src/App.tsx
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import Card from './Card'
import { Theme } from './constants'
import { ThemeProvider } from './theme'

import './App.css'

// Theme from Server Entry
type AppProps = {
  theme?: Theme
}

function App({ theme }: AppProps) {
  return (
    <themeprovider defaulttheme="{theme}">
      <div>
        <a href="https://vite.dev" target="_blank" rel="noreferrer">
          <img src="%7BviteLogo%7D" classname="logo" alt="Vite logo">
        </a>
        <a href="https://react.dev" target="_blank" rel="noreferrer">
          <img src="%7BreactLogo%7D" classname="logo react" alt="React logo">
        </a>
      </div>
      <h1 id="Vite-React">Vite + React</h1>
      <card></card>
      <p classname="read-the-docs">Click on the Vite and React logos to learn more</p>
    </themeprovider>
  )
}

export default App

Créer un composant de carte

// ./src/Card.tsx
import { useState } from 'react'
import { Theme } from './constants'
import { useThemeContext } from './theme'

function Card() {
  const { theme, setTheme } = useThemeContext()
  const [count, setCount] = useState(0)

  return (
    <div classname="card">
      <button onclick="{()"> setCount((count) => count + 1)}>count is {count}</button>
      <p>
        Edit <code>src/App.tsx</code> and save to test HMR
      </p>
      <div>
        Themes:{' '}
        <select value="{theme}" onchange="{(event)"> setTheme(event.target.value as Theme)}>
          <option value="{Theme.System}">System</option>
          <option value="{Theme.Light}">Light</option>
          <option value="{Theme.Dark}">Dark</option>
        </select>
      </div>
    </div>
  )
}

export default Card

Résoudre l'erreur d'hydratation

Transmettez le thème à la méthode de rendu du serveur pour vous assurer que le code HTML généré par le serveur correspond au rendu côté client :

import { renderToString } from 'react-dom/server'
import App from './App'
import { Theme } from './constants'

export function render(theme: Theme) {
  return renderToString(<app theme="{theme}"></app>)
}

Ajouter des styles

:root {
    color: #242424;
    background-color: rgba(255, 255, 255, 0.87);
}

:root.dark {
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;
}

Conclusion

Dans cet article, nous avons abordé les défis liés à la mise en œuvre d'une thématique transparente dans les applications SSR React. En utilisant des cookies et en intégrant une logique côté client et côté serveur, nous avons créé un système robuste qui prend en charge les thèmes clairs, sombres et basés sur le système sans erreurs d'hydratation ni perturbations de l'expérience utilisateur.

Explorez le code

• Exemple : react-ssr-themes-example
• Atterrissage avec SSR : atterrissage professionnel

Articles connexes

Cela fait partie de ma série sur la RSS avec React. Restez à l'écoute pour plus d'articles !

• Créer des applications SSR React prêtes pour la production
• Techniques React SSR avancées avec streaming et données dynamiques
• Configuration de thèmes dans les applications SSR React

Restez connecté

Je suis toujours ouvert aux commentaires, à la collaboration ou aux discussions sur des idées techniques – n'hésitez pas à nous contacter !

• Portfolio : maxh1t.xyz
• E-mail : m4xh17@gmail.com

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!