diff --git a/examples/react/basic-ssr/server.js b/examples/react/basic-ssr/server.js index 919823eb73..77a5fc1b52 100644 --- a/examples/react/basic-ssr/server.js +++ b/examples/react/basic-ssr/server.js @@ -71,24 +71,14 @@ export async function createServer( if (!isProd) { // always read fresh template in dev template = fs.readFileSync(resolve('index.html'), 'utf-8') - console.log(template) template = await vite.transformIndexHtml(url, template) - console.log(template) render = (await vite.ssrLoadModule('/src/entry-server.tsx')).render } else { template = indexProd render = (await import('./dist/server/entry-server.tsx')).render } - // const [appHead, appHtml] = await render(url, context) - render({ template, url }, res) - - // if (context.url) { - // // Somewhere a `` was rendered - // return res.redirect(301, context.url) - // } - - // res.status(200).set({ 'Content-Type': 'text/html' }).end(html) + render({ template, url, res }) } catch (e) { !isProd && vite.ssrFixStacktrace(e) console.log(e.stack) diff --git a/examples/react/basic-ssr/src/entry-server.tsx b/examples/react/basic-ssr/src/entry-server.tsx index 81de4b0863..7c51fa8813 100644 --- a/examples/react/basic-ssr/src/entry-server.tsx +++ b/examples/react/basic-ssr/src/entry-server.tsx @@ -6,10 +6,11 @@ import { App } from './App' import { router } from './router' import { ServerResponse } from 'http' -export async function render( - opts: { url: string; template: string }, - res: ServerResponse, -) { +export async function render(opts: { + url: string + template: string + res: ServerResponse +}) { router.reset() const memoryHistory = createMemoryHistory({ @@ -33,7 +34,7 @@ export async function render( }, )})` - res.write(routerScript) + opts.res.write(routerScript) }) const leadingHtml = opts.template.substring( @@ -45,20 +46,22 @@ export async function render( opts.template.indexOf('') + ''.length, ) + opts.res.setHeader('Content-Type', 'text/html') + const stream = ReactDOMServer.renderToPipeableStream( , { onShellReady: () => { - res.write(leadingHtml) - stream.pipe(res) + opts.res.write(leadingHtml) + stream.pipe(opts.res) }, onError: (err) => { console.log(err) }, onAllReady: () => { - res.end(tailingHtml) + opts.res.end(tailingHtml) }, }, ) diff --git a/examples/react/basic-ssr/src/routeConfig.tsx b/examples/react/basic-ssr/src/routeConfig.tsx index 2c7010c0a0..91cd2722bb 100644 --- a/examples/react/basic-ssr/src/routeConfig.tsx +++ b/examples/react/basic-ssr/src/routeConfig.tsx @@ -17,18 +17,20 @@ export const routeConfig = createRouteConfig().createChildren((createRoute) => [ createRoute({ path: 'posts', component: Posts, - errorComponent: () => 'Oh crap!', + loaderMaxAge: 5000, loader: async () => { await new Promise((resolve) => setTimeout(resolve, 500)) return { posts: await fetchPosts(), } }, + errorComponent: () => 'Oh crap!', }).createChildren((createRoute) => [ createRoute({ path: '/', component: PostsIndex }), createRoute({ path: ':postId', component: Post, + loaderMaxAge: 5000, loader: async ({ params: { postId } }) => { await new Promise((resolve) => setTimeout(resolve, 300)) return {