modern.js icon indicating copy to clipboard operation
modern.js copied to clipboard

[Feature]: 提供 data loader 執行環境配置選項

Open rosslo opened this issue 4 months ago • 3 comments

这个功能解决了什么问题?

經過閱讀以下兩個文檔內容:

  • https://modernjs.dev/zh/guides/basic-features/data/data-fetch.html#%E5%9C%A8%E4%B8%8D%E5%90%8C%E7%8E%AF%E5%A2%83%E4%BD%BF%E7%94%A8-data-loader
  • https://modernjs.dev/zh/guides/basic-features/render/ssr.html#%E4%BD%BF%E7%94%A8-client-loader

我理解我可以透過給同時創建兩個一模一樣內容的 page.data.ts 以及 page.data.client.ts,來達到以下需求:

  1. 在 SSR 時,loader 函数在服务端执行
  2. 浏览器端切换路时,loader 函数在浏览器端执行

但問題在於說,這樣的開發行為是有點繁瑣的,且由於我們的架構不支持 /<route>?__loader 請求,一旦遺漏 page.data.client.ts 會造成我們的頁面崩潰。

你期望的 API 是什么样子的?

所以期望 modern.js 能夠在 server.ssr 去提供一個新的射置,能夠更直接地支持只需要創建一個 page.data.ts,但能滿足 loader 函数的執行時機如下:

  1. 在 SSR 時,loader 函数在服务端执行
  2. 浏览器端切换路时,loader 函数在浏览器端执行

亦或是多一個 page.xxx.ts 的文件規範類型,來滿足這樣的需求。

rosslo avatar Aug 29 '25 09:08 rosslo

这个做法的问题在于,你的服务端请求和客户端请求必须是同构的,但通常情况下不会这样,服务端我们需要更好的性能,例如通过 RPC 请求来获取数据。

我们尝试过让用户在 Loader 中书写例如 if (isNode) 的代码,但这在 Treeshaking 过程中会造成非常大的成本,而且频繁的出现问题。在实践后,这个方式确实是用户最容易理解的,且不容易出现问题的。

zllkjc avatar Aug 29 '25 09:08 zllkjc

@zllkjc 感謝回覆。

的確我們的服務端請求和客戶端請求是同構的,所以也不會牽涉到 tree shaking。 因此我們期望的解法對我們來說在開發體驗上更為方便,希望 modernjs 能夠考慮支持。

可以理解我們是正在將 Next.JS 的 getInitialProps 遷移成 modern.js 的 page.data.ts

rosslo avatar Aug 29 '25 14:08 rosslo

由於我們的架構不支持 /?__loader 請求

能够理解你这边的难点,但这里初衷是希望使用 Modern.js 的服务器来管理应用。目前 Modern.js 里确实也提供了一些 getInitialProps 的 API,但仅仅是针对一个多页,而非每个前端路由页面。

你可以具体描述下现在你们的服务是如何运行的,我们讨论讨论是否有更合适的方式。

zllkjc avatar Oct 13 '25 03:10 zllkjc

你可以具体描述下现在你们的服务是如何运行的,我们讨论讨论是否有更合适的方式。

有类似需求。我的场景中,modern.js 负责渲染,实际的后端服务以 HTTP 方式提供接口,既给前端渲染服务(modern.js)使用,也直接提供给用户。因此服务端请求和客户端请求一定是同构的。我希望浏览器上发起的请求不要再让前端服务中转一次,因为在我的场景下,这样只会浪费前端服务资源而没有实际意义

sylingd avatar Dec 28 '25 11:12 sylingd