Пост Частичный пре-рендер с помощью Bun

Частичный пре-рендер с помощью Bun Bun представил идею макросов в JavaScript. Макрос в Bun – это механизм запуска JS функций во время сборки. Значение, возвращаемое этими функциями, напрямую встраивается в бандл. Арал Рока в своем блоге предложил идею пре-рендера статических компонентов во время сборки с помощью Bun макросов. Таким образом, на одной странице могут отображаться одновременно статические компоненты, отрендеренные во время сборки, и динамические компоненты, отрендеренные в runtime. Автор предлагает использовать Bun плагин prerender-macro. Пример кода, который использует макросы: import StaticComponent from "@/static-component" with { type: "prerender" }; import DynamicComponent from "@/dynamic-component"; return ( <> <StaticComponent foo="bar" /> <DynamicComponent /> </> ); С помощью плагина код выше преобразуется в следующий промежуточный код: import { prerender } from "prerender-macro/prerender" with { "type": "macro" }; import DynamicComponent from "@/dynamic-component"; // ... return ( <> {prerender({ componentPath: "@/static-component", componentModuleName: "default", componentProps: { foo: "bar" }, })} <DynamicComponent /> </> ); После чего этот код возвращается в Bun для транспиляции и запуска макросов, которые преобразуют статический компонент в HTML строку во время сборки. Автор обещает, что при использовании частичного пре-рендера компонентов будет меньше размер бандла и более быстрый runtime рендер страницы. https://aralroca.com/blog/partial-prerendering