Einrichten von Themen in SSR React-Anwendungen

Stellen Sie sich vor, Sie besuchen eine Website, die sich nahtlos an Ihre Vorlieben anpasst – und mühelos zwischen hellen, dunklen und systembasierten Themen wechselt.

Dieser Artikel setzt meine Serie über SSR mit React fort. Im Grundlagenartikel haben wir produktionsreife Konfigurationen untersucht, während wir uns in fortgeschrittenen Techniken mit Herausforderungen wie Hydratationsfehlern befasst haben. Jetzt gehen wir noch einen Schritt weiter und implementieren eine robuste Theme-Unterstützung, die sich nahtlos in SSR integrieren lässt.

Inhaltsverzeichnis

• Themen und SSR
• Durchführung
  • Abhängigkeiten installieren
  • Cookie zum Server Build hinzufügen
  • Themen auf dem Server anwenden
  • Themen auf dem Client verwalten
• Fazit

Themen und SSR

Das Hauptproblem ist der Initial Flash of Incorrect Theme (FOIT).

Im Wesentlichen geht es bei Themes nur darum, CSS-Variablen zu ändern. In den meisten Fällen arbeiten Sie mit drei Themen:

• Light: Der Standardsatz von CSS-Variablen.
• Dunkel: Wird angewendet, wenn das Tag hat die Klasse dunkel.
• System: Wechselt automatisch basierend auf den Systempräferenzen des Benutzers unter Verwendung von (bevorzugtes Farbschema: dunkel). Medienabfrage, um zu bestimmen, ob das Thema dunkel oder hell sein soll.

Standardmäßig rendert der Server den HTML-Code mit dem Light-Design und sendet ihn an den Browser. Wenn ein Benutzer das dunkle Theme bevorzugt, wird er beim ersten Laden der Seite eine sichtbare Theme-Änderung bemerken, die das Benutzererlebnis beeinträchtigt.

Es gibt im Wesentlichen zwei Möglichkeiten, dieses Problem zu lösen:

• Fügen Sie ein hinzu. Markieren Sie den HTML-Code auf dem Server und legen Sie die Klasse dynamisch auf dem Client fest.
• Verwenden Sie ein Cookie, um die Designpräferenz des Benutzers zu speichern und die Klasse auf dem Server festzulegen.

Die erste Lösung ist, wie das Next-Themes-Paket funktioniert (Januar 2025). In diesem Artikel implementieren Sie den Cookie-basierten Ansatz, um eine nahtlose Themenverarbeitung in Ihrer SSR-Anwendung sicherzustellen.

Durchführung

Um Themen zu implementieren, verwenden Sie zwei Cookies:

1. serverTheme – Wird verwendet, um die richtige Klasse auf das anzuwenden. Tag.
2. clientTheme – Wird zur Behandlung von Hydratationsfehlern verwendet.

Der Client setzt immer beide Cookies, um sicherzustellen, dass der Server bei der nächsten Anfrage das entsprechende Thema korrekt rendern kann.

Dieser Leitfaden baut auf Konzepten auf, die im vorherigen Artikel Erstellung produktionsbereiter SSR-React-Anwendungen vorgestellt wurden, den Sie unten verlinkt finden. Der Einfachheit halber werden hier keine gemeinsam genutzten Konstanten und Typen erstellt, ihre Implementierung finden Sie jedoch im Beispiel-Repository.

Abhängigkeiten installieren

Installieren Sie die erforderlichen Pakete für die Cookie-Verarbeitung:

pnpm add cookie js-cookie

Installationstypen für js-cookie:

pnpm add -D @types/js-cookie

Wenn Sie in Ihrer App keinen React-Router verwenden, können Sie das Cookie-Paket als DevDependencies verwenden.

Cookie zum Server Build hinzufügen

Aktualisieren Sie Ihre Tsup-Konfigurationsdatei:

// ./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
  ],
})

Wenden Sie Designs auf dem Server an

Definieren Sie Designkonstanten

// ./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'
}

Wenden Sie die Themenklasse auf das Tag an

Erstellen Sie eine Hilfsfunktion, um die richtige Designklasse auf die -Datei anzuwenden. Tag basierend auf dem serverTheme-Cookie:

// ./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('<html lang="en">', `<html lang="en">



<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
}

Aktualisieren Sie die Serverkonfigurationen für Theming

Entwicklungskonfiguration:

// ./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)
    }
  })
}

Produktionskonfiguration:

// ./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)
    }
  })
}

Behandeln Sie Themen auf dem Client

Konstanten definieren

Duplizieren Sie Konstanten zur Verwendung durch den Client oder verschieben Sie sie in einen freigegebenen Ordner

// ./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',
}

Erstellen Sie einen Themenkontext

Richten Sie einen React-Kontext ein, um den Theme-Status zu verwalten und Theme-Verwaltungsmethoden bereitzustellen:

// ./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)

Implementieren Sie Theme-Dienstprogramme

// ./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 <html>
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
}

Erstellen Sie einen Theme-Anbieter

// ./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>
}

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

Verwenden Sie den Themenkontext in Komponenten

// ./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={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank" rel="noreferrer">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <Card />
      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
    </ThemeProvider>
  )
}

export default App

Erstellen Sie eine Kartenkomponente

// ./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

Beheben Sie den Hydratationsfehler

Übergeben Sie das Design an die Rendermethode des Servers, um sicherzustellen, dass der vom Server generierte HTML-Code mit dem clientseitigen Rendering übereinstimmt:

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

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

Stile hinzufügen

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

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

Abschluss

In diesem Artikel haben wir uns mit den Herausforderungen der Implementierung nahtloser Designs in SSR React-Anwendungen befasst. Durch die Verwendung von Cookies und die Integration sowohl clientseitiger als auch serverseitiger Logik haben wir ein robustes System geschaffen, das helle, dunkle und systembasierte Themen ohne Hydratationsfehler oder Störungen der Benutzererfahrung unterstützt.

Entdecken Sie den Kodex

• Beispiel: React-SSR-Themes-Beispiel
• Landung mit SSR: Profi-Landung

Verwandte Artikel

Dies ist Teil meiner Serie über SSR mit React. Bleiben Sie dran für weitere Artikel!

• Erstellung produktionsbereiter SSR-React-Anwendungen
• Erweiterte React SSR-Techniken mit Streaming und dynamischen Daten
• Themen in SSR React-Anwendungen einrichten

Bleiben Sie in Verbindung

Ich bin immer offen für Feedback, Zusammenarbeit oder die Diskussion technischer Ideen – zögern Sie nicht, mich zu kontaktieren!

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

Das obige ist der detaillierte Inhalt vonEinrichten von Themen in SSR React-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!