woutdp/live_svelte

Improve performance SSR rendering

Open

#36 ouverte le 27 avr. 2023

Voir sur GitHub
 (5 commentaires) (4 réactions) (0 assignés)Elixir (73 forks)batch import
enhancementhelp wanted

Métriques du dépôt

Stars
 (1 646 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

Description

Currently SSR takes about 8ms each render in production, and about 20-40ms in dev, and this is being executed synchronously. So let's say you have 10 components inside a LiveView, it'll end up taking 80ms!

When turning off SSR it's super fast, you can easily render a 100 components and not feel any delay.

The culprit is the call to NodeJS.

Doing the following things will probably do the trick.

  • Reduce the amount of time to call NodeJS
  • Run asynchronously somehow, I'm not sure how to do this inside a HEEx template.

Maybe Bun is the answer here, or a better way of calling Node.

Guide contributeur

Direction de recherche
Le problème identifie que les performances SSR sont limitées par des appels NodeJS synchrones. Pour améliorer cela, étudiez l'implémentation SSR dans le dépôt, probablement dans des fichiers comme `lib/live svelte/ssr.ex` ou similaires. Profilez les appels NodeJS pour comprendre la surcharge et explorez le regroupement de plusieurs rendus de composants en un seul appel Node. Envisagez de rendre les appels asynchrones en utilisant des tâches Elixir ou des pools de processus NodeJS. Évaluez également si Bun peut remplacer NodeJS pour des temps de démarrage plus rapides. Consultez les commentaires pour les retours des mainteneurs sur les approches possibles.
Stack technique
javascriptnodejssvelte
Domaine
full stack
Type d'issue
Performance
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Plutôt claire
Prérequis
ElixirPhoenixJavaScriptSvelte
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
75