entry-server.tsx

import { StaticRouter } from 'react-router-dom/server'
import { renderToString } from 'react-dom/server'
import fs from 'node:fs'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import serverless from '@stormkit/serverless'
import createRoutes from './routes'
import Context from './context'
import App from './App'

interface RenderReturn {
  status: number
  content: string
  head: string
}

export type RenderFunction = (url: string) => Promise<RenderReturn>

const defaultSEO: SEO = {
  title: 'Vite + React (SSR, SSG, SPA)',
  description: 'Mono repo template for apps needing ssr, ssg and/or spa.',
  domain: {
    name: '',
    url: '',
  },
  twitter: {
    card: 'summary_large_image',
    creator: '@savasvedova',
  },
}

export const render: RenderFunction = async (url) => {
  const { routes, head, context } = await createRoutes(url)
  const tags = {
    ...defaultSEO,
    ...head,
  }

  // Prefix the title with the domain.name property.
  tags.title =
    `${tags.domain?.name ? tags.domain.name + ' | ' : ''}` + tags.title

  return {
    status: 200,
    content:
      renderToString(
        <Context.Provider value={context}>
          <StaticRouter location={url}>
            <App routes={routes} />
          </StaticRouter>
        </Context.Provider>,
      ) +
      (context
        ? `<script>window.CONTEXT = ${JSON.stringify(context)}</script>`
        : ''),
    head: [
      `<title>${tags.title}</title>`,
      `<meta charset="utf-8" />`,
      `<meta name="viewport" content="width=device-width, initial-scale=1.0" />`,
      `<meta name="description" content="${tags.description}" />`,
      `<meta property="og:title" content="${tags.title}" />`,
      `<meta property="og:url" content="${tags.domain?.url}" />`,
      `<meta property="og:description" content="${tags.description}" />`,
      `<meta property="og:image" content="${tags.domain?.url}/logo.svg" />`,
      `<meta name="twitter:card" content="${tags.twitter!.card}" />`,
      `<meta name="twitter:creator" content="${tags.twitter!.creator}" />`,
      `<meta name="twitter:title" content="${tags.title}" />`,
      `<meta name="twitter:description" content="${tags.description}" />`,
      `<link rel="icon" type="image/svg+xml" href="/logo.svg" />`,
    ]
      .join('\n')
      .trim(),
  }
}

// This handler add support for Stormkit environment. This is
// the entry point of the serverless application.
export const handler = serverless(async (req: any, res: any) => {
  // We are in assets folder
  const dir = path.dirname(fileURLToPath(import.meta.url))
  const html = fs.readFileSync(path.join(dir, './index.html'), 'utf-8')

  const { status, content, head } = await render(
    req.url?.split(/\?#/)[0] || '/',
  )

  res.writeHead(status, 'OK', { 'Content-Type': 'text/html; charset=utf-8' })
  res.write(
    html
      .replace('</head>', `${head}</head>`)
      .replace(`<div id="root"></div>`, `<div id="root">${content}</div>`),
  )
  res.end()
})