app
routes
styles
context.tsx
createEmotionCache.ts
entry.client.tsx
entry.server.tsx
root.tsx
components
data
functions
public
.gitignore
.node-version
.prettierignore
OFL.txt
README.md
emotion-server.js
index.css
index.d.ts
package-lock.json
package.json
remix.config.js
server.ts
theme.ts
tsconfig.json
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { CacheProvider } from "@emotion/react";
|
|
import createEmotionCache from "./createEmotionCache.js";
|
|
import { createEmotionServer } from "../emotion-server.js";
|
|
import { type EntryContext } from "@remix-run/cloudflare";
|
|
import { RemixServer } from "@remix-run/react";
|
|
import { renderToString } from "react-dom/server";
|
|
import { ServerStyleContext } from "./context.js";
|
|
|
|
export default function handleRequest(
|
|
request: Request,
|
|
responseStatusCode: number,
|
|
responseHeaders: Headers,
|
|
remixContext: EntryContext,
|
|
) {
|
|
const cache = createEmotionCache();
|
|
const { extractCriticalToChunks } = createEmotionServer(cache);
|
|
const html = renderToString(
|
|
<ServerStyleContext.Provider value={null}>
|
|
<CacheProvider value={cache}>
|
|
<RemixServer context={remixContext} url={request.url} />
|
|
</CacheProvider>
|
|
</ServerStyleContext.Provider>,
|
|
);
|
|
|
|
const chunks = extractCriticalToChunks(html);
|
|
|
|
const markup = renderToString(
|
|
<ServerStyleContext.Provider value={chunks.styles}>
|
|
<CacheProvider value={cache}>
|
|
<RemixServer context={remixContext} url={request.url} />
|
|
</CacheProvider>
|
|
</ServerStyleContext.Provider>,
|
|
);
|
|
|
|
responseHeaders.set("content-type", "text/html;charset=utf-8");
|
|
|
|
return new Response("<!DOCTYPE html>" + markup, {
|
|
headers: responseHeaders,
|
|
status: responseStatusCode,
|
|
});
|
|
}
|