Cloudflare Developers•2mo ago

My app is 10 times slower in production

Hey folks, my local env takes 200ms to load the server-rendered HTML, production takes 2.2s. The latency increase is insane. How do you debug this? I'm not running any database queries. It's a Remix app that server renders a landing page. Here's the app https://yup-258-marketing-pages-take-i932.yupty-front.pages.dev/

1 Reply

Vlady•2mo ago

I've timed every function call in my entry.server.tsx using Server-Timing headers and I don't see anything wrong here

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  context: AppLoadContext,
) {
  let t1 = performance.now()

  let app = (
    <ThemeProvider theme={mTheme}>
      <I18nProvider locale="en-GB">
        <ApolloProvider client={context.gqlClient}>
          <RemixServer context={remixContext} url={request.url} />
        </ApolloProvider>
      </I18nProvider>
    </ThemeProvider>
  )

  let t2 = performance.now()
  context.timing.recordManualTiming('App render', t2 - t1)

  await getDataFromTree(app)

  let t3 = performance.now()
  context.timing.recordManualTiming('getDataFromTree', t3 - t2)

  let gqlState = context.gqlClient.extract()

  app = (
    <ApolloStateContext.Provider value={gqlState}>
      {app}
    </ApolloStateContext.Provider>
  )

  let markup = renderToString(app)

  let t4 = performance.now()
  context.timing.recordManualTiming('renderToString', t4 - t3)

  responseHeaders.set('Content-Type', 'text/html')

  let timingHeader = context.timing.getHeaderField()
  responseHeaders.set('Server-Timing', timingHeader)

  let response = new Response('<!DOCTYPE html>' + markup, {
    headers: responseHeaders,
    status: responseStatusCode,
  })

  return response
}

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  context: AppLoadContext,
) {
  let t1 = performance.now()

  let app = (
    <ThemeProvider theme={mTheme}>
      <I18nProvider locale="en-GB">
        <ApolloProvider client={context.gqlClient}>
          <RemixServer context={remixContext} url={request.url} />
        </ApolloProvider>
      </I18nProvider>
    </ThemeProvider>
  )

  let t2 = performance.now()
  context.timing.recordManualTiming('App render', t2 - t1)

  await getDataFromTree(app)

  let t3 = performance.now()
  context.timing.recordManualTiming('getDataFromTree', t3 - t2)

  let gqlState = context.gqlClient.extract()

  app = (
    <ApolloStateContext.Provider value={gqlState}>
      {app}
    </ApolloStateContext.Provider>
  )

  let markup = renderToString(app)

  let t4 = performance.now()
  context.timing.recordManualTiming('renderToString', t4 - t3)

  responseHeaders.set('Content-Type', 'text/html')

  let timingHeader = context.timing.getHeaderField()
  responseHeaders.set('Server-Timing', timingHeader)

  let response = new Response('<!DOCTYPE html>' + markup, {
    headers: responseHeaders,
    status: responseStatusCode,
  })

  return response
}

The only thing that could raise concerns is not loading the modules fast enough because I do a bunch of dynamic importing in getLoadContext because the worker times out if I import synchronously :/

Gaming

Programming

My app is 10 times slower in production