On optimising the experience of using SSR

[uiuing]

Continued from #956 extended discussion

There is data to suggest that people will expect more from frameworks that support SSR in the future (just like Remix).

About SSR : https://tsh.io/state-of-frontend/#in-your-opinion-which-of-these-trendssolutions-will-rise-in-popularity-and-which-will-be-pretty-much-dead-in-2-years-from-now About Remix : https://tsh.io/state-of-frontend/#which-of-the-following-frameworks-would-you-like-to-learn-in-the-future

Perhaps now is the time to provide more support for frameworks that support SSR. ✨

---

Here are some of my thoughts (not necessarily correct).

Import of components

Currently a standalone lib without css is probably missing, maybe something like: semi-ui-ssr ?

Just as Remix is unlikely to expose the ability to customise babel configuration and add Rollup plugins / more ..., we may need a solution that gets rid of webpack/rollup/esbuild ... , a standalone lib may be able to get rid of the third party influence.

Import of css

It might be possible to provide a separate script before start and build, like build:semi-auto-style ? that generates the bootstrap file and provides an on-demand import of css files, thus avoiding a full import in the production environment.

---

Maybe there are better ways to do both. 🤔

If don't mind, I'll try feasibility on my branch first.

[DaiQiangReal]

We have planed to bundle a pure es-module dist file that contains all components with treeshaking ability but without css importion. User who uses strict node_module style import rules (such as nextjs users) should use this special bundle and import component css in their own code.

[DaiQiangReal]

Semi supports SSR from the beginning, Remix and Nextjs have strict node_module css import rules that prevent node_modules module import css in js file. It is nothing about SSR. Actually, semi official website (https://semi.design) is powered by SSG tech (generating html with nodejs like SSR process).

[uiuing]

Semi supports SSR from the beginning, Remix and Nextjs have strict node_module css import rules that prevent node_modules module import css in js file. It is nothing about SSR. Actually, semi official website (https://semi.design) is powered by SSG tech (generating html with nodejs like SSR process).

Yay, Thank you for your patience and dispelled my doubts.

[Rigel772]

Hi @DaiQiangReal I am having a problem using semidesign with Astro and aparently there is a problem with SSR. Opened a ticket in Astro ghithub project (https://github.com/withastro/astro/issues/6606#event-8858304201) and got a response: "...the error comes from @douyinfe/semi-ui/lib/cjs/index.js where it's doing require("./_base/base.css");, which doesn't work in NodeJS / SSR..." Would you possibly know how can I resolve it? There is guidance for using with Remix, mayby similar could be done for Astro? Is it possible to disable auto css import so I can do it manually in Astro config? Thanks

[DaiQiangReal]

Can you reopen the issue? @Rigel772

[gxy5202]

Hi @DaiQiangReal I am having a problem using semidesign with Astro and aparently there is a problem with SSR. Opened a ticket in Astro ghithub project (withastro/astro#6606 (comment)) and got a response: "...the error comes from @douyinfe/semi-ui/lib/cjs/index.js where it's doing require("./_base/base.css");, which doesn't work in NodeJS / SSR..." Would you possibly know how can I resolve it? There is guidance for using with Remix, mayby similar could be done for Astro? Is it possible to disable auto css import so I can do it manually in Astro config? Thanks

Did u solve this problem, bro? I meet the same issue as yours

[Rigel772]

@DaiQiangReal what issue should I reopen? So there will be no progress on this?