Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Start]: Binary encoding issue when prerendering Server Routes.

Aperta
  • Qualcosa non va?
#8,746 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript, vite
Ambito
backend, build-system

Direzione di ricerca

Start with the linked minimal reproducer and its og-image.jpg.tsx server route; compare its development response with ./dist/client/og-image.jpg after a build. Trace how prerendering writes the route response and check whether the binary image bytes change. Done means the built image opens correctly and matches the development output, or the documentation clearly states the limitation.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug
Which project does this relate to?

Start

Describe the bug

When implementing Takumi with tanstack start following their guide , they use a server route to generate images on demand, however since they are og images it's not necessary to regenerate each request, even with cache control the way they set up their og-images endpoint (open search params / dynamic params) is open to cache invalidation attacks (example of attacks) unless you validate the url on the server route.

the server routes docs don't mention much about how to prerender server routes effectively, researching more i found this discussion that tells to use the prerender option with configuration for specific pages

the option to prerender api routes is available in Astro and Next.js , so i implemented it, the image show correctly in dev, but when running build command the image can no longer be opened.

researching and comparing the two files (image rendered in dev and image rendered in build) it shows the image output at build has incorrect binary format:

image header in dev (it shows):
ÿØÿà JFIF    ÿÀ v°  ÿÛ C   


 $.' ",#(7),01444'9=82<.342ÿÛ C

image header in build (it does not show):
JFIF    v    C   


 $.' ",#(7),01444'9=82<.342 C

i believe more documentation is necessary to instruct how to effectively prerender in tanstack start, especially when prerendering things like binary files (images, audio, etc.)

Complete minimal reproducer

https://github.com/JulioGrajales/tanstack-start-format-issue/

Steps to Reproduce the Bug
  1. download repo and install dependencies
  2. run dev command, visit http://localhost:3000/og-image.jpg to see the image correctly formatted
  3. you can check og-image[.]jpg.tsx file to see server api route
  4. run build command (prerender enabled), check ./dist/client/og-image.jpg file, it's corruped / incorrectly formatted
Expected behavior

Dev and build environments should produce the same files, if tanstack start is currently unable to prerender binary files in server routes it should be made clear in the documentation

Screenshots or Videos
Image Image

DOWNLOAD THE GENERATED IMAGES:
images-arch.zip

Platform

  • Router / Start Version: [e.g. 1.121.0]:
    "@tanstack/react-router": "^1.170.45",
    "@tanstack/react-router-devtools": "^1.167.2",
    "@tanstack/react-start": "^1.169.3",

  • OS: [e.g. macOS, Windows, Linux]
    Ubuntu WSL
    C:\Users\julio>wsl --version
    Versión de WSL: 2.7.13.0
    Versión de kernel: 6.18.33.2-2
    Versión de WSLg: 1.0.73.2
    Versión de MSRDC: 1.2.7214
    Versión de Direct3D: 1.611.1-81528511
    Versión de DXCore: 10.0.26100.1-240331-1435.ge-release
    Versión de Windows: 10.0.26200.9711

  • Browser: [e.g. Chrome, Safari, Firefox]
    Google Chrome

  • Browser Version: [e.g. 91.1]
    Version 155.0.8059.85 (Official Build) (64-bit)

  • Bundler: [e.g. vite]
    Vite

  • Bundler Version: [e.g. 7.0.0]
    "vite": "^8.3.4"

Additional context

No response

Lingua principale
TypeScript
Stelle
15.2k
Fork
1.9k
Merge medio
1g 13h
PR unite (30g)
76

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TanStack/router

Tutte le issue di TanStack/router

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.