How to parse HTML string into HAST and vice versa

[Ahmedsaed]

Hello Everyone!

First of all, thanks for the amazing ecosystem. Second, I have been using this unified pipeline to transform and render the HTML string provided by the CMS.

const content = unified()
        .use(rehypeParse, { fragment: true })
        .use(() => {}) // My transformations
        .use(rehypeReact, {
            Fragment: prod.Fragment,
            jsx: prod.jsx,
            jsxs: prod.jsxs,
            createElement: production.jsx,
            components: {
                htoc: TableOfContent,
                image: Image,
                btl: BrokerTableLong,
                bts: BrokerTableShort,
                fai: renderIcon,
            },
        })
        .processSync(data).result;

return <div className={styles["content"]}>{content}</div>;

This process takes an HTML string and outputs JSX.Element thing

I want to break this process into two steps:

1. [Server-Side] Parse the HTML string and apply some processing and transformations then output an intermediate JSON compatible form (HAST maybe?)
2. [Client-Side] Render the intermediate form back to React Components using RehypeReact

Motivation: I am using nextjs for my project and I don't want to pass a large string of HTML data to the component as a porp. I instead want to parse it into an intermediate (light weight) form and pass that to the component to be rendered to reduce bandwidth and optimize performance

I have read the documentation and tried multiple experiments but I always end up with:

• The need to provide a compiler to be able to call processSync (I don't want to compile the HAST in the first step)
• The need to provide a parser to be able to convert the intermediate form back to html/react

Why can't I skip the compilation step in the first part and the parsing step in the second part? Is there is a function that should be used other than processSync?

I have tried to use the parse function but I had problems with transformations not being applied correctly

[ChristianMurphy]

Welcome @Ahmedsaed! 👋

TL;DR do server side rendering through next and apply compression to the output.

I am using nextjs for my project and I don't want to pass a large string of HTML data to the component as a prop. I instead want to parse it into an intermediate (light weight) form

It isn't really lighter weight versus rendering the HTML.
See the discussion at https://github.com/orgs/unifiedjs/discussions/188#discussioncomment-2466114

rendered to reduce bandwidth and optimize performance

JSON isn't compression, gzip and brotli are compression

---

To answer the XY question

The need to provide a compiler to be able to call processSync

See https://github.com/unifiedjs/unified?tab=readme-ov-file#overview
Don't call process call parse

The need to provide a parser to be able to convert the intermediate form back to html/react

See https://github.com/unifiedjs/unified?tab=readme-ov-file#overview
Don't call process call compile

I had problems with transformations not being applied correctly

See https://github.com/unifiedjs/unified?tab=readme-ov-file#overview
Call run

To repeat though, you don't want to do this to achieve your end goal of more compact and efficient.
Instead do server side rendering through next and apply compression to the output.

[Ahmedsaed]

That is exactly what I was looking for. Thanks a lot and keep up the amazing work.