examples: basic-ssr improvements

TanStack · Nov 16, 2022 · 9d45586 · 9d45586
1 parent 8dc36ec
commit 9d45586
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 20 deletions.
diff --git 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 `<Redirect>` 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
@@ -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(
       },
     )})</script>`
 
-    res.write(routerScript)
+    opts.res.write(routerScript)
   })
 
   const leadingHtml = opts.template.substring(
@@ -45,20 +46,22 @@ export async function render(
     opts.template.indexOf('<!--app-html-->') + '<!--app-html-->'.length,
   )
 
+  opts.res.setHeader('Content-Type', 'text/html')
+
   const stream = ReactDOMServer.renderToPipeableStream(
     <RouterProvider router={router}>
       <App />
     </RouterProvider>,
     {
       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
@@ -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 {