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.
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:
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:
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.
Um Themen zu implementieren, verwenden Sie zwei Cookies:
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.
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.
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
],
})
// ./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'
}
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
}
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)
}
})
}
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',
}
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)
// ./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
}
// ./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'
// ./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
// ./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
Ü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} />)
}
:root {
color: #242424;
background-color: rgba(255, 255, 255, 0.87);
}
:root.dark {
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
}
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.
Dies ist Teil meiner Serie über SSR mit React. Bleiben Sie dran für weitere Artikel!
Ich bin immer offen für Feedback, Zusammenarbeit oder die Diskussion technischer Ideen – zögern Sie nicht, mich zu kontaktieren!
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
