woutdp/live_svelte

Improve performance SSR rendering

Open

#36 opened on Apr 27, 2023

View on GitHub
 (5 comments) (4 reactions) (0 assignees)Elixir (1,646 stars) (73 forks)batch import
enhancementhelp wanted

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.

Contributor guide

Tech stack
elixirsveltenodejs
Domain
performancebackend
Issue type
performance
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Elixir basicsPhoenix LiveViewSvelte
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
The issue identifies that SSR performance is bottlenecked by synchronous NodeJS calls. To improve, investigate the SSR implementation in the repository, likely in files like `lib/live svelte/ssr.ex` or similar. Profile the NodeJS calls to understand the overhead and explore batching multiple component renders into a single Node call. Consider making the calls asynchronous using Elixir tasks or pooling NodeJS processes. Also evaluate whether Bun can replace NodeJS for faster startup times. Review the comments for maintainer feedback on possible approaches.