kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ssr in prod (!!)

Browse Source
This commit is contained in:
MapleLeaf
2021-12-31 12:42:13 -06:00
committed by Darius
parent 594c0dc42d
commit 235775f84a
9 changed files with 119 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/docs-new/src/entry.client.tsx
View File

@@ -1,5 +1,4 @@
import * as React from "react"
import { render } from "react-dom"
import { hydrate } from "react-dom"
import { Root } from "./root"
render(<Root />, document)
hydrate(<Root />, document)

1
packages/docs-new/src/entry.server.tsx
View File

@@ -1,4 +1,3 @@
import * as React from "react"
import { Root } from "./root"
export async function render(url: string) {

8
packages/docs-new/src/root.tsx
View File

@@ -1,4 +1,3 @@
import React from "react"
import { Counter } from "./counter"
export function Root() {
@@ -10,7 +9,12 @@ export function Root() {
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="test description" />
<title>Reacord</title>
<script type="module" src="/src/entry.client.tsx" />
<script
type="module"
src={
import.meta.env.PROD ? "/entry.client.js" : "/src/entry.client.tsx"
}
/>
</head>
<body>
<h1>hi</h1>

69
packages/docs-new/src/server.ts Normal file
View File

@@ -0,0 +1,69 @@
import compression from "compression"
import express, { Router } from "express"
import { resolve } from "node:path"
import { renderToString } from "react-dom/server"
import { createServer as createViteServer } from "vite"
import type * as entryModule from "./entry.server"
async function createDevelopmentRouter() {
const vite = await createViteServer({
server: { middlewareMode: "ssr" },
})
return Router()
.use(vite.middlewares)
.use("*", async (req, res) => {
const url = req.originalUrl
try {
const { render } = (await vite.ssrLoadModule(
"/src/entry.server.tsx",
)) as typeof entryModule
const html = await vite.transformIndexHtml(
url,
renderToString(await render(url)),
)
res.status(200).set({ "Content-Type": "text/html" }).end(html)
} catch (error: any) {
vite.ssrFixStacktrace(error)
console.error(error)
res.status(500).end(error.stack || error.message)
}
})
}
function createProductionRouter() {
return Router()
.use(compression())
.use(express.static(resolve("dist/client")))
.use("*", async (req, res) => {
try {
const { render }: typeof entryModule = await import(
"../dist/server/entry.server"
)
res
.status(200)
.set({ "Content-Type": "text/html" })
.end(renderToString(await render(req.originalUrl)))
} catch (error: any) {
console.error(error)
res.status(500).end(error.stack || error.message)
}
})
}
const app = express()
if (process.env.NODE_ENV === "production") {
app.use(createProductionRouter())
} else {
app.use(await createDevelopmentRouter())
}
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log(`listening on http://localhost:${port}`)
})

35
packages/docs-new/src/server.tsx
View File

@@ -1,35 +0,0 @@
import express from "express"
import { renderToStaticMarkup } from "react-dom/server"
import { createServer as createViteServer } from "vite"
import type * as entryModule from "./entry.server"
const vite = await createViteServer({
server: { middlewareMode: "ssr" },
})
const app = express()
app.use(vite.middlewares)
app.use("*", async (req, res) => {
const url = req.originalUrl
try {
const { render } = (await vite.ssrLoadModule(
"/src/entry.server.tsx",
)) as typeof entryModule
const content = renderToStaticMarkup(await render(url))
const html = await vite.transformIndexHtml(url, content)
res.status(200).set({ "Content-Type": "text/html" }).end(html)
} catch (error: any) {
vite.ssrFixStacktrace(error)
console.error(error)
res.status(500).end(error.message)
}
})
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log(`listening on http://localhost:${port}`)
})

1
packages/docs-new/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />