Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: rsc to ssr #6682

Open
wants to merge 26 commits into
base: feat-rsc
Choose a base branch
from
Open

feat: rsc to ssr #6682

wants to merge 26 commits into from

Conversation

chenjun1011
Copy link
Collaborator

@chenjun1011 chenjun1011 commented Dec 6, 2023

实现思路

  1. 使用 react-server-dom-webpack/server.edge 渲染出 RSC 产物(只渲染 Server Component)
  2. 使用 react-server-dom-webpack/client.edge 加载 RSC 产物(这里需要在 Server 端加载 Client Component,并进行渲染)
  3. 使用 react-dom/server.edge 渲染出完整首屏 HTML

@codecov-commenter
Copy link

codecov-commenter commented Dec 7, 2023

Codecov Report

Attention: 114 lines in your changes are missing coverage. Please review.

Comparison is base (c1deba8) 77.93% compared to head (2701ccf) 77.58%.

Files Patch % Lines
packages/ice/src/esbuild/rscLoader.ts 20.31% 51 Missing ⚠️
packages/ice/src/esbuild/transfromRSCDirective.ts 24.13% 22 Missing ⚠️
packages/ice/src/esbuild/assets.ts 30.00% 14 Missing ⚠️
packages/ice/src/webpack/FlightManifestPlugin.ts 23.07% 10 Missing ⚠️
packages/ice/src/service/serverCompiler.ts 33.33% 8 Missing ⚠️
packages/ice/src/webpack/ServerCompilerPlugin.ts 0.00% 6 Missing ⚠️
packages/runtime/src/runRSCClientApp.tsx 0.00% 2 Missing ⚠️
packages/ice/src/esbuild/transformPipe.ts 87.50% 1 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff              @@
##           feat-rsc    #6682      +/-   ##
============================================
- Coverage     77.93%   77.58%   -0.36%     
============================================
  Files           223      225       +2     
  Lines         19668    19782     +114     
  Branches       2461     2466       +5     
============================================
+ Hits          15329    15348      +19     
- Misses         4307     4402      +95     
  Partials         32       32              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@chenjun1011 chenjun1011 changed the title feat: rsc to ssr [WIP]feat: rsc to ssr Dec 7, 2023
@@ -112,7 +117,7 @@ const transformPipe = (options: PluginOptions = {}): Plugin => {
let sourceMap = null;

if (plugin.load && (!loadInclude || loadInclude?.(id))) {
const result = await plugin.load.call(pluginContext, id);
const result = await plugin.load.call(pluginContext, id, args.namespace);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

希望在插件的 load 中只处理 resolved 的 path,所以透传了 namespace 进行标记,看看是否有更好的方式。

@chenjun1011 chenjun1011 added the need review Need Review label Dec 25, 2023
@chenjun1011 chenjun1011 changed the title [WIP]feat: rsc to ssr feat: rsc to ssr Dec 25, 2023
@ClarkXia ClarkXia added need review Need Review and removed need review Need Review labels Dec 25, 2023
@ClarkXia ClarkXia removed the need review Need Review label Dec 26, 2023
@ClarkXia ClarkXia changed the base branch from feat-rsc to release/rsc December 26, 2023 08:57
@ClarkXia ClarkXia changed the base branch from release/rsc to feat-rsc December 26, 2023 09:00
Comment on lines +30 to +34
await new Promise<any>((resolve) => {
setTimeout(() => resolve(null), 3000);
});

return fakeData;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码不会执行到的了,可去掉

render() {
if (this.state.hasError) {
// @ts-ignore
const ClientComments = lazy(() => import('./CommentsWithServerError'));
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ClientComments -> CommentsWithServerError


const CSSRegex = /\.(css|sass|scss)$/;

Object.keys(ssrManifest).map(router => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

有一些 lint 的问题

if (modules[id] || CSSRegex.test(id)) return;
modules[id] = true;
index++;
imports.push(`import * as component_${index} from "(rsc)${id}";`);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(rsc) 感觉可以换成 rsc:,然后注释下后面会替换掉

name: 'esbuild-rsc-loader',
setup(build: PluginBuild) {
build.onResolve({ filter: /react-ssr-module-mapping.json$/ }, (args) => {
if (args.path === 'virtual-rsc-module:react-ssr-module-mapping.json') {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个 mapping 是有什么用吗?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个是 Server 端渲染 RSC 结果到 SSR 时,需要用到 Client Components 的 mapping。会根据这份产物加载对应的 Client Component 的 Server 端 Bundle,然后渲染

plugins: [
serverComponent && transformRSCDirectivePlugin(),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

插件命名上,建议是 RemoveUseClientDirectivePlugin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants