fix: router base not working for ssr and export static #12140

jaykou25 · 2024-02-25T07:15:47Z

修复开启 ssr 后输出产物中的前端路由链接 href 没有正确的 base 前缀的问题. 该问题会影响 SEO 的跳转.

Summary by CodeRabbit

New Features
- Introduced server-side rendering (SSR) and static export capabilities with base URL configuration.
- Added new "about" and "home" pages with navigation links.
Enhancements
- Implemented handling for base URL prefixes in server-side rendered applications to improve routing accuracy.
Documentation
- Updated project documentation to reflect new build and development scripts.

vercel · 2024-02-25T07:15:51Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
umi	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 4, 2024 1:49am

packages/renderer-react/src/server.tsx

examples/ssr-export-static-basename/package.json

codecov · 2024-02-26T11:09:28Z

Codecov Report

Attention: Patch coverage is 0% with 6 lines in your changes missing coverage. Please review.

Project coverage is 27.96%. Comparing base (f45177a) to head (a41b4b8).
Report is 10 commits behind head on master.

Files with missing lines	Patch %	Lines
packages/server/src/ssr.ts	0.00%	3 Missing ⚠️
...eset-umi/src/features/exportStatic/exportStatic.ts	0.00%	2 Missing ⚠️
packages/renderer-react/src/server.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #12140      +/-   ##
==========================================
- Coverage   27.96%   27.96%   -0.01%     
==========================================
  Files         499      499              
  Lines       15773    15775       +2     
  Branches     3789     3793       +4     
==========================================
  Hits         4411     4411              
- Misses      10557    10559       +2     
  Partials      805      805

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

jaykou25 · 2024-03-28T01:44:33Z

目前项目是布署在 github.io 的二级目录下, 这种场景应该是挺多的. 现在每次发版前都需要对静态产物中的 a 标签 href 进行手动替换, 还挺麻烦的, 希望能尽快处理一下这个 pr. 感谢! @PeachScript

PeachScript · 2024-03-28T02:15:21Z

packages/renderer-react/src/server.tsx

+
+  // If router has a basename, location should be concatenated with that basename
+  const finalLocation = `${
+    basename.endsWith('/') ? basename.slice(0, -1) : basename


这里可能有问题，getClientRootComponent 会同时用于 ssr 和 ssg，在 ssr 场景下是作为 express middleware 的形态存在的，也就是说在 ssr 场景下这里接收到的 location 来源于 request.url 是包含 basename 的，得抹平一下两个场景下的差异，目前的想法：

getClientRootComponent 接收的 location 是带 basename 的 location

ssg exportStatic 调用预渲染时带上 basename，ref

history 初始化的时候也得处理下 basename，但这个和 href 没啥关系，可以看下要不要在这个 PR 里一起处理掉

还有其他可能的影响吗，调整后存量有 base 的 ssr 或 ssg 项目会被影响吧。

存量项目只要没配 base 都是不受影响的，因为目前就是把 basename 当做 /，如果配了 base，那么：

ssr 存量项目配了 base 的话，产出的 middleware 应该也是用不了的，因为带 base 的 url 匹配不到路由，ref:

umi/packages/server/src/ssr.ts

Line 102 in 60896f5

const matches = matchRoutesForSSR(url, routes);

ssg 存量项目配了 base 目前是存在 HTML 里 href 不正确的问题（虽然 Link 跳转可以正常工作但 SEO 的确有问题），这个改动正是为了修复该问题

这里可能有问题，getClientRootComponent 会同时用于 ssr 和 ssg，在 ssr 场景下是作为 express middleware 的形态存在的，也就是说在 ssr 场景下这里接收到的 location 来源于 request.url 是包含 basename 的，得抹平一下两个场景下的差异，目前的想法：

getClientRootComponent 接收的 location 是带 basename 的 location

ssg exportStatic 调用预渲染时带上 basename，ref

history 初始化的时候也得处理下 basename，但这个和 href 没啥关系，可以看下要不要在这个 PR 里一起处理掉

我重新整理了一遍代码, 增加了 ssr 的案例, 第1点和第2点已经改好了.

对于第3点不是太明白, 目前看 history 是带上 basename 的. @PeachScript

@PeachScript 麻烦再审核一下

fz6m · 2024-03-29T05:17:40Z

可以先把 base 用 define 作为环境变量注入到项目里然后给 href 的地方加上前缀，比如：

// .umirc.ts

  define: { 'process.env.BASE_URL': '/base/' }

  <Link to={`${process.env.BASE_URL}/path/to/url`} />

或者把 Link 组件封装一下统一处理下 url 位置。

PeachScript · 2024-03-29T05:40:31Z

可以先把 base 用 define 作为环境变量注入到项目里然后给 href 的地方加上前缀

这个方案不合适吧，SPA 只需要感知 base 内的路由；如果只是临时解的话还不如写个脚本修正产物 👀

jaykou25 · 2024-03-29T05:45:29Z

可以先把 base 用 define 作为环境变量注入到项目里然后给 href 的地方加上前缀

这个方案不合适吧，SPA 只需要感知 base 内的路由；如果只是临时解的话还不如写个脚本修正产物 👀

同意, 还是得考虑抹平一下两个场景下的差异, 我再修改一下.

fz6m · 2024-03-29T06:43:57Z

如果用脚本去修改产物或者 html ，毕竟是一种外部行为，可能匹配不能精准到每个地方，不够完备。

对于临时解，我感觉还是要从源码出发做调整，如果是只为了 SEO 服务，机器人的请求是已知的（通过 bot 标头判断，主流搜索引擎都有其公开特征，或 CF 的 WAF 规则可以精准知道所有已知的 SEO bot ），可以考虑给 SEO 的请求加一个标识，之后生成不一样的 href 即可。

PeachScript · 2024-03-29T07:02:58Z

不考虑临时解了吧，上面提临时解是相对于 define 来说的，现在 PR 调整好就是彻底解了

coderabbitai · 2024-04-17T01:14:29Z

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The recent updates focus on enhancing server-side rendering (SSR) and static export functionalities in the Umi framework by properly handling the basename property. This adjustment ensures that the base URL prefix is correctly applied to the front-end routing links in the SSR output, addressing a critical issue related to incorrect URL prefixes in pre-rendered pages.

Changes

File Path	Change Summary
`.../ssr-export-static-basename/.umirc.ts`	Introduced SSR and static export configurations, including base URL settings to '/a/'.
`.../ssr-export-static-basename/package.json`	Added Node.js package configurations with dependencies and scripts focusing on Umi.
`.../ssr-export-static-basename/src/pages/...`	Added simple React components for home and about pages with proper routing.
`.../preset-umi/src/features/.../tmpFiles.ts`	Included `basename` in JSON stringification for development environment settings.
`.../preset-umi/templates/server.tpl`	Added dynamic `basename` value to the server template.
`.../renderer-react/src/server.tsx`	Updated `IHtmlProps` interface and routing logic to handle `basename` correctly.
`.../server/src/ssr.ts`	Enhanced `CreateRequestHandlerOptions` and `createJSXGenerator` to include and process `basename`.

Assessment against linked issues

Objective	Addressed	Explanation
Correct `base` prefix in SSR output links [#11233]	✅

Poem

🐰🌟
In the land of code where the Umi trees grow,
A rabbit tweaked the base, now the links rightly show.
With a hop and a commit, the pages align,
Now every URL dances perfectly in line.
Cheers to paths that lead where they should,
In the digital woods, all is now good. 🌲👩‍💻

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

PeachScript · 2024-08-20T06:34:20Z

@Jinbao1001 看看这个修复与近期 ssr 的变更是否有冲突

jaykou25 · 2024-09-04T02:06:07Z

@Jinbao1001 麻烦看一下这个修复

Jinbao1001 · 2024-09-04T06:09:01Z

@Jinbao1001 麻烦看一下这个修复

sorry, 刚看到!

Jinbao1001 · 2024-09-04T09:14:32Z

@jaykou25 明天发版.

fz6m reviewed Feb 25, 2024

View reviewed changes

packages/renderer-react/src/server.tsx Outdated Show resolved Hide resolved

fz6m reviewed Feb 25, 2024

View reviewed changes

examples/ssr-export-static-basename/package.json Outdated Show resolved Hide resolved

fz6m requested a review from PeachScript February 26, 2024 11:06

PeachScript requested changes Mar 28, 2024

View reviewed changes

jaykou25 force-pushed the master branch from db2a0d2 to bbebea9 Compare April 17, 2024 01:14

jaykou25 force-pushed the master branch from d39247c to 2568548 Compare July 11, 2024 10:55

jaykou25 force-pushed the master branch from 6fff230 to 1e7b0fb Compare July 30, 2024 08:39

jaykou25 added 6 commits August 1, 2024 17:16

fix: ssr exportStatic not handle with base

8c8a8d1

fix: update pnpm-lock.yaml

13d41a5

fix: 修复 getClientRootComponent 方法. 增加 ssr basename 案例

9ba2542

fix: 解决 exportStatic 文件冲突

e3cf1cf

fix: 修复合并冲突导致的问题

d433ed0

fix: 完善例子

46f61c6

jaykou25 force-pushed the master branch from 9b3a065 to 46f61c6 Compare August 1, 2024 09:16

jaykou25 added 2 commits August 1, 2024 17:35

fix: 完善例子

ec74ef8

fix: conflict

8c14eef

jaykou25 requested a review from PeachScript August 2, 2024 02:16

PeachScript changed the title ~~fix: ssr exportStatic not handled with base~~ fix: router base not working for ssr and export static Aug 20, 2024

Merge branch 'umijs:master' into master

a41b4b8

vercel bot deployed to Preview September 4, 2024 01:49 View deployment

Jinbao1001 approved these changes Sep 4, 2024

View reviewed changes

Jinbao1001 merged commit 6665b61 into umijs:master Sep 4, 2024
23 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: router base not working for ssr and export static #12140

fix: router base not working for ssr and export static #12140

jaykou25 commented Feb 25, 2024 •

edited by coderabbitai bot

Loading

vercel bot commented Feb 25, 2024 •

edited

Loading

codecov bot commented Feb 26, 2024 •

edited

Loading

jaykou25 commented Mar 28, 2024

PeachScript Mar 28, 2024

fz6m Mar 29, 2024

PeachScript Mar 29, 2024

jaykou25 Aug 2, 2024 •

edited

Loading

jaykou25 Aug 20, 2024

fz6m commented Mar 29, 2024

PeachScript commented Mar 29, 2024

jaykou25 commented Mar 29, 2024

fz6m commented Mar 29, 2024

PeachScript commented Mar 29, 2024

coderabbitai bot commented Apr 17, 2024 •

edited

Loading

Review skipped

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

PeachScript commented Aug 20, 2024

jaykou25 commented Sep 4, 2024

Jinbao1001 commented Sep 4, 2024

Jinbao1001 commented Sep 4, 2024

fix: router base not working for ssr and export static #12140

fix: router base not working for ssr and export static #12140

Conversation

jaykou25 commented Feb 25, 2024 • edited by coderabbitai bot Loading

Summary by CodeRabbit

vercel bot commented Feb 25, 2024 • edited Loading

codecov bot commented Feb 26, 2024 • edited Loading

Codecov Report

jaykou25 commented Mar 28, 2024

PeachScript Mar 28, 2024

Choose a reason for hiding this comment

fz6m Mar 29, 2024

Choose a reason for hiding this comment

PeachScript Mar 29, 2024

Choose a reason for hiding this comment

jaykou25 Aug 2, 2024 • edited Loading

Choose a reason for hiding this comment

jaykou25 Aug 20, 2024

Choose a reason for hiding this comment

fz6m commented Mar 29, 2024

PeachScript commented Mar 29, 2024

jaykou25 commented Mar 29, 2024

fz6m commented Mar 29, 2024

PeachScript commented Mar 29, 2024

coderabbitai bot commented Apr 17, 2024 • edited Loading

Review skipped

Walkthrough

Changes

Assessment against linked issues

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

PeachScript commented Aug 20, 2024

jaykou25 commented Sep 4, 2024

Jinbao1001 commented Sep 4, 2024

Jinbao1001 commented Sep 4, 2024

jaykou25 commented Feb 25, 2024 •

edited by coderabbitai bot

Loading

vercel bot commented Feb 25, 2024 •

edited

Loading

codecov bot commented Feb 26, 2024 •

edited

Loading

jaykou25 Aug 2, 2024 •

edited

Loading

coderabbitai bot commented Apr 17, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)